Header
Figma Component: 11037-18245
GitHub Issue: #12
Last modified with commit 449aa34 on
by Sara Deric.
The Header component provides site navigation and branding. Shows brand logo, website switcher dropdown, main navigation menu with dropdown submenus, optional CTA button, and responsive mobile hamburger menu. Main navigation supports up to 2 levels of navigation (main items + one level of submenus/dropdowns).
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |
Components
| Name | Description |
|---|---|
| Navi Announcement Strip | A site-wide horizontal banner displayed above the main navigation for announcements or promotional messages. Features scrolling text on mobile and optional CTA button. Text has a 100 character limit to remain on a single line within the desktop container. Same banner appears across all pages. |
| Navi Section | Main navigation bar container for site header. Contains brand logo, website switcher dropdown (optional), horizontal navigation menu (optional), and CTA buttons (optional). Features responsive design with hamburger menu on mobile. |
| Navigation Link Group | The Navigation Link Group component displays a grouped set of related navigation links. Used as part of the header navigation to organize links by category or topic. |
| Language Selector | A dropdown popover component that allows users to select their preferred language for viewing the website. Displays available language options with flag icons and language names. Appears in the header as a button showing current language and a globe icon. |