Sidebar

<Sidebar open={true}>
  <Sidebar.Header logo={<Home />} title="Apasara" />
  <Sidebar.Main>
    <Sidebar.Group name="Main">
      <Sidebar.Item href="#" icon={<Info />} active>
        Dashboard
      </Sidebar.Item>
      <Sidebar.Item href="#" icon={<Info />} disabled>
        Settings
      </Sidebar.Item>
    </Sidebar.Group>
    <Sidebar.Group name="Support">
      <Sidebar.Item href="#" icon={<Info />}>
        Help
      </Sidebar.Item>
    </Sidebar.Group>
  </Sidebar.Main>
  <Sidebar.Footer>
    <Sidebar.Item href="#" icon={<Info />}>
      Help
    </Sidebar.Item>
  </Sidebar.Footer>
</Sidebar>

Usage

The Sidebar component provides a collapsible navigation panel with header, main content, groups, and footer sections.

import { Sidebar } from "@raystack/apsara/v1";
 
export default function App() {
  return (
    <Sidebar open={true}>
      <Sidebar.Header logo={<Home />} title="Company Name" />
      <Sidebar.Main>
        <Sidebar.Group name="Main">
          <Sidebar.Item href="#" icon={<Info />} active>
            Dashboard
          </Sidebar.Item>
          <Sidebar.Item href="#" icon={<Info />} disabled>
            Settings
          </Sidebar.Item>
        </Sidebar.Group>
        <Sidebar.Group name="Support">
          <Sidebar.Item href="#" icon={<Info />}>
            Help
          </Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Main>
      <Sidebar.Footer>
        <Sidebar.Item href="#" icon={<Info />}>
          Help
        </Sidebar.Item>
      </Sidebar.Footer>
    </Sidebar>
  );
}

Prop	Type	Default
`open`	`boolean`	-
`onOpenChange`	`(open: boolean) => void`	-
`position`	`"left" \| "right"`	`"left"`
`profile`	`{ icon?: ReactNode; label?: string \| undefined; href?: string \| undefined; onIconClick?: (() => void) \| undefined; }`	-

Sidebar.Header Props

Prop	Type	Default
`logo`	`ReactNode`	-
`title`	`string`	-
`onLogoClick`	`() => void`	-

Sidebar.Group Props

Prop	Type	Default
`name`	`string`	-
`icon`	`ReactNode`	-
`children`	`ReactNode`	-

Sidebar.Item Props

Prop	Type	Default
`icon`	`ReactNode`	-
`href`	`string`	-
`active`	`boolean`	-
`disabled`	`boolean`	-
`children`	`ReactNode`	-

Examples

Position

The Sidebar can be positioned on either the left or right side of the screen.

<Sidebar open={true} position="left">
  <Sidebar.Header logo={<Home />} title="Company Name" />
  <Sidebar.Main>
    <Sidebar.Item href="#" icon={<Info />} active>
      Dashboard
    </Sidebar.Item>
    <Sidebar.Item href="#" icon={<Info />} disabled>
      Settings
    </Sidebar.Item>
  </Sidebar.Main>
</Sidebar>

State

The Sidebar supports expanded and collapsed states with smooth transitions.

<Sidebar open={true}>
  <Sidebar.Header logo={<Home />} title="Company Name" />
  <Sidebar.Main>
    <Sidebar.Item href="#" icon={<Info />} active>
      Dashboard
    </Sidebar.Item>
    <Sidebar.Item href="#" icon={<Info />} disabled>
      Settings
    </Sidebar.Item>
  </Sidebar.Main>
</Sidebar>

Accessibility

The Sidebar implements the following accessibility features:

Proper ARIA roles and attributes
- role="navigation" for the main sidebar
- role="banner" for the header
- role="menuitem" for navigation items
- aria-expanded to indicate sidebar state
- aria-current="page" for active items
- aria-disabled="true" for disabled items
Keyboard navigation support
- Enter/Space to toggle sidebar expansion
- Tab navigation through interactive elements
Screen reader support
- Meaningful labels for all interactive elements
- Hidden decorative elements
- Clear state indicators