Navigation

Sidebar

App drawer rendered as an in-flow <aside> (inline mode) or a portaled modal panel (overlay mode), with header/body/footer sections and a mini collapsed rail.

Import

import { Sidebar, SidebarHeader, SidebarBody, SidebarFooter } from "@zephora/react";

Examples

Inline layout

Inline mode participates in normal flow — place it next to your content.

Content

<div style={{ display: "flex", height: 260 }}>
  <Sidebar mode="inline">
    <SidebarHeader><strong>Acme</strong></SidebarHeader>
    <SidebarBody>
      <nav style={{ display: "grid", gap: 4 }}>
        <a href="#">Dashboard</a>
        <a href="#">Projects</a>
        <a href="#">Settings</a>
      </nav>
    </SidebarBody>
    <SidebarFooter>v2.4.0</SidebarFooter>
  </Sidebar>
  <main style={{ flex: 1, padding: 16 }}>Content</main>
</div>

Collapsed rail

Inline sidebars can shrink to a mini rail via `collapsed`.

Content

const [collapsed, setCollapsed] = React.useState(false);

<Button size="sm" onClick={() => setCollapsed((c) => !c)}>
  {collapsed ? "Expand" : "Collapse"}
</Button>
<div style={{ display: "flex", height: 200 }}>
  <Sidebar mode="inline" collapsed={collapsed} width="14rem" collapsedWidth="3.5rem">
    <SidebarBody>{collapsed ? "☰" : "Navigation"}</SidebarBody>
  </Sidebar>
  <main style={{ flex: 1, padding: 16 }}>Content</main>
</div>

API

Sidebar props

Prop	Type	Default	Description
`mode`	`"inline" \| "overlay"`	`"inline"`	Rendering mode: in-flow <aside> or a portaled modal drawer with backdrop and focus trap.
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	`true`	Initial open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`side`	`"start" \| "end"`	`"start"`	Which inline edge the sidebar sits on.
`width`	`number \| string`	`"16rem"`	Expanded width. Numbers are px.
`collapsedWidth`	`number \| string`	`"4rem"`	Width in collapsed (mini rail) mode.
`collapsed`	`boolean`	`false`	Mini rail mode (inline only).
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

SidebarHeader / SidebarBody / SidebarFooter props

Prop	Type	Default	Description
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.
`…rest`	`HTMLAttributes<HTMLDivElement>`	—	All native div props are forwarded. Body scrolls; header and footer stay fixed.

Keyboard

Key	Action
`Escape`	Closes the sidebar in overlay mode (focus is trapped inside while open).