Page Header - Rebrand Example
This example demonstrates the vision-page-header component with a comprehensive set of features including navigation, search, branding, and user tools.
Component Overview
The vision-page-header is a complex header component that provides:
- Fixed header positioning with reading progress bar
- Primary and collapsed brand identification
- Navigation menu integration
- Search functionality
- User tools and controls
- Responsive design with mobile menu support
Header Configuration
The header is configured with the following key properties:
show-reading-progress-bar="true"- Displays a progress indicator as user scrollsis-fixed-header="true"- Makes the header stick to the top of the viewportnavigation-source- JSON string containing navigation menu datasearch-endpoint="/api/v1/autocomplete/search"- API endpoint for search autocompletesearch-label="Zoeken"- Accessibility label for search inputsearch-placeholder="Zoeken"- Placeholder text for search input
Brand Identity
Two brand slots provide responsive logo display:
identification-primary-expanded- Logo for desktop/expanded viewidentification-primary-collapsed- Logo for mobile/collapsed view
Interactive Elements
The header includes several types of interactive components:
Popover Button
Used for the stock ticker with expandable content on hover/click.
Dropdown Button
Alternative dropdown implementation with section-based content management.
Navigation Tools
Action buttons placed in the navtool-end slot for desktop and menu-end for mobile.
Search Triggers
Icon buttons that activate the search functionality:
navtool-search-button- Search icon for desktopmenu-search-button- Search icon for mobile menu
Available Slots
| Slot Name | Purpose | Example Usage |
|---|---|---|
identification-primary-expanded | Main logo (desktop) | Brand logo with link |
identification-primary-collapsed | Collapsed logo (mobile) | Simplified brand mark |
navtool-end | End of navigation and tools section | User account, settings |
menu-end | End of menu section (navtools) | User actions in mobile |
navtool-search-button | Search trigger (desktop) | Search icon button |
menu-search-button | Search trigger (mobile) | Search icon for mobile |
Theme Integration
This example uses the Teva theme.
Accessibility Features
- All interactive elements include proper ARIA labels
- Icons are marked with
aria-hidden="true"andfocusable="false" - Language options include
hreflangand descriptivearia-labelattributes - Semantic HTML structure for screen readers
Related Components
vision-ident- Brand identity componentvision-button- Standard button componentvision-trigger- Trigger/action buttonvision-popover-button&vision-popover-content- Popover functionalityvision-dropdown-button&vision-dropdown-content- Dropdown menus