Component registry

Navbar

The site identity and navigation: the brand as one button, the menu button at the right, the person last.

All components · Kit documents · Definition as JSON

What shipped

4.200.0 moved the menu button to the right end on every width, made the name open its pages and put “All OpenVibe sites” at the end of that list. The brand’s one-button form is in review for the next release.

“The menu button should be on the right, even on desktop … there’s like a duplicated icon.” — the owner, 2026-11-10

31 One navbar per page, owned by the shared Frame.30 One menu button on every site.40 The menu button is at the right end of the bar on every width.41 The site's name in the bar opens that site's pages, Home first.94 A site's name opens its pages, and a way to every site.

Shipped in 4.200.0 · Every Shared release

Live web demo

Web source: openvibe-shared/navbar · OpenVibeNavbar with lead and action slots

Anatomy

  • brandthe mark and the site name, one button
  • linksprimary destinations
  • actionsthe menu button, the person, page controls

Props

lead
string
links
link[]
actions
action[]
active
string

Behavior and accessibility

States
default · menu-open · scrolled
Tokens
color.bg.raised · color.text.primary · size.tap
Keyboard
Keeps the focused control in view
Outside tap
Closes the surface
Scroll lock
Page remains scrollable
Reduced motion
Remove movement; keep the state change.
Accessibility
Navbar. Tab through lead, destinations and actions; Escape closes the menu. At least 44 × 44 dp or pt for every touch action.

Android · Jetpack Compose

Use a TopAppBar with navigationIcon and actions slots; place overflow destinations in a modal menu.

Material 3 container: SurfaceContainer

iOS · SwiftUI

Use a toolbar with leading and trailing ToolbarItems, and a Menu for overflow.

Example definition

{
  "schema": "design.component@1",
  "name": "navbar",
  "props": {
    "lead": "OpenVibe",
    "active": "Design"
  }
}

Other components