Lompat ke isi
CirccaHIG

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.
React · BetaFigma · siapFigmaSumber

Kapan dipakai

Gunakan

  • Satu item per modul atau daftar dokumen; kelompokkan per area kerja (Sales & CRM, Order & pengadaan, Proyek, Finance).
  • Di sidebar produk pakai iconStyle="tile" dengan satu warna ubin per grup agar modul mudah dikenali.
  • Tandai tepat satu item sebagai current — halaman yang sedang dibuka.
  • Jumlah informatif memakai count (teks muted); hanya jumlah yang menuntut tindakan memakai Badge.

Hindari

  • Jangan menaruh aksi ("Buat PO", "Ekspor") di NavList — NavList hanya untuk berpindah halaman; aksi ada di Toolbar/PageHeader.
  • Jangan memberi setiap item warna ubin berbeda — warna menandai grup, bukan item.
  • Jangan menyarangkan lebih dari dua level; modul yang dalam memakai Tabs di halamannya.
  • Jangan memberi Badge pada setiap item — kalau semua menonjol, tidak ada yang menonjol.

Contoh benar & salah

GunakanSatu warna ubin per grup modul; item aktif berlatar aksen penuh.
HindariSetiap item diberi warna ubin berbeda sehingga grup tidak terbaca.
GunakanSidebar hanya berisi tujuan navigasi; "Buat PO" ada di Toolbar layar.
HindariTombol aksi diselipkan di antara item navigasi.

Penulisan

  • Label item = nama modul atau daftar dalam bentuk kata benda: "PO Customer", "Pipeline deal", "Piutang" — bukan kata kerja.
  • Judul grup singkat dan konsisten dengan nama area kerja: "Sales & CRM", "Order & pengadaan", "Finance".
  • Kapital hanya di huruf pertama, kecuali nama diri/singkatan (PO, BAST, CRM).

Komponen terkait

Esc
↑↓ pilih↵ buka12 hasil