Live Docs

Navigation

Layout Shells /

new

Sidebar Layout

Shell aplikasi/dashboard: sidebar kiri tetap + kolom utama (topbar opsional + konten scroll mandiri). Di layar kecil sidebar jadi drawer off-canvas dengan tombol menu bawaan.

import { SidebarLayout } from "@naraya/ui";

Overview

SidebarLayout adalah frame untuk internal tool, admin, dan dashboard. Sidebar dan konten punya scroll terpisah. Pada breakpoint mobile (< 1024px) sidebar otomatis berubah jadi drawer yang dibuka via tombol menu bawaan — jadi tidak perlu merakit logika drawer manual di tiap halaman.

Examples

Dashboard shell

Navigation

Active users

12,340

Conversion

8.9%

Revenue

$91,200

<SidebarLayout
  sidebar={<Sidebar>...nav...</Sidebar>}
  topbar={<Topbar glass actions={...} />}
>
  <Container size="full">...metrics + table...</Container>
</SidebarLayout>

Props

PropTypeDefaultDescription
sidebar*ReactNode—Navigasi kiri, biasanya <Sidebar>…</Sidebar>.
topbarReactNode—Topbar di atas kolom utama (opsional).
children*ReactNode—Konten utama (scroll mandiri).
mobileTitleReactNode"Navigation"Judul header drawer mobile (sekaligus label a11y drawer).
menuLabelstring"Open navigation"aria-label tombol menu mobile bawaan.
onMobileOpenChange(open: boolean) => void—Dipanggil saat drawer mobile buka/tutup (mis. buat nutup overlay lain).
topbarHeightstring"3.5rem"Tinggi topbar; ngepasin posisi atas drawer/overlay mobile kalau topbar custom.

Accessibility

  • Tombol menu mobile punya aria-label + aria-expanded sesuai state drawer.
  • Di mobile, drawer berlaku sebagai modal: role=dialog + aria-modal, fokus pindah ke dalam drawer, dan terkunci di dalamnya (focus trap).
  • Body scroll dikunci selama drawer terbuka; fokus dikembalikan ke tombol menu saat ditutup.
  • Drawer dapat ditutup via Escape, klik overlay, atau menekan kontrol topbar; transisi menghormati prefers-reduced-motion.
  • Di desktop drawer kembali jadi sidebar statis biasa (tanpa perilaku modal).