Nav Headers
Marketing navigation patterns with responsive drawers, centered link layouts, and a full-width flyout.
How To Use This Page
Nav Headers sits inside the Marketing part of the catalog and collects reusable examples that solve the same job in different ways.
This page currently groups 5 examples so you can compare structure, emphasis, and density before choosing an implementation direction.
How The Content Is Grouped
- The examples are grouped as a single Marketing reference page so you can compare variations without leaving the route.
- Use the jump links to move straight to the most relevant example once you know which structure, layout, or emphasis pattern you need.
Start With
Simple Links on Left
Classic left-aligned navigation with actions on the right.
Simple Links Centered
Logo left, centered links, and action buttons on the right.
Centered with Bottom Border
Two-row header with centered brand presence and a minimal link row.
Simple Branded Dark
Dark branded navbar with lime actions and a matching mobile drawer.
With Full-Width Flyout
Primary navigation with a click-triggered full-width solutions panel.
Simple Links on Left
Simple Links on Left
Classic left-aligned navigation with actions on the right.
A conventional marketing navbar with links anchored to the left and actions on the right.
Simple Links Centered
Simple Links Centered
Logo left, centered links, and action buttons on the right.
Centering the link group gives the logo more separation while keeping calls to action fixed on the right.
Centered with Bottom Border
Simple Branded Dark
Simple Branded Dark
Dark branded navbar with lime actions and a matching mobile drawer.
A branded dark header shifts the tone immediately while keeping the interaction model familiar.
With Full-Width Flyout
With Full-Width Flyout
Primary navigation with a click-triggered full-width solutions panel.
A full-width flyout turns the primary navigation into a richer discovery layer without changing the header footprint.