Component registry

Menu

One navigation sheet: Here, Feed, Vibe with Chat · Agents, Chat and You, with the pressed button flying to its tab.

All components · Kit documents · Definition as JSON

What shipped

4.200.0 made the menu one row of places: this site, Feed, Vibe (Chat · Agents), Chat and You. The button that was pressed flies to the tab it opens and becomes it, and closing flies it back. The notifications and the avatar count are in review for the next release.

“When you click this button, I want it to animate into the tab it becomes. Same with the other buttons.” — the owner, 2026-11-10; and “instead of having this called AI as the tab, let’s call it Vibe, and then under Vibe is Chat and Agents.”

92 The menu's places: Here, Feed, Chat, Vibe, You; Vibe holds Chat and Agents.91 A bar button turns into the tab it opens, and back.93 A place's actions are icons, not rows.36 The menu button opens on the site you are on.37 The menu and the Dock lead to each other and wear one head.39 The account lives in the menu's You tab, not in a dropdown.

Shipped in 4.200.0 · Every Shared release

Live web demo

One row of five places: Here (this site), Feed, Vibe with its Chat · Agents switch, Chat, and You with the red count of what is new. Vibe's + starts a chat and ↗ opens it in OpenVibe.Chat; the icons sit in the search pill beside the close button, so they cost no row. On a phone the menu is one sheet and Chat and Vibe open inside it; on a computer they open the Dock.

Web source: openvibe-shared/navbar · OpenVibeNavbar menu and You home

Anatomy

  • triggerthe pressed button, which becomes its tab
  • placesHere, Feed, Vibe, Chat, You
  • searchthe field and the place’s actions
  • contentthe chosen place

Props

open
boolean
person
person?
places
link[]

Behavior and accessibility

States
closed · opening · open · signed-out
Tokens
color.bg.raised · color.line.strong · size.tap
Keyboard
Keeps the focused control in view
Outside tap
Closes the surface
Scroll lock
Locks the page while open
Reduced motion
Remove movement; keep the state change.
Accessibility
Menu. Move focus into the menu; Escape returns it to the trigger. At least 44 × 44 dp or pt for every touch action.

Android · Jetpack Compose

Use ModalNavigationDrawer with a You header and app rows.

Material 3 container: SurfaceContainerHigh

iOS · SwiftUI

Use a sheet with a NavigationStack and You header.

Example definition

{
  "schema": "design.component@1",
  "name": "menu",
  "props": {
    "open": true
  }
}

Other components