Header
Figma Component: 11037-18245
Last modified with commit 0a12b72 on
by Sara Deric.
The Header component provides site navigation and branding. Shows logo, main menu with dropdown navigation, language selector, and mobile hamburger menu.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display header content | Shows site logo, horizontal navigation menu, language selector, and optional CTA button on desktop. Switches to mobile hamburger menu on smaller viewports. |
| system | Display mobile menu | On mobile, shows logo and hamburger icon. Clicking hamburger opens slide-out menu with navigation items. |
| system | Sticky header behavior | Header remains fixed to top of viewport while scrolling. |
| editor | Configure navigation items | Each menu item requires label and URL. Supports nested submenu items. Menu items can be reordered. |
| editor | Configure language selector | Language options are configured based on available site languages. |
| user | Navigate menu | Click menu item to navigate. Hover shows dropdown submenu when present. On mobile, click hamburger to open/close menu. |
| user | Switch language | Click language selector to view available languages. Select language to switch site language. |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |
Segment (Variant)
| Value | Example |
|---|---|
| Collegium |  |
| Mondial |  |
| Cooltura |  |
| BW |  |