Live Docs

Navigation

Navigation /

stable

Sidebar

Navigasi vertikal untuk dashboard/app shell, dengan mode collapsible dan item aktif.

import { Sidebar, SidebarSection, SidebarItem, SidebarSubmenu } from "@naraya/ui";

Examples

Basic sidebar

<Sidebar brand={<strong>Naraya</strong>}>
  <SidebarSection label="General" />
  <SidebarItem label="Overview" active />
</Sidebar>

Collapsible (controlled)

const [collapsed, setCollapsed] = useState(false);
<Sidebar collapsible collapsed={collapsed} onCollapsedChange={setCollapsed}>...</Sidebar>

Advanced submenu (auto-open on active child)

<SidebarSubmenu label="Projects" badge={<Badge size="sm">12</Badge>}>
  <SidebarItem label="All Projects" />
  <SidebarItem label="Active Projects" active />
  <SidebarItem label="Archived" />
</SidebarSubmenu>

Props

PropTypeDefaultDescription
brandReactNode—Brand/logo di header sidebar.
collapsiblebooleanfalseMenampilkan tombol collapse.
defaultCollapsedbooleanfalseState awal (uncontrolled).
collapsedboolean—State collapsed controlled.
onCollapsedChange(collapsed: boolean) => void—Callback saat toggle collapse.
footerReactNode—Area footer sidebar.
SidebarItem.activeboolean—Tandai item aktif.
SidebarItem.badgeReactNode—Badge count/status item.
SidebarSubmenu.defaultOpenbooleanfalseState awal submenu (uncontrolled).
SidebarSubmenu.openboolean—State submenu controlled.
SidebarSubmenu.onOpenChange(open: boolean) => void—Callback saat submenu di-toggle.
SidebarSubmenu.autoOpenOnActivebooleantrueAuto expand jika ada child item aktif.

Tokens Used

--bg-surface

Sidebar background

--border-subtle

Sidebar border/divider

--color-primary

Active item accent

--text-muted

Section label color

Accessibility

  • Sidebar menggunakan landmark aside + nav internal.
  • Tombol collapse punya aria-label yang berubah sesuai state.
  • Saat collapsed, title item tetap tersedia untuk membantu discoverability.