Apsara

Documentation

Playground

Icons

Sidebar

A collapsible side navigation panel component.

<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";
PropTypeDefault
open
boolean
-
onOpenChange
((open: boolean) => void)
-
defaultOpen
boolean
-
collapsible
boolean
undefined
position
"left" | "right"
"left"
hideCollapsedItemTooltip
boolean
false
tooltipMessage
ReactNode
-

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

PropTypeDefault
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.

PropTypeDefault
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>

Custom Tooltip Message

You can customize the tooltip message that appears when hovering over the collapse/expand handle using the tooltipMessage prop.

You can use Sidebar as a controlled component to conditionally render different tooltip messages.

<Sidebar defaultOpen tooltipMessage="Toggle navigation">
  <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

Previous

Sheet

Next

Sidepanel

On this page