components / global
site topbar
SiteTopbarShell is the shared global navigation shell used by every app. Package-level wrappers only pre-wire currentApp and optional clock behavior on top of the same global contract.
| field | value |
| group | global |
| import | @arieare/ds |
| source | packages/ds/src/components/site-topbar/SiteTopbarShell.tsx
packages/ds/src/components/site-topbar/site-topbar.css |
component tokens
| token | source | description |
--topbar-h / --topbar-text-size | @arieare/ds/tokens.css | Controls topbar height and shared navigation type size. |
--topbar-bg / --topbar-bg-blur / --topbar-line | @arieare/ds/tokens.css | Defines topbar surface treatment in standard and backdrop-filter paths. |
--topbar-link-ink / --topbar-link-ink-hover / --topbar-link-ink-active | @arieare/ds/tokens.css | Styles idle, hover, and current-page link states. |
props
| prop | type | default | description |
links | SiteTopbarLink[] | — | Ordered set of app links rendered in the topbar navigation. |
currentApp | SiteTopbarApp | — | Marks the active application link in the navigation. |
showClock | boolean | true | Enables the live clock slot in wrappers that ship the clock binder. |
className | string | "" | Adds extra classes to the topbar shell. |