Header Navigation
Header Navigation
Effective Date: February 1, 2026
Last Updated: February 1, 2026
Definition
The Header Navigation is the main menu bar displayed above the hero section on desktop. It provides access to the site’s primary pages and is built using the Navigation Links widget, which is automatically added to the site header when a new site is created.
By default, it displays all pages marked
“Show in Navigation” in the Pages panel.
Design, structure, and accessibility are governed by
Hibu global standards to ensure clarity, consistency, and a cohesive user experience across all Hibu One Smart Sites.
Design & Accessibility
The Header Navigation consists of:
- Global Navigation (Tier 1)
- Sub-Navigation (Tier 2)
- See
Site Architecture for additional about page structure / IA
All design and accessibility standards apply equally to both tiers unless noted.
- Font type, size, color, and contrast must meet AA-level readability standards.
- The Contrast Checker in the editor must be used to verify legibility in all states.
- Navigation styles (on/off/hover) and behaviors are standardized at the template level and must not be modified unless explicitly approved after the first proof.
Typography & Legibility (Global Rules)
Font Type
- Designers may select a font that enhances legibility or aligns with brand style. Use clean, professional, web-safe typefaces that complement the site design.
Font Weight
- Bolding may be used to improve readability or hierarchy but must be applied consistently across all states (On, Off, Hover) and navigation levels.
- Mixing bold and non-bold states creates visual instability and is not permitted.
Font Color
- Default text color: white (#FFFFFF)
- If contrast is insufficient against Theme Color 10 – Navigation BG, use black (#000000) or another dark tone for visibility.
- Adjustments must be made at the theme level to ensure global consistency.
Text Transform
- Text case (Title Case or Uppercase) may be adjusted to match the brand style or enhance legibility.
- Uppercase may be used for clean, modern aesthetics but must remain consistent across all navigation levels.
- Mixing Title Case and Uppercase within the same site is not permitted.
Legibility Priority
- Accessibility and legibility always take precedence over style. All navigation text must pass
AA-level contrast compliance and remain readable across devices and backgrounds.
Navigation States
Off-State (Default / Idle)
- Text color: Theme Color 11 – Navigation Text
- Background: Theme Color 10 – Navigation BG
- No color transitions or animations
- Underline appears only beneath the active link
- Provides a clean, stable appearance
Legibility Exception:
- Designers may adjust font color or weight if background contrast reduces readability.
On-State (Active / Current Page)
- Persistent white underline indicates the current page
- Text color remains consistent with Off-State
- Underline thickness and offset are defined at the template level and must not be modified
Hover-State (Rollover)
- Text color remains white
- Underline appears or brightens smoothly (no shift or animation)
- No background color change
- Sub-navigation only: Inverts colors for hover — background becomes white (#FFFFFF), and text adopts
Theme Color 10
Sub-Navigation (Dropdown Behavior)
- Background matches Theme Color 10 – Navigation BG
- Hover and active states follow the inverse color rule for clear visual feedback
- Sub-navigation text should be slightly smaller (1–2 points) than global navigation text
- Maintain consistent spacing and legibility at smaller sizes
General Behavior Rules
- Dropdown width, spacing, and padding are standardized at the template level and should not be altered.
- The dropdown position aligns directly below its parent global link, maintaining even spacing across all sub-menus.
- Sub-navigation should open cleanly and close automatically when focus shifts elsewhere, ensuring a seamless user experience.