The horizontal bar for global wayfinding and primary actions.
| Prop | Type | Notes |
|---|---|---|
| brand / logo | ReactNode / boolean | Logo lockup; can be hidden |
| variant | fixed · floating | Flush to the top, or a lifted floating bar |
| links · mega | { label, href, active, items }[] | Active underline; a link with items opens an L1 → L2 mega menu |
| clientSwitcher | { current, options, onChange } | Workspace / client selector on the left |
| search / cta | boolean / ReactNode | ⌘K search and one warm primary action |
| notifications | Notification[] | Bell with an unread dot and a dropdown |
| account | ReactNode | Avatar opening a profile menu (Settings, Sign out) |
| responsive | — | Links collapse behind a hamburger + left drawer on mobile |
The bar handles top-level wayfinding and global actions. For deep product areas use the Side Navigation; for a trail within a page use Breadcrumbs.
Keep the link set short — the top areas people switch between.
Don't cram every page up here. Deep areas belong in a side rail.
One warm CTA on the right, beside search and account.
Don't line up three warm buttons. One primary action, max.
A product bar with app sections and account.
A marketing header with a single sign-up CTA.
Brand plus account only, for focused apps.
| Token | Value | Role |
|---|---|---|
| --tnav-h | 56px | Bar height |
| --tnav-bg | #0C0D10 | Bar surface |
| --tnav-active | 2px #FF7A00 | Active-link underline |
| --tnav-link | #9AA0A8 | Idle link colour |
| --tnav-search | 32px · #101114 | ⌘K search field |
| --tnav-gap | 18px | Region spacing |
<nav class="o-tnav" aria-label="Global">
<span class="o-tnav__brand"><Logo /> Optimistic</span>
<div class="o-tnav__links">
<a class="o-tnav__link is-active" aria-current="page">Overview</a>
<a class="o-tnav__link">Projects</a>
</div>
<div class="o-tnav__right">
<button class="o-btn o-btn--brand">New</button>
<Avatar>AL</Avatar>
</div>
</nav>