build69
Sign inGet API key
build69  /  Components  /  Navigation  /  AppBar

AppBar

v1.0.9Updated 27 Aug 2026

Odoo/Xero-style module-menu top bar — app launcher, brand, a current-module pill with switcher, a Radix Menubar section-dropdown bar, and a right cluster (+New, ⌘K search, notifications, company switcher, avatar). Dark surface.

View source← Back to catalog

Preview

Live · 5 stories
Module menuOpen ↗
▸Why this is recommendedheaderappbartopbarmenubar+6

AppBar — module menu.

Recommended for+14
  • ✓Top of a module-based ERP/accounting workspace
  • ✓Odoo/Xero-style products with section menus
  • ✓Apps needing a module switcher + dropdown menu bar
Tags+6
headerappbartopbarmenubarshellnavigationodooxeromodulemenu
Features+4
  • App launcher + brand + current-module pill with switcher
  • Horizontal section dropdown bar on Radix Menubar (arrow-key nav) with active underline
  • Right cluster: +New (split), ⌘K search, TH/EN toggle, notifications, company switcher, avatar menu
  • Dark bg-sidebar surface, both themes; responsive collapse with hidden-scrollbar overflow
  • Data-driven, SSR-safe, keyboard-accessible, className + data-slot passthrough
  • i18n: labels prop overrides every built-in UI string (app-launcher aria, Switch module heading, language-group aria, account-menu aria, search text); merged over DEFAULT_APP_BAR_LABELS
Not recommended for−2
  • ✕Primary vertical navigation (use Sidebar)
  • ✕In-page section headers (use PageHead)
  • ✕Minimal marketing headers (use AppBarCommand)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "AppBar" })

Usage

import { AppBar } from '@build69/ui';

<AppBar brand={brand} module={module} modules={modules} menus={menus} user={user} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
brand

Logo chip + wordmark

AppBarBrand—
module

Current-module pill (+ modules switcher)

AppBarModule—
modules

Flat module-switcher list shown in the pill dropdown

AppBarModule[]—
moduleGroups

Grouped module switcher — bands of modules under labelled headings, for when a flat `modules` list has grown past readable. AppBarModuleGroup = { id, label: ReactNode, modules: AppBarModule[] }. Takes precedence over `modules`; rows keep their icon, truncation, aria-current and active check, and the generic "Switch module" caption drops away since each band names itself. MCP feedback fb_f295b2f1.

AppBarModuleGroup[]—
menus

Horizontal section dropdown bar

AppBarMenu[]—
newAction

+New button (plain or split menu)

AppBarNewAction—
company

Current company (+ companies switcher)

AppBarCompany—
user

Avatar dropdown menu

AppBarUser—
sticky

Position sticky top-0 z-40 (default true)

boolean—
labels

Override any built-in UI string (i18n). Merged over DEFAULT_APP_BAR_LABELS; the searchPlaceholder prop wins over labels.searchPlaceholder

Partial<AppBarLabels>—

Related

Platform docsAll componentsSource files