Sidebar

A composable layout component for navigation screens, with responsive behavior and mobile menu support.

Installation

npx vayu-ui init #one time only

npx vayu-ui add sidebar

npx vayu-ui add -t sidebar #with test case needs

Dashboard

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <h2>Acme Inc</h2>
      <MobileMenuButton />
    </SidebarHeader>
    <SidebarContent>
      <SidebarMenu>
        <SidebarMenuGroup label="Application">
          <SidebarMenuItem href="/dashboard" active badge="3">
            Dashboard
          </SidebarMenuItem>
          <SidebarMenuItem href="/analytics">Analytics</SidebarMenuItem>
        </SidebarMenuGroup>
      </SidebarMenu>
    </SidebarContent>
    <SidebarFooter>
      <SidebarToggle />
    </SidebarFooter>
  </Sidebar>
</SidebarProvider>

Anatomy

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <MobileMenuButton />
    </SidebarHeader>
    <SidebarContent>
      <SidebarMenu>
        <SidebarMenuGroup label="...">
          <SidebarMenuItem icon={<Icon />} badge="..." href="...">
            Item Name
          </SidebarMenuItem>
        </SidebarMenuGroup>
      </SidebarMenu>
    </SidebarContent>
    <SidebarFooter>
      <SidebarToggle />
    </SidebarFooter>
  </Sidebar>
</SidebarProvider>

Accessibility

Keyboard support: Escape key dismisses mobile drawer, tab order strictly maintained visually.
ARIA attributes: Includes navigation landmarks (aria-label), aria-hidden overlays, and correct semantic lists.
Focus behavior: Implements a focus trap within the mobile overlay to ensure screen readers don't escape.

Screen readers announce the container as a "Main navigation" landmark. The sidebar dynamically skips from accessibility trees when fully collapsed or hidden on smaller viewpoints to avoid irrelevant noise.

Component Folder Structure

Sidebar/
├── Sidebar.tsx
├── SidebarContent.tsx
├── SidebarFooter.tsx
├── SidebarHeader.tsx
├── SidebarMenu.tsx
├── SidebarMenuItem.tsx
├── SidebarMobileMenuButton.tsx
├── SidebarToggle.tsx
├── hooks.ts
├── index.ts
└── types.ts

Props

SidebarMenuItem

Prop	Type	Default	Description
`icon`	`ReactNode`	-	Visual element placed to the left of the item text.
`active`	`boolean`	`false`	Marks the item as the current active route.
`badge`	`string \| number`	-	Notice or counter displayed at the right edge.
`href`	`string`	-	Hyperlink target destination.
`subItems`	`SubItem[]`	-	Array of nested children `{ label, active, href }` to render a dropdown.

SidebarMenuGroup

Prop	Type	Default	Description
`label`	`string`	-	Heading label for the grouping section.