Komponen / Navigasi
NavigationBar
Bar atas BizOps versi ponsel: tombol kembali dan aksi berupa lingkaran kaca 44, judul besar di bawah bar untuk halaman akar tab, atau judul kecil di tengah bar untuk layar detail seperti "PO-2026-0142".
Import
tsx
import { NavigationBar } from '@divistant/circca-react';Props · NavigationBar
Juga menerima atribut <div>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| title | ReactNode | — | Judul halaman (properti Figma "Title"), dirender sebagai heading. |
| titleStyle | 'large' | 'inline' | 'large' | Large = Display/Page title di bawah bar; Inline = Headline/Default di tengah bar. |
| headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | 1 | Level heading judul. |
| back | ReactNode | — | Tombol kembali (properti Figma "Back"): <NavigationBar.Back label="PO Customer" href="…" />. |
| actions | ReactNode | — | Aksi kanan (properti Figma "Trailing action"): satu atau dua NavigationBar.Action. |
| collapseOnScroll | boolean | false | Khusus Large: bar sticky dan judul kecil muncul saat judul besar tergulir keluar. Letakkan sebagai anak langsung kontainer gulir; pembungkus memakai display: contents. |
| className | string | — | Kelas tambahan. |
Props · NavigationBar.Back
Merender <a> bila ada href, elemen anak bila asChild, selain itu <button>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| label | string | — | Nama halaman sebelumnya. Nama aksesibel: "Kembali ke {label}". |
| href | string | — | Tautan halaman sebelumnya. |
| asChild | boolean | false | Pakai elemen anak (Next <Link href>); isinya diganti chevron. |
Props · NavigationBar.Action
Juga menerima atribut <button>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| icon | Visual | — | Ikon 20 di lingkaran kaca 44. Tanpa ikon, children tampil sebagai kapsul teks. |
| label | string | — | Nama aksi untuk aksi ikon — wajib (aria-label). |
| asChild | boolean | false | Render sebagai elemen anak (tautan atau pemicu menu). |
Sumber
Kode komponen ada di packages/react/src/components/navigation-bar. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.