navigation / stable

Sidebar

App navigation: 220px full width or a 48px icon rail with tooltips; sections peek open from the rail.

LIVE PREVIEW

Loading preview…

When to use

The primary navigation of an app shell (one per app).
Collapse to the rail when screen space matters; the user's choice should persist (cookie) to avoid a flash on load.

Consider an alternative

In-page navigation between views of one record — use segmented Tabs.
A list of records — use a list or table.

Import

import { Sidebar } from '@revido-llc/kit';

Keyboard interaction

Tab — move through items (the rail shows the label as a tooltip on focus)
Enter — open the item; Enter / Space on a section expands it (peeks from the rail)
Escape — close a peeking sidebar

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


children	ReactNode	—
className	string	—

Related exports

SidebarProvider, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarItem, SidebarSection, SidebarToggle, SidebarTrigger, useSidebar

Examples

Expanded

32px rows 2px apart, groups 24px apart; select an item to slide the active background between rows.

const [active, setActive] = useState("home");
<SidebarGroup label="Workspace">
  <SidebarItem onPress={() => setActive("home")} icon={<Home />} isActive={active === "home"}>Home</SidebarItem>
  <SidebarItem onPress={() => setActive("inbox")} icon={<Inbox />} badge={4} isActive={active === "inbox"}>Inbox</SidebarItem>
</SidebarGroup>

Icon rail

48px rail: icons only, labels as right-hand tooltips (and still in the accessible name). Click Admin to peek.

<SidebarProvider collapsed={collapsed} onCollapsedChange={saveToCookie}>
  <Sidebar aria-label="Main">…</Sidebar>
</SidebarProvider>

Mobile

Below 768px the sidebar is a sheet: place SidebarTrigger in your header.

<SidebarProvider>
  <div className="flex h-12 items-center gap-2 border-b border-border px-2">
    <SidebarTrigger className="inline-flex" />
    <span>Acme</span>
  </div>
  <Sidebar aria-label="Main">
    <Brand />
    <SidebarContent>…</SidebarContent>
  </Sidebar>
</SidebarProvider>

Framework links

Use asChild to render your router's link (e.g. Next's Link for prefetching) with item styles.

// Link = your router's link component (Next, React Router, …)
<SidebarItem asChild icon={<FolderKanban />} isActive={pathname.startsWith("/projects")}>
  <Link href="/projects">Projects</Link>
</SidebarItem>

Literal anatomy

Static component anatomy; bind events in the consuming app.

<SidebarProvider><Sidebar><SidebarHeader>Workspace</SidebarHeader><SidebarContent><SidebarGroup label="Work"><SidebarSection label="Drafts"><SidebarItem href="/drafts">All drafts</SidebarItem></SidebarSection></SidebarGroup></SidebarContent><SidebarFooter><SidebarToggle /><SidebarTrigger /></SidebarFooter></Sidebar></SidebarProvider>