Navigation¶
The site header navigation menu: top-level links with optional dropdowns and full mega menus (link columns, featured panel, footer bar). Best for: primary website navigation in the global header - simple menu bars, multi-level dropdowns, and rich mega menus.
📷 Hero image
Target file: assets/img/navigation/hero.webp
The full site header at desktop width, showing the logo on the left and a centered row of top-level nav links. One item is opened into a multi-column mega panel below the bar: titled link columns with small leading icons, short descriptions, and a New badge on one link, plus a featured promo block on the right. Use a Light header background with Dark link text and the Primary color on the active/hovered link. Captured at desktop width.
At a glance¶
Header Navigation Megamenu
- What it does: renders the primary nav inside the header in one of two modes - Simple (pulls a HubSpot menu you select and renders it as a standard bar with dropdowns) or Mega (you hand-build every top-level item, each a plain link, a single-column dropdown, or a multi-column mega panel).
- Best used for: the global header menu on any page, from a plain link bar up to a product/solutions mega menu with grouped links, icons, badges, and a promo area.
- Not the right fit if: you just want to output a plain HubSpot menu with no hand-built panels (use Simple Navigation), or you only need the standalone mega panel builder (use Megamenu).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- Open your global Header (or the header partial) in the HubSpot editor.
- Add or select the Navigation module.
- Set Nav style to Simple (to render a HubSpot menu) or Mega (to build items by hand).
- Choose a Layout style: centered, inline with the logo, or right aligned.
- For Simple mode, pick your Simple menu (a three-level menu is recommended).
- For Mega mode, add Menu link items and set each item's Submenu layout.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
A clean menu bar driven by a HubSpot menu.
📷 Result
Target file: recipe-simple-menu-bar-default.webp
The header with a centered row of top-level links between the logo and the header actions, no panels open. Dark link text on a Light header background, with the active link in the Primary color.
| Field | Set to |
|---|---|
| Nav style | simple |
| Simple menu | your HubSpot menu (up to 3 levels) |
| Layout style | centered |
Links sit beside the logo instead of centered.
📷 Result
Target file: recipe-inline-with-logo.webp
The header with the nav links grouped immediately to the right of the logo rather than centered in the bar. Dark links on a Light header background.
| Field | Set to |
|---|---|
| Nav style | mega |
| Layout style | inline_with_logo |
| Menu link › Submenu layout | none or single |
A multi-column grid of icon links with descriptions and badges.
📷 Result
Target file: recipe-links-only-mega-panel.webp
An open mega panel below the bar filled with four columns of links, each link showing a small leading icon, a title, and a short description, with a New badge on one entry. No featured block. Light panel background with Dark text and Primary-colored icons.
| Field | Set to |
|---|---|
| Menu link › Submenu layout | multi |
| Multi column › Megamenu layout | links_only |
| Column links › Icon choose from | hubspot_library |
| Column links › Show badge | on |
Link columns plus a featured image, heading, and CTA block.
📷 Result
Target file: recipe-links-with-featured-panel.webp
An open mega panel with link columns on the left and a featured promo block on the right: an image, a heading, a short line of copy, and a Primary CTA button. An optional footer bar with a CTA strip runs along the bottom of the panel.
| Field | Set to |
|---|---|
| Menu link › Submenu layout | multi |
| Multi column › Megamenu layout | links_with_featured |
| Multi column › Featured image / heading / CTA | your promo content |
| Multi column › Show footer bar | on (optional bottom CTA strip) |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Use a normal HubSpot menu | Nav style = simple + pick Simple menu |
| Build the menu by hand | Nav style = mega, add Menu link items |
| Center the links | Layout style = centered |
| Put links next to the logo | Layout style = inline_with_logo |
| Push links to the right | Layout style = right_aligned |
| Add a plain dropdown to an item | Menu link › Submenu layout = single |
| Add a rich mega panel | Menu link › Submenu layout = multi |
| Show a featured promo block | Multi column › Megamenu layout = links_with_featured |
| Add an icon to a mega link | Column links › Icon choose from = hubspot_library or upload_image |
| Tag a link as New / Hot | Column links › Show badge + Badge text |
| Add a bottom CTA strip | Multi column › Show footer bar + text/CTA |
| Control mega columns per device | Style › No of columns › Desktop / Tablet |
| Tune gaps between columns/links | Style › Gap between columns / Gap between links in column |
Field reference¶
The editor is organized into a Content tab and a Style tab, grouped exactly as they appear in HubSpot. (43 fields total - expand each group as needed.)
Content tab¶
Top-level settings
| Field | Type | Options | Default |
|---|---|---|---|
| Layout style | choice | centered / inline_with_logo / right_aligned | centered |
| Nav style | choice | simple / mega | simple |
| Simple menu | menu | - | - |
Use a three-level menu in Simple mode to keep dropdowns clean.
Menu link (Mega mode)
Each hand-built item has a Title, an optional Has link + Link, and a Submenu layout (none / single / multi) that unlocks the matching panel.
- Single column: stacked list of sublinks, each with title + optional link.
- Multi column: a mega panel with a Megamenu layout of
links_onlyorlinks_with_featured.
Multi column - Columns
Each column has a Column title and a repeater of Column links:
| Field | Type | Default |
|---|---|---|
| Title / Description | text / richtext | - |
| Has link / Link | boolean / link | off |
| Icon choose from | choice (no_icon / hubspot_library / upload_image) | hubspot_library |
| Icon / Icon image | icon / image | Circle |
| Show badge / Badge text | boolean / text | off |
Multi column - Featured + footer bar
- Featured: image, heading, description, CTA text, CTA link (shown in the
links_with_featuredlayout). - Footer bar: optional bottom strip with Show footer bar, text, and a CTA button + link.
Style tab¶
Style 1 - Links only / Links with featured
| Field | Type | Default |
|---|---|---|
| Links only › No of columns [desktop / tablet] | number | 4 / 4 |
| Links only › Gap between columns [d/t/m] | number | 18 |
| Links with featured › No of link columns [d/t] | number | 4 / 4 |
| Links with featured › Gap between columns [d/t/m] | number | 24 |
Style 1 - Spacing
| Field | Type | Default |
|---|---|---|
| Gap between links in column [desktop] | number | 18 |
| Gap between links in column [tablet] | number | 20 |
| Gap between links in column [mobile] | number | 16 |
Tips & gotchas¶
Simple vs Mega
Reach for Simple when a standard HubSpot menu covers your needs, and Mega when you want featured promos, icons, badges, or a footer CTA per panel.
Keep menus shallow
In Simple mode, use a three-level menu at most. Deeper structures make dropdowns hard to navigate and can break the clean UI.
Featured CTA styling
Button and icon styling for the featured CTA and footer bar comes from your theme header settings, not from this module's fields.
Related modules¶
- Simple Navigation: output a single HubSpot menu with no hand-built panels.
- Megamenu: the standalone mega panel builder.
- Header Logo: the logo that sits beside your nav.
- Language Switcher: a header locale picker.