Navigation

Sidebar

The app's main navigation. It collapses to icons with tooltips.

import { Sidebar } from "@flinbu/seed";

Sections, a group, a badge and a footer

Selection is neutral (bg-selected), never blue.

Page content

import { Avatar, Sidebar } from "@flinbu/seed";
import { BookOpen, Component, House, Palette, Settings, Users } from "lucide-react";

const [collapsed, setCollapsed] = React.useState(false);

<div className="flex h-[30rem] w-full max-w-2xl overflow-hidden rounded-xl border border-secondary bg-primary">
  <Sidebar collapsible collapsed={collapsed} onCollapsedChange={setCollapsed}
    header={<span className="label-label-1-semibold text-primary">Acme DS</span>}
    items={[
      { label: "Home", icon: <House />, href: "#" },
      { type: "section", label: "System" },
      { label: "Tokens", icon: <Palette />, defaultOpen: true, items: [{ label: "Color", href: "#", active: true }, { label: "Spacing", href: "#" }, { label: "Type", href: "#" }] },
      { label: "Components", icon: <Component />, href: "#", badge: 31 },
      { label: "Docs", icon: <BookOpen />, href: "#" },
      { type: "section", label: "Workspace" },
      { label: "Members", icon: <Users />, href: "#" },
      { label: "Settings", icon: <Settings />, href: "#" },
    ]}
    footer={(small) => <div className="flex items-center gap-xs px-xxs"><Avatar name="Felipe Linares" size="xs" />{small ? null : <span className="truncate text-primary label-label-3-medium">Felipe Linares</span>}</div>} />
  <div className="flex-1 p-lg text-secondary body-body-3-regular">Page content</div>
</div>

Use it for

Apps with several areas people move between all day.

Use something else for

Marketing sites: use a top bar.

Props

Prop	Type	Default	Description
`items`	`SidebarItem[]`	–	{ label, icon?, href?, onClick?, active?, badge?, items?, defaultOpen? } or { type: 'section', label }.
`header / subheader`	`ReactNode`	–	Logo row; a switcher under it (hidden when collapsed).
`footer`	`ReactNode(collapsed) => ReactNode`	–	Account, credits.
`collapsible`	`boolean`	–	Shows the collapse button.
`collapsed / defaultCollapsed`	`boolean`	–	Icons only.
`onCollapsedChange`	`(collapsed: boolean) => void`	–	Remember it per person.
`linkAs`	`ElementType`	`'a'`	Your router's Link.

Accessibility

A nav landmark with lists; the current page has aria-current=page.
Collapsed items keep their names (visually hidden) and show a tooltip; the collapse button reports aria-expanded.