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 · siapFigma Sumber

Sidebar produk (Tile)

Ubin berwarna per grup modul, jumlah informatif sebagai teks muted, dan Badge untuk jumlah yang menuntut tindakan. Item aktif berlatar aksen penuh.

import { useState, type MouseEvent } from 'react';
import { Badge, NavList } from '@divistant/circca-react';
import { Briefcase, Buildings, ChartBar, FileText, House, Kanban, Receipt, ShoppingCart, Tray, Wallet } from '@phosphor-icons/react';

// Sidebar BizOps for IT Services: Icon style Tile, warna ubin per grup modul.
export default function Example() {
  const [aktif, setAktif] = useState('po-customer');
  const item = (id: string) => ({
    href: '#',
    current: aktif === id,
    onClick: (e: MouseEvent) => {
      e.preventDefault();
      setAktif(id);
    },
  });
  return (
    <div className="w-[248px] rounded-2xl border-[0.5px] border-glass-edge bg-default px-2 py-3 shadow-elevation-1">
      <NavList label="Navigasi utama" iconStyle="tile">
        <NavList.Item icon={House} {...item('beranda')}>
          Beranda
        </NavList.Item>
        <NavList.Item icon={Tray} count={7} {...item('kotak-masuk')}>
          Kotak masuk
        </NavList.Item>
        <NavList.Group title="Sales & CRM" tone="success">
          <NavList.Item icon={Kanban} {...item('pipeline')}>
            Pipeline deal
          </NavList.Item>
          <NavList.Item icon={Buildings} {...item('customer')}>
            Customer
          </NavList.Item>
        </NavList.Group>
        <NavList.Group title="Order & pengadaan" tone="info">
          <NavList.Item icon={FileText} {...item('po-customer')}>
            PO Customer
          </NavList.Item>
          <NavList.Item icon={ShoppingCart} badge={<Badge count={3} aria-label="3 menunggu persetujuan" />} {...item('po-distributor')}>
            PO Distributor
          </NavList.Item>
        </NavList.Group>
        <NavList.Group title="Proyek" tone="warning">
          <NavList.Item icon={Briefcase} {...item('project')}>
            Project
          </NavList.Item>
        </NavList.Group>
        <NavList.Group title="Finance" tone="highlight">
          <NavList.Item icon={Receipt} {...item('invoice')}>
            Invoice
          </NavList.Item>
          <NavList.Item icon={Wallet} {...item('piutang')}>
            Piutang
          </NavList.Item>
          <NavList.Item icon={ChartBar} {...item('laporan')}>
            Laporan
          </NavList.Item>
        </NavList.Group>
      </NavList>
    </div>
  );
}

Symbol & sub-item

Gaya Symbol (ikon aksen, aktif = latar action/selected) untuk navigasi sekunder di dalam modul. Item dengan subItems menjadi tombol buka/tutup berisi item level 2.

import { useState, type MouseEvent } from 'react';
import { NavList } from '@divistant/circca-react';
import { ChartBar, FileText, Gear, House, Users } from '@phosphor-icons/react';

// Icon style Symbol (ikon aksen) dengan item yang bisa dibuka (Expandable → Level 2).
export default function Example() {
  const [aktif, setAktif] = useState('laba-rugi');
  const item = (id: string) => ({
    href: '#',
    current: aktif === id,
    onClick: (e: MouseEvent) => {
      e.preventDefault();
      setAktif(id);
    },
  });
  return (
    <div className="w-[248px] rounded-2xl bg-default px-2 py-3 shadow-elevation-1">
      <NavList label="Navigasi Finance">
        <NavList.Item icon={House} {...item('ringkasan')}>
          Ringkasan
        </NavList.Item>
        <NavList.Item icon={FileText} count={12} {...item('jurnal')}>
          Jurnal
        </NavList.Item>
        <NavList.Item
          icon={ChartBar}
          defaultOpen
          subItems={
            <>
              <NavList.Item {...item('laba-rugi')}>Laba rugi</NavList.Item>
              <NavList.Item {...item('neraca')}>Neraca</NavList.Item>
              <NavList.Item {...item('arus-kas')}>Arus kas</NavList.Item>
            </>
          }
        >
          Laporan
        </NavList.Item>
        <NavList.Group title="Pengaturan">
          <NavList.Item icon={Users} {...item('pengguna')}>
            Pengguna & peran
          </NavList.Item>
          <NavList.Item icon={Gear} {...item('preferensi')}>
            Preferensi
          </NavList.Item>
        </NavList.Group>
      </NavList>
    </div>
  );
}

Dengan Next Link

asChild memasang gaya item ke komponen tautan sendiri, mis. <Link> Next.js, agar prefetch dan navigasi sisi klien tetap berjalan.

import Link from 'next/link';
import type { MouseEvent } from 'react';
import { NavList } from '@divistant/circca-react';
import { FileText, House, ShoppingCart } from '@phosphor-icons/react';

// asChild: gaya item dipasang ke komponen tautan sendiri (Next <Link>) — prefetch & navigasi klien tetap jalan.
// Di contoh ini klik dicegah agar halaman dokumentasi tidak berpindah.
const cegah = (e: MouseEvent) => e.preventDefault();

export default function Example() {
  return (
    <div className="w-[248px] rounded-2xl bg-default px-2 py-3 shadow-elevation-1">
      <NavList label="Navigasi utama" iconStyle="tile">
        <NavList.Item asChild icon={House}>
          <Link href="#" onClick={cegah}>
            Beranda
          </Link>
        </NavList.Item>
        <NavList.Group title="Order & pengadaan" tone="info">
          <NavList.Item asChild icon={FileText} current>
            <Link href="#" onClick={cegah}>
              PO Customer
            </Link>
          </NavList.Item>
          <NavList.Item asChild icon={ShoppingCart} count={4}>
            <Link href="#" onClick={cegah}>
              PO Distributor
            </Link>
          </NavList.Item>
        </NavList.Group>
      </NavList>
    </div>
  );
}