BLD8 / ui
Navigation

Sidebar.

A workspace rail that makes room when you need it.

LIVE PREVIEWTry it. It works.
Workspace

Planning

Collapse the rail to make room. In a narrow container, navigation opens as a drawer.

Install the source

Terminal
npx shadcn@latest add https://ui.bld8.dev/r/sidebar.json

Registry setup · Open the playground

Usage

React / TypeScript
<SidebarProvider>
  <Sidebar label="Workspace">
    <SidebarGroup label="PROJECTS">
      <SidebarMenuButton icon={FolderOpen} label="Projects"
        active onClick={openProjects} />
    </SidebarGroup>
  </Sidebar>
  <SidebarInset><SidebarTrigger />{children}</SidebarInset>
</SidebarProvider>

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Collapse to icons on desktop; containers narrower than 640px use a modal Drawer. SidebarProvider supports open/defaultOpen/onOpenChange and holds mobile state separately. SidebarMenuButton requires a label and Lucide icon, uses aria-current for the active view, and closes mobile navigation after selection. Collapsed labels have tooltips via UIProvider. State stays in memory; no cookies or global shortcut. SidebarHeader, Group and Footer compose optional sections.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.