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)
- 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
LayoutForm
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.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
logo | { src, alt, width?, height? } | Centercode logo | Custom logo configuration (src, alt, dimensions) |
title | { text, href? } | - | Title text with optional href for navigation |
desktopNavItems | ReactNode | - | Navigation items shown on desktop (hidden on mobile) |
center | ReactNode | - | Center slot, typically for ChatBar component |
actions | ReactNode | - | Right-side action buttons (user menu, settings, etc.) |
Usage
import { TopBar } from '@/ui/components';
import { Button } from '@/ui/primitives';
import { Icon } from '@/ui/icons';
import { faHome, faUser, faBell } from '@fortawesome/sharp-duotone-light-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={<>...</>}
/>