Navbar

Topbars with a brand, navigation links, and an action button. Used as the primary app-level navigation.
The bar measures its own width: at and below the sm breakpoint (640) the links row automatically collapses into a menu button opening a dropdown of the same links (the active one checkmarked), so links never clip off a phone screen; active and onSelect keep their contract in both renderings.
In glass mode the active link paints a control-layer pane (iOS keeps its inactive capsules and carries the brand fill as glass, web and Android carry their tinted tile), and the collapsed menu is Dropdown's dense-layer glass card under the hamburger. Solid mode keeps the skin's own active tile.
Either cluster takes a caller-supplied element beside its built-in parts: brandContent leads the left one with a logo mark (beside or instead of the brand wordmark) and actions leads the right one with free-form trailing controls (a search button, icon buttons), ahead of actionLabel and avatar. links is optional, so a console topbar with no middle nav renders neither the links row nor the menu button that stands in for it.
Canvas
Dashboard
Users
Settings
RC
iOS
Canvas
Dashboard
Users
Settings
RC
Android
Canvas
Dashboard
Users
Settings
RC
Web
tsx
<Navbar
brand="Canvas"
links={["Dashboard", "Users", "Settings"]}
actionLabel="New"
avatar="RC"
/>

Props

Prop
Description
brand
string
Brand or product name shown at the left, in a semibold face.
brandContent
ReactNode
A brand ELEMENT for the left cluster (a logo mark, a workspace switcher). It LEADS the cluster, so passing it beside `brand` renders the mark first and keeps the wordmark beside it; passing it alone makes the mark the whole brand. It takes the left cluster's own gap, so it needs no wrapper.
links
string[]
Ordered navigation link labels rendered in the middle row. Omit it (or pass an empty array) for a bar with no middle nav: neither the links row nor the narrow menu button that stands in for it renders.
active
number
Index of the active link (CONTROLLED; its label reads in the foreground color). Omit for uncontrolled use.
defaultActive
number
Initial active link for uncontrolled use (a bare navbar moves the active link on press).
actions
ReactNode
Free-form trailing controls for the right cluster: a ghost search button, icon buttons, a notification dropdown, an account menu. They LEAD the cluster, ahead of the built-in `actionLabel` button and `avatar`, and take the cluster's own gap, so they need no wrapper. Keep them few and compact: the bar is a fixed height and the slot is rendered as given at every width.
actionLabel
string
Optional primary action; renders a <Button primary small> on the right.
onAction
() => void
Called when the action button is pressed.
avatar
string
Optional account initials/name; renders an <Avatar small> on the right.
onSelect
(index: number) => void
Called when a nav link is pressed, with its index.
bordered
boolean
Surface (pick one; default is the flush bottom-hairline bar).
floating
boolean
Surface (pick one; default is the flush bottom-hairline bar).
bare
boolean
No surface and no hairline: the bar sits clear on what is behind it. Pass it while nothing has scrolled under the bar (the scroll edge) and drop it once content does.
testID
string
E2E hook forwarded to the root element.
style
StyleProp<ViewStyle>
Outer layout composition only (width/flex within a parent), never a restyle hook.

Do & Don’t

Brand element

Don’t
◆ Console
Overview
Access
Audit
RC
Folding the mark into the wordmark string leaves it as text, stuck in the title's size and color.
Do
Console
Overview
Access
Audit
RC
Pass the mark through brandContent, so the bar owns the whole brand group and the wordmark keeps its own type.

Standard topbar

Don’t
Canvas
Dashboard
Users
Settings
Billing
Reports
Integrations
Audit
Webhooks
RC
Cramming every destination into the bar wraps the row and buries the primary links.
Do
Canvas
Dashboard
Users
Settings
RC
Keep a few primary links inline and fold the rest behind a More menu.

With search bar

Don’t
Canvas
A live text field in the bar reads as a form input and offers no keyboard affordance.
Do
Canvas
Use a button that opens the command palette and advertise the ⌘K shortcut.

Mobile

Don’t
Canvas
Dashboard
Users
Settings
Billing
A full horizontal nav at phone width wraps onto a second row and crowds out the logo.
Do
Canvas
Collapse the links into a hamburger and keep only the logo and avatar in the bar.
← FilterPanel
RowMenu →