Sidebar

<Sidebar defaultOpen>
  <Sidebar.Header>
    <Flex align="center" gap={3}>
      <IconButton size={4} aria-label="Logo">
        <Home />
      </IconButton>
      <Text size={4} weight="medium" data-collapse-hidden>
        Apsara
      </Text>
    </Flex>
  </Sidebar.Header>
  <Sidebar.Main>
    <Sidebar.Group label="Main" leadingIcon={<Info />}>
      <Sidebar.Item href="#" leadingIcon={<Info />} active>
        Dashboard
      </Sidebar.Item>
      <Sidebar.Item href="#" leadingIcon={<Info />} disabled>
        Settings
      </Sidebar.Item>
    </Sidebar.Group>
    <Sidebar.Group label="Support">
      <Sidebar.Item href="#" leadingIcon={<Info />}>
        Help
      </Sidebar.Item>
    </Sidebar.Group>
  </Sidebar.Main>
  <Sidebar.Footer>
    <Sidebar.Item href="#" leadingIcon={<Info />}>
      Help
    </Sidebar.Item>
  </Sidebar.Footer>
</Sidebar>

Usage

import { Sidebar } from "@raystack/apsara";

Prop	Type	Default
`open`	`boolean`	-
`onOpenChange`	`((open: boolean) => void)`	-
`defaultOpen`	`boolean`	-
`collapsible`	`boolean`	`undefined`
`position`	`"left" \| "right"`	`"left"`
`hideCollapsedItemTooltip`	`boolean`	`false`

Sidebar.Header Props

The header section is a container component that accepts all div props. It's commonly used to create a header with an icon and title.

Sidebar.Group Props

Prop	Type	Default
`label`	`string`	-
`leadingIcon`	`ReactNode`	-
`children`	`ReactNode`	-

Sidebar.Item Props

Note: leadingIcon is optional and will show a fallback avatar only in collapsed state. You can pass <></> to render truly nothing.

Prop	Type	Default
`leadingIcon`	`ReactNode`	-
`href`	`string`	-
`active`	`boolean`	-
`disabled`	`boolean`	-
`children`	`ReactNode`	-
`as`	`ReactElement<any, string \| JSXElementConstructor<any>>`	`"<a />"`
`classNames`	`{ root?: string \| undefined; leadingIcon?: string \| undefined; text?: string \| undefined; }`	-

Examples

Position

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

<Sidebar open={true} position="left">
  <Sidebar.Header>
    <Flex align="center" gap={3}>
      <IconButton size={4} aria-label="Logo">
        <Home width={24} height={24} />
      </IconButton>
      <Text size={4} weight="medium" data-collapse-hidden>
        Apsara
      </Text>
    </Flex>
  </Sidebar.Header>
  <Sidebar.Main>
    <Sidebar.Item href="#" leadingIcon={<Info />} active>
      Dashboard
    </Sidebar.Item>
    <Sidebar.Item href="#" leadingIcon={<Info />} disabled>
      Settings
    </Sidebar.Item>
  </Sidebar.Main>
</Sidebar>

State

The Sidebar supports expanded and collapsed states with smooth transitions.

The data-collapse-hidden attribute can be used to conditionally hide elements when the sidebar is collapsed.

<Sidebar open={true}>
  <Sidebar.Header>
    <Flex align="center" gap={3}>
      <IconButton size={4} aria-label="Logo">
        <Home width={24} height={24} />
      </IconButton>
      <Text size={4} weight="medium" data-collapse-hidden>
        Apsara
      </Text>
    </Flex>
  </Sidebar.Header>
  <Sidebar.Main>
    <Sidebar.Item href="#" leadingIcon={<Info />} active>
      Dashboard
    </Sidebar.Item>
    <Sidebar.Item href="#" leadingIcon={<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