Usage#

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "neelam-ui";
 
<SidebarProvider>
  <Sidebar>
    <SidebarHeader>Acme</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Workspace</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton href="/" isActive>Overview</SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <main className="flex-1">
    <SidebarTrigger />
  </main>
</SidebarProvider>

SidebarProvider renders the shared flex row itself, rather than leaving it to you. Unlike Dialog — whose provider holds only context, because the content portals into the top layer — a docked sidebar and its main content are ordinary flex siblings that need a wrapper.

Collapsing#

open and defaultOpen control it, and useSidebar() exposes the state plus a setter and toggle for a control SidebarTrigger does not cover.

defaultOpen is true: unlike a dialog, a docked sidebar is normally visible from the start.

Collapsing animates the <aside>'s own width. Its children sit in an inner <div> held at a constant width instead of collapsing with it, so header and nav text does not visibly reflow and wrap mid-animation as the outer width crosses toward zero.

Collapsing to an icon rail#

By default (collapsible="offcanvas"), closing collapses the panel all the way to a hidden, inert 0-width panel — the behaviour above. Pass collapsible="icon" and it collapses to a slim, still-visible-and-interactive rail instead:

<Sidebar collapsible="icon">…</Sidebar>

Because the rail stays interactive, it's no longer inert while collapsed — unlike the offcanvas default, there's nothing invisible here for Tab to skip. Each SidebarMenuButton's label isn't dropped, either: it's kept sr-only (so the link's accessible name is unchanged) and resurfaces as a Tooltip on hover or focus, wrapping the <a> itself via TooltipTrigger's asChild rather than an extra focusable wrapper around it. SidebarGroupLabel renders nothing at all while collapsed — a rail that narrow has no room for a text heading, and unlike a menu button there's no icon standing in for it to attach a tooltip to instead.

iconWidth (default "4rem") sets the rail's width, the same way width sets the open one. It's deliberately roomier than a single icon looks like it needs — SidebarContent's own p-3 padding still applies inside the rail, so a tighter width leaves the icon's h-8 w-8 box no space to actually center in:

<Sidebar collapsible="icon" iconWidth="4.5rem" />

Width#

width is a CSS length (default "16rem") applied as an inline style, not a Tailwind w-* class. That is deliberate: this library hit a real bug in Resizable where a component's own default class silently beat a caller's override of the same property, because which of two equal-specificity classes wins is decided by their order in the generated stylesheet, not by anything in the className string. An inline style has no such ambiguity.

So change the width with the width prop rather than by fighting a class:

<Sidebar width="20rem" />

Marking the current page#

SidebarMenuButton renders a native <a> and takes isActive, which sets aria-current="page" alongside the highlight. Pass icon for a leading glyph — it is placed and hidden from assistive tech for you.

Keyboard#

There is no arrow-key roving. A sidebar is a list of ordinary links inside a landmark, not a composite widget, so each link is its own tab stop and browser find-in-page works normally.

Accessibility#

• Sidebar renders a native <aside>, whose implicit complementary landmark needs no role — the same reasoning Breadcrumb renders a plain <nav>.
• SidebarMenu is a real <ul> of <li>s, so assistive tech announces how many items there are and which one you are on.
• The current page carries aria-current="page", not just a colour.
• SidebarTrigger is an icon-only button with a default aria-label="Toggle sidebar" — override it if that does not fit.
• With the default collapsible="offcanvas", the collapsed panel is inert, so it never becomes a set of invisible tab stops. With collapsible="icon", it deliberately isn't — the rail is real, visible content, so it stays in the accessibility tree, and each link's accessible name is unchanged (its label stays sr-only, not removed) even though the rail is too narrow to show it.

API reference#

SidebarProvider#

Sidebar#

SidebarMenuButton#