ACTIONS & SURFACES

Sidebar

Composable side panel with header, body, and footer slots. Used here on the docs site for the navigation rail you see to the left.

Import

1import {
2  Sidebar,
3  SidebarHeader,
4  SidebarBrand,
5  SidebarSubtitle,
6  SidebarBody,
7  SidebarFooter,
8} from 'damo-ui'

Live preview

Page content area.

Basic usage

1<Sidebar aria-label="Main navigation">
2  <SidebarHeader>
3    <SidebarBrand>Damo UI</SidebarBrand>
4    <SidebarSubtitle>DOCS</SidebarSubtitle>
5  </SidebarHeader>
6  <SidebarBody>
7    <nav>
8      <a href="/docs/getting-started">Getting Started</a>
9      <a href="/docs/components/button">Button</a>
10    </nav>
11  </SidebarBody>
12  <SidebarFooter>v0.3.0</SidebarFooter>
13</Sidebar>

API

Sidebar props

Prop	Type	Default	Description
children	ReactNode	—	Compose with SidebarHeader, SidebarBody, SidebarFooter.
aria-label	string	—	Required when the sidebar is the only nav landmark on the page.
className	string	—	Tailwind classes are merged on top of the defaults.

← PageHeader ColorPicker →