Skip to content

index.mdx

Latest commit

 

History

History
125 lines (78 loc) · 3.52 KB

index.mdx

File metadata and controls

125 lines (78 loc) · 3.52 KB
title Sidebar
description A collapsible side navigation panel component.
source packages/raystack/components/sidebar

import { preview, positionDemo, stateDemo, tooltipDemo, collapsibleDemo, hideTooltipDemo } from "./demo.ts";

Anatomy

Import and assemble the component:

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

<Sidebar>
  <Sidebar.Header />
  <Sidebar.Main>
    <Sidebar.Group label="Group name">
      <Sidebar.Item href="#">Item</Sidebar.Item>
    </Sidebar.Group>
  </Sidebar.Main>
  <Sidebar.Footer />
</Sidebar>

API Reference

Root

Groups all parts of the sidebar navigation. Use collapsible={false} to hide the resize handle and prevent toggling. Use hideCollapsedItemTooltip to disable tooltips on items when the sidebar is collapsed.

Header

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.

Main

The main section wraps navigation groups and items. It accepts all div props and scrolls when content overflows.

Group

Item

Note: leadingIcon is optional and will show a fallback avatar only in collapsed state. You can pass <></> to render truly nothing. Use the as prop to render as a custom element (e.g. a router Link).

Footer

The footer section is a container that accepts all div props. It's commonly used for secondary links (e.g. Help, Preferences) and stays at the bottom of the sidebar.

Examples

Position

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

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.

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.

Non-collapsible

Set collapsible={false} to hide the resize handle and prevent the sidebar from being collapsed or expanded.

Hide item tooltips when collapsed

Set hideCollapsedItemTooltip to disable tooltips on navigation items when the sidebar is collapsed. Useful when item labels are redundant with the collapse tooltip or you want a cleaner collapsed state.

Accessibility

The Sidebar implements the following accessibility features:

  • Reduced motion — Sidebar collapse/expand motion is enabled only when prefers-reduced-motion: no-preference.

  • Proper ARIA roles and attributes

    • role="navigation" for the main sidebar
    • role="banner" for the header
    • role="list" for item containers (Main groups, Footer) and role="listitem" 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