Header
The Header component is the main navigation element for landing pages. It includes a logo, navigation menu items (links and dropdowns), language selector, and action buttons (Log In and Start For Free). The component supports various dropdown layouts including single column, two columns, scrollable, and with poster.
Desktop Header
Full desktop header with logo, navigation items, language selector, and action buttons.
.link
Header with Dropdown - With Poster
Dropdown menu with poster image on the left side.
.link
Header with Dropdown - Two Columns
Dropdown menu with two columns layout for better organization of options.
.link
Header with Dropdown - Scrollable
Dropdown menu with scrollable content. This example uses maxHeight prop on HeaderNavigation component.
.link
Header with Language Dropdown - Two Columns
Language selector dropdown with two columns layout.
.link
Tablet Header
Header layout for tablet devices with "Already have an account?" text.
.link
Mobile Header
Simplified header layout for mobile devices with logo and action buttons only.
.link
Usage Guidelines
Component Structure
A Header consists of the following elements:
- Logo: Brand logo or image
- Navigation Items: Links or dropdown menus
- Language Selector: Optional language selection button
- Action Buttons: Log In (tertiary) and Start For Free (primary)
Navigation Items
Navigation items can be:
- Link: Simple navigation link with optional selected state
- Dropdown: Dropdown menu with options, supports poster, two columns, and scrollable layouts
Dropdown Variants
- Default: Single column with menu items
- With Poster: Includes poster image/content on the left
- Two Columns: Options split into two columns
- Scrollable: Scrollable content area for long lists
Responsive Behavior
- Desktop: Full navigation with all items visible
- Tablet: Simplified navigation with account text
- Mobile: Logo and action buttons only