Eyebrow Navigation
A simple navigation primarily meant to be placed above the header
Note: The section this module is added to should have it’s Content Alignment set to Full width.
View a live demo of this module.
Content
- Add menu items (link, language switch, search)
- Add additional filter arguments to search
- Edit strings used in the search (open search, search label, search submit, close search, search placeholder)
- Change alignment of menu (left, center, right)
Styles
- Set Dark Mode
- Change font size and weight
- Change text color
- Change link hover color
Usage Guide
The Eyebrow Navigation module is designed to complement your main site navigation by providing quick access to utility links and functions that visitors expect to find prominently displayed. This module works best when positioned above your primary header navigation, creating a layered navigation hierarchy that improves user experience without cluttering your main menu.
You’ll find this module particularly useful for corporate websites and business service sites where visitors need quick access to support resources, language options, or account portals. The built-in search functionality makes it an excellent choice for content-heavy sites where users frequently search for specific information.
When adding menu items through the HubSpot page editor, consider including links like “Support,” “Contact,” “Login,” or “Careers” – items that are important but don’t belong in your primary navigation flow. The language switch option is especially valuable for multi-regional websites, allowing you to provide seamless language switching without dedicating space in your main header.
The Full width content alignment requirement ensures the eyebrow navigation spans the entire width of your page, creating a professional appearance that distinguishes it from your main navigation below. This also prevents awkward spacing issues that can occur with other alignment settings.
For optimal visual hierarchy, use the Dark Mode toggle when your main header uses a light background – this creates clear contrast between the two navigation levels. The customizable hover colors help maintain brand consistency while ensuring interactive elements remain obvious to users.
This module integrates seamlessly with HubSpot’s global content settings, so any menu changes you make will automatically appear across all pages where you’ve added the module.