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