Komponen / Navigasi
NavList
Navigasi sidebar ala macOS untuk berpindah modul BizOps (Beranda, Sales & CRM, Order & pengadaan, Proyek, Finance). Gaya Symbol (ikon aksen) atau Tile (ubin berwarna ala System Settings) — sidebar produk memakai Tile.
Import
tsx
import { NavList } from '@divistant/circca-react';Props · NavList
Juga menerima atribut <nav>. Merender <nav aria-label> berisi <ul>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| label | string | 'Navigasi utama' | Nama landmark navigasi (aria-label). Wajib unik bila ada lebih dari satu <nav> di halaman. |
| iconStyle | 'symbol' | 'tile' | 'symbol' | Properti Figma "Icon style". Tile = ubin 22 px berwarna berisi ikon fill — dipakai di sidebar produk. |
| children | ReactNode | — | NavList.Item dan NavList.Group. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Props · NavList.Group
Merender <li> berisi judul dan <ul aria-labelledby> sehingga pembaca layar menyebut nama grup.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| title | ReactNode | — | Judul grup (properti Figma "Title"), mis. "Order & pengadaan". |
| tone | 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'highlight' | 'neutral' | — | Warna ubin bawaan untuk item di grup (Icon style Tile). |
Props · NavList.Item
Juga menerima atribut <a> (href, onClick, target, dll.).
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| children | ReactNode | — | Label (properti Figma "Label"). Dengan asChild: satu elemen tautan berisi label. |
| icon | Visual | — | Ikon depan (properti Figma "Leading icon"): `House` atau `<House />`. Pada Tile dirender versi fill. |
| current | boolean | false | Halaman aktif (State Current) — aria-current="page" dan teks Nav/Current. |
| count | number | string | — | Jumlah informatif (properti Figma "Counter" → "Count"), teks muted di kanan. Di atas countMax ditulis "99+". |
| countMax | number | 99 | Batas angka sebelum ditulis "<max>+". |
| badge | ReactNode | — | Isi ujung kanan untuk jumlah yang menuntut tindakan, mis. <Badge count={3} />. |
| tone | 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'highlight' | 'neutral' | — | Warna ubin (Tile). Bawaan mengikuti NavList.Group, lalu accent. |
| asChild | boolean | false | Render sebagai elemen anak (mis. Next <Link>) dengan gaya item. |
| subItems | ReactNode | — | Item level 2 (properti Figma "Expandable" + Level 2). Item menjadi tombol buka/tutup dengan aria-expanded; href/asChild diabaikan. |
| defaultOpen / open / onOpenChange | boolean / boolean / (open) => void | — | Status buka sub-item (tidak terkendali / terkendali). |
Sumber
Kode komponen ada di packages/react/src/components/nav-list. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.