Sidebar

A collapsible side navigation panel component.
1<Sidebar defaultOpen>
2  <Sidebar.Header>
3    <Flex align="center" gap={3}>
4      <IconButton size={4} aria-label="Logo">
5        <Home />
6      </IconButton>
7      <Text size={4} weight="medium" data-collapse-hidden>
8        Apsara
9      </Text>
10    </Flex>
11  </Sidebar.Header>
12  <Sidebar.Main>
13    <Sidebar.Group label="Main" leadingIcon={<Info />}>
14      <Sidebar.Item href="#" leadingIcon={<Info />} active>
15        Dashboard
16      </Sidebar.Item>
17      <Sidebar.Item href="#" leadingIcon={<Info />} disabled>
18        Settings
19      </Sidebar.Item>
20    </Sidebar.Group>
21    <Sidebar.Group label="Support">
22      <Sidebar.Item href="#" leadingIcon={<Info />}>
23        Help
24      </Sidebar.Item>
25    </Sidebar.Group>
26  </Sidebar.Main>

Usage

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

Sidebar Props

Prop

Type

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

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

Examples

Position

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

1<Sidebar open={true} position="left">
2  <Sidebar.Header>
3    <Flex align="center" gap={3}>
4      <IconButton size={4} aria-label="Logo">
5        <Home width={24} height={24} />
6      </IconButton>
7      <Text size={4} weight="medium" data-collapse-hidden>
8        Apsara
9      </Text>
10    </Flex>
11  </Sidebar.Header>
12  <Sidebar.Main>
13    <Sidebar.Item href="#" leadingIcon={<Info />} active>
14      Dashboard
15    </Sidebar.Item>
16    <Sidebar.Item href="#" leadingIcon={<Info />} disabled>
17      Settings
18    </Sidebar.Item>
19  </Sidebar.Main>
20</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.

1<Sidebar open={true}>
2  <Sidebar.Header>
3    <Flex align="center" gap={3}>
4      <IconButton size={4} aria-label="Logo">
5        <Home width={24} height={24} />
6      </IconButton>
7      <Text size={4} weight="medium" data-collapse-hidden>
8        Apsara
9      </Text>
10    </Flex>
11  </Sidebar.Header>
12  <Sidebar.Main>
13    <Sidebar.Item href="#" leadingIcon={<Info />} active>
14      Dashboard
15    </Sidebar.Item>
16    <Sidebar.Item href="#" leadingIcon={<Info />} disabled>
17      Settings
18    </Sidebar.Item>
19  </Sidebar.Main>
20</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.

1<Sidebar defaultOpen tooltipMessage="Toggle navigation">
2  <Sidebar.Header>
3    <Flex align="center" gap={3}>
4      <IconButton size={4} aria-label="Logo">
5        <Home width={24} height={24} />
6      </IconButton>
7      <Text size={4} weight="medium" data-collapse-hidden>
8        Apsara
9      </Text>
10    </Flex>
11  </Sidebar.Header>
12  <Sidebar.Main>
13    <Sidebar.Item href="#" leadingIcon={<Info />} active>
14      Dashboard
15    </Sidebar.Item>
16    <Sidebar.Item href="#" leadingIcon={<Info />} disabled>
17      Settings
18    </Sidebar.Item>
19  </Sidebar.Main>
20</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