Sidebar

Interactive

See Sidebar in Storybook for every variant, with live controls.

The app's primary navigation column, grouped into titled sections.

import { Sidebar } from "@kairosis/eidos";

<Sidebar
  header={<span style={{ fontWeight: 600 }}>eidos</span>}
  sections={[
    {
      title: "Workspace",
      items: [
        { id: "runs", label: "Runs", icon: "play", count: 12 },
        { id: "sources", label: "Sources", icon: "database" },
      ],
    },
  ]}
  activeItem={active}
  onSelect={setActive}
/>;

Props

Prop	Type	Default	Description
`sections`	`SidebarSection[]`	—	Required
`activeItem`	`string`	—	Id of the current item
`onSelect`	`(id: string) => void`	—
`header`	`ReactNode`	—	Above the sections — usually the wordmark
`footer`	`ReactNode`	—	Below a top border — usually the user
`width`	`number`	`232`	px

SidebarSection is { title?, items }; SidebarItem is { id, label, icon?, count?, badge? }.

Guidelines

There is no Eidos logo. Render "eidos" in lowercase Geist Semibold wherever a mark would go. Don't draw one.
Items are real buttons and set aria-current when active.
Section titles are uppercase mono — write them in sentence case; CSS uppercases them.
count is a mono number at the right edge; badge takes an arbitrary node for anything richer.

Props​

Guidelines​

Props

Guidelines