TopBar

Responsive navigation bar with mobile-to-desktop progressive disclosure

Overview

TopBar provides a responsive navigation bar with smart defaults, slot-based architecture, and mobile-to-desktop progressive disclosure. Features Centercode branding by default with full customization options.

Key Features

Zero-config default with Centercode branding
Slot-based architecture (logo, title, nav items, center, actions)
Progressive disclosure (mobile menu, desktop inline)
Scope picker for fast keyboard-driven navigation between programs and projects
ChatBar integration for feedback and agent interaction
Responsive design with mobile-first approach

Layout Availability

TopBar is the global navigation module that appears at the top of authenticated pages. It's built into LayoutShell, LayoutFocus, and LayoutWizard.

LayoutShell

Global navigation

LayoutFocus

Global navigation

LayoutWizard

Global navigation

LayoutCard

Not available in this layout

LayoutBlank

Not available in this layout

Examples

Default (Zero Config)

Without any props, TopBar displays Centercode branding with default styling.

Custom Title

Pass a title prop to display custom text next to the logo.

With Navigation

Add desktop navigation items and action buttons for a full navigation bar.

Full Configuration

Complete example with custom logo, title, navigation, and multiple action buttons.

Scope Picker

The scope picker replaces the standard logo/title with an interactive scope navigator. Users can quickly jump between Home, Programs, and Projects using a searchable dropdown or keyboard shortcut (⌘/ on Mac, Ctrl+/ on Windows).

How It Works

Logo links to the current scope home (program or project landing page)
Click the scope name to open a searchable dropdown with all accessible scopes
Type to filter, use arrow keys to navigate, Enter to select
Keyboard shortcut ⌘/ (Mac) or Ctrl+/ (Windows) opens picker from anywhere

Interactive Demo

Click the scope name to open the dropdown. Try the keyboard shortcut ⌘/ (Mac) or Ctrl+/ (Windows) to open from anywhere.

Current scope: Phoenix (project)

Scope State Variants

The scope picker displays contextual branding based on the current scope level.

Home Scope (Centercode branding)

Program Scope (Program branding if configured)

Project Scope (Inherits program branding)

Keyboard Navigation

Full keyboard support for efficient navigation.

Shortcut	Action
`⌘/` or `Ctrl+/`	Open scope picker from anywhere
`Type`	Filter programs and projects
`↑ ↓`	Navigate list
`Enter`	Select and navigate
`Escape`	Close picker

Scope Picker Usage

Code examples for implementing scope picker.

import { TopBar } from '@/ui/components';

// With ScopeProvider context (recommended)
// When wrapped in ScopeProvider, uses context automatically
<TopBar scopePicker={true} />

// With explicit props
<TopBar
  scopePicker={{
    currentScope: { type: 'project', id: 'proj-1', name: 'Phoenix' },
    programs: [...],
    onScopeChange: (scope) => console.log('Scope changed:', scope),
  }}
/>

// Keyboard shortcut: ⌘/ (Mac) or Ctrl+/ (Windows)
// Opens the scope picker dropdown from anywhere on the page

Props Reference

Prop	Type	Default	Description
`scopePicker`	`boolean \| HeaderScopePickerProps`	`-`	Enable scope navigation. Pass true to use ScopeProvider context, or explicit props for manual control. Replaces logo/title when enabled.
`logo`	`{ src, alt, width?, height? } \| false`	`Centercode logo`	Custom logo configuration. Ignored when scopePicker is enabled. Pass false to hide.
`title`	`{ text, href? } \| false`	`-`	Title text with optional href. Auto-derives from scope context in project scope. Ignored when scopePicker is enabled.
`chatBar`	`boolean \| ChatBarProps`	`-`	Enable ChatBar. Pass true to use ScopeProvider context, or explicit props for manual control.
`desktopNavItems`	`ReactNode`	`-`	Navigation items shown on desktop (hidden on mobile)
`actions`	`ReactNode`	`-`	Right-side action buttons (user menu, settings, etc.)
`userMenu`	`ReactNode`	`-`	Complete DropdownMenu component for user menu
`sticky`	`boolean`	`true`	Enable sticky positioning at top of viewport

HeaderScopePickerProps (for scopePicker prop)

Prop	Type	Default	Description
`currentScope`	`ScopeJumpCurrentScope`	`required`	Current active scope with type ("home" \| "program" \| "project"), id, name, and optional icon
`programs`	`ScopeJumpProgram[]`	`required`	Array of programs with nested projects for the dropdown
`homeHref`	`string`	`"/"`	URL for the Home navigation item
`onScopeChange`	`(scope) => void`	`-`	Callback when scope changes (for analytics, navigation, etc.)

Usage

import { TopBar } from '@/ui/components';
import { Button } from '@/ui/primitives';
import { Icon } from '@/ui/icons';
import { faHome, faUser, faBell } from '@fortawesome/duotone-regular-svg-icons';

// Zero config - Centercode branding
<TopBar />

// Custom title only
<TopBar title={{ text: 'My App' }} />

// With navigation items
<TopBar
  title={{ text: 'Dashboard' }}
  desktopNavItems={
    <>
      <Button variant="ghost" size="sm">
        <Icon icon={faHome} />
        Home
      </Button>
      <Button variant="ghost" size="sm">
        <Icon icon={faFolder} />
        Projects
      </Button>
    </>
  }
  actions={
    <Button variant="ghost" size="icon">
      <Icon icon={faUser} />
    </Button>
  }
/>

// Full configuration
<TopBar
  logo={{ src: '/logo.svg', alt: 'Logo', width: 40, height: 40 }}
  title={{ text: 'Dashboard', href: '/' }}
  desktopNavItems={<>...</>}
  center={<ChatBar role="participant" />}
  actions={<>...</>}
/>

Shortcut

Action

⌘/ or Ctrl+/

Open scope picker from anywhere

Type

Filter programs and projects

↑ ↓

Navigate list

Enter

Select and navigate

Escape

Close picker

import { TopBar } from '@/ui/components'; // With ScopeProvider context (recommended) // When wrapped in ScopeProvider, uses context automatically <TopBar scopePicker={true} /> // With explicit props <TopBar scopePicker={{ currentScope: { type: 'project', id: 'proj-1', name: 'Phoenix' }, programs: [...], onScopeChange: (scope) => console.log('Scope changed:', scope), }} /> // Keyboard shortcut: ⌘/ (Mac) or Ctrl+/ (Windows) // Opens the scope picker dropdown from anywhere on the page

Prop

Type

Default

Description

scopePicker

boolean | HeaderScopePickerProps

-

Enable scope navigation. Pass true to use ScopeProvider context, or explicit props for manual control. Replaces logo/title when enabled.

logo

{ src, alt, width?, height? } | false

Centercode logo

Custom logo configuration. Ignored when scopePicker is enabled. Pass false to hide.

title

{ text, href? } | false

-

Title text with optional href. Auto-derives from scope context in project scope. Ignored when scopePicker is enabled.

chatBar

boolean | ChatBarProps

-

Enable ChatBar. Pass true to use ScopeProvider context, or explicit props for manual control.

desktopNavItems

ReactNode

-

Navigation items shown on desktop (hidden on mobile)

actions

ReactNode

-

Right-side action buttons (user menu, settings, etc.)

userMenu

ReactNode

-

Complete DropdownMenu component for user menu

sticky

boolean

true

Enable sticky positioning at top of viewport

Prop

Type

Default

Description

currentScope

ScopeJumpCurrentScope

required

Current active scope with type ("home" | "program" | "project"), id, name, and optional icon

programs

ScopeJumpProgram[]

required

Array of programs with nested projects for the dropdown

homeHref

string

"/"

URL for the Home navigation item

onScopeChange

(scope) => void

-

Callback when scope changes (for analytics, navigation, etc.)

import { TopBar } from '@/ui/components'; import { Button } from '@/ui/primitives'; import { Icon } from '@/ui/icons'; import { faHome, faUser, faBell } from '@fortawesome/duotone-regular-svg-icons'; // Zero config - Centercode branding <TopBar /> // Custom title only <TopBar title={{ text: 'My App' }} /> // With navigation items <TopBar title={{ text: 'Dashboard' }} desktopNavItems={ <> <Button variant="ghost" size="sm"> <Icon icon={faHome} /> Home </Button> <Button variant="ghost" size="sm"> <Icon icon={faFolder} /> Projects </Button> </> } actions={ <Button variant="ghost" size="icon"> <Icon icon={faUser} /> </Button> } /> // Full configuration <TopBar logo={{ src: '/logo.svg', alt: 'Logo', width: 40, height: 40 }} title={{ text: 'Dashboard', href: '/' }} desktopNavItems={<>...</>} center={<ChatBar role="participant" />} actions={<>...</>} />