ComponentsNavigation

Top bar

The sticky bar above the content: mobile menu button, a ⌘K search trigger, contextual actions, notifications and the user menu. Translucent on glass, a hairline on solid, the same in every app.

Radix Dropdown Menu (user menu) components/top-bar.tsx, styles/navigation.csstheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { TopBar, TopBarStart, TopBarMenuButton, TopBarSearch, TopBarSpacer, TopBarActions, UserMenu } from "@vamos-ui/react";

<TopBar>
  <TopBarStart><TopBarMenuButton /></TopBarStart>
  <TopBarSearch />
  <TopBarSpacer />
  <TopBarActions>
    <NotificationCenter adapter={inbox} />
    <UserMenu name="Ada Lovelace" email="ada@northwind.io" items={account} />
  </TopBarActions>
</TopBar>

Examples

Narrow bar

The search collapses to an icon below 560px of bar width (a container query, so it works in any layout). TopBarMenuButton shows below 768px and opens the App shell's nav sheet.

API

TopBar

Prop	Type	Default
`sticky` Sticks to the top of the scrolling area (z --z-sticky).	`boolean`	`true`
`variant` transparent blends into the page until it scrolls (data-scrolled).	`"bar" \| "transparent"`	`"bar"`
`scrollTarget` Scroll container for data-scrolled.	`RefObject<HTMLElement>`	`window`

TopBarSearch

Prop	Type	Default
`placeholder` From the dictionary (topBar.search).	`string`	`"Search or run a command…"`
`shortcut` Keycap hint; also aria-keyshortcuts.	`string \| false`	`"mod+k"`
`onOpen` What the button opens.	`() => void`	`useCommandPalette().open`

TopBarMenuButton

Prop	Type	Default
`onClick` Outside App shell; inside it opens the mobile nav.	`MouseEventHandler`	`—`
`labels` Accessible name.	`Partial<TopBarLabels>`	`{ menu: "Open menu" }`

UserMenu

Prop	Type	Default
`name` Initials, avatar colour and the trigger's name (“Account menu for …”).	`string`	`—`
`email` Under the name in the menu header.	`string`	`—`
`avatar` Photo URL.	`string \| null`	`—`
`items` Account entries (shared Dropdown Menu model).	`MenuEntry[]`	`—`
`showName` Name + chevron next to the avatar.	`boolean`	`false`
`children` Extra content under the header.	`ReactNode`	`—`
`align` Menu alignment.	`"start" \| "center" \| "end"`	`"end"`

TopBarStart · TopBarSpacer · TopBarActions · TopBarSeparator

Prop	Type	Default
`className` Layout slots; TopBarSpacer pushes the rest to the end.	`string`	`—`

Tooltip

Tour