App Header
Navigation
Layout
Application header with page title, search, notifications, and user profile dropdown.
Preview
A complete header component with common application features
Dashboard
Welcome back, Jens
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Page title text |
subtitle | string | — | Secondary text below title |
showSearch | boolean | true | Show search button |
showNotifications | boolean | true | Show notification bell |
notificationCount | number | — | Badge count for notifications |
user | UserProfile | — | User profile data |
onSearch | (query: string) => void | — | Search callback |
onMenuClick | () => void | — | Mobile menu toggle callback |
Usage
Import and implementation examples
import { AppHeader } from '@/components/ui/app-header'
// Basic usage
<AppHeader
title="Dashboard"
subtitle="Welcome back, Jens"
user={{
name: 'Jens van der Berg',
email: 'jens@eidetic.io',
avatar: 'J'
}}
/>
// With search callback
<AppHeader
title="Projects"
onSearch={(query) => console.log('Search:', query)}
showNotifications
notificationCount={3}
/>
// With custom menu items
<AppHeader
title="Settings"
menuItems={[
{ label: 'Profile', icon: User, href: '/profile' },
{ label: 'Settings', icon: Settings, href: '/settings' },
{ type: 'separator' },
{ label: 'Sign out', icon: LogOut, onClick: handleSignOut, destructive: true },
]}
/>Features
Built-in functionality
- Expandable search: Compact button expands to input
- Profile dropdown: Account menu with settings
- Mobile menu: Hamburger for mobile navigation
- Notification badge: Visual indicator for alerts
- Keyboard shortcut: Cmd+K opens search
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses header element for semantic structureSearch input has aria-labelNotification button has aria-label with countDropdown uses aria-expandedKeyboard Navigation
| Key | Action |
|---|---|
| Cmd+K | Open search |
| Tab | Navigate between elements |
| Enter | Activate button/link |
| Escape | Close dropdown |
Notes
- Focus is managed when search opens
- Dropdown closes on Escape
- Mobile menu button visible on small screens