Navigation Header
The Navigation Header is a composite application bar designed for dashboard-style layouts. It integrates breadcrumb navigation, forward/back arrows, an action button with dropdown options, a notification bell with a badge counter, and a user profile with account switching — all within a responsive layout that adapts between desktop and mobile.
In React, the NavigationHeader lives under templates/ApplicationNavigation and uses individual callback props (onPreviousClick, onForwardClick, onMenuClick, onActionButtonClick, onNotificationClick, onAccountSwitch) for all interactions. The action button is always wrapped in the internal DropdownMenu component — onActionButtonClick only fires when an option from actionButtonOptions is selected.
In Vue, the NavigationHeader uses emitted events (click:previous, click:forward, click:hamburger, click:notification, click:create, click:action, select:account) for all interactions. The component exposes a flat prop API (accounts, showActionButton, actionButtonOptions, customMenuItems, etc.) that mirrors the React component. When actionButtonOptions is empty/omitted, the trigger is a plain <Button> that emits click:create; when populated, it opens a DropdownMenu that emits click:action(value).
Loading Code Block...Full example
Section titled “Full example”A fully configured header with breadcrumbs, navigation arrows, action button, notifications, and account switching.
Loading Code Block...Custom menu only
Section titled “Custom menu only”A minimal header with just a title, hamburger menu, notification bell, and user profile.
Loading Code Block...Vue events
Section titled “Vue events”| Props | Default | Type | Description |
|---|---|---|---|
| click:previous | - | () => void | Emitted when the back arrow is clicked. |
| click:forward | - | () => void | Emitted when the forward arrow is clicked. |
| click:hamburger | - | () => void | Emitted when the mobile hamburger menu is clicked. |
| click:notification | - | () => void | Emitted when the notification bell is clicked. |
| click:create | - | () => void | Emitted when the action button is clicked and no actionButtonOptions are provided (i.e. it behaves as a single button). |
| click:action | - | (value: string) => void | Emitted when an option from the action button's dropdown menu is selected. Receives the option's value. |
| select:account | - | (account: AccountData) => void | Emitted when a different account is selected from the profile dropdown. |
The Vue NavigationHeader exposes these public types (re-exported from AccountMenu.vue and consumed transparently by NavigationHeader.vue):
type AccountData = { id: string; name: string; email?: string; avatarImage?: string; isActive?: boolean;};
type AccountMenuItem = { id: string; label: string; leadingIcon?: Component; trailingIcon?: Component; onItemClick: () => void; className?: string; disabled?: boolean; textColor?: string;};The internal AccountMenu rendered inside the profile dropdown is 320px wide and intentionally ships with no hardcoded “Sign out” entry — wire any sign-out action through customMenuItems. AccountMenu is not exported from the ./navigation-header subpath; consume the dropdown through NavigationHeader.
Accessibility
Section titled “Accessibility”- The hamburger menu button includes
aria-label="Open menu"for screen readers - Navigation arrows include
aria-label="Previous page"andaria-label="Next page" - The notification bell includes
aria-label="Notifications"and the badge count is announced - Breadcrumbs provide clear wayfinding for keyboard and screen reader users
- Account dropdown is keyboard-navigable with Enter/Space to open and Escape to close