Skip to content

Simple Navigation

Renders the site's primary navigation menu inside the header, driven by a HubSpot advanced menu. Best for: the main header menu of the theme - outputs the chosen menu with support for a three-level dropdown.

📷 Hero image

Target file: assets/img/simple-navigation/hero.webp

A site header at desktop width with a single HubSpot menu rendered as a horizontal bar of top-level links, one top-level item opened into a clean dropdown of second-level links. Dark link text on a Light header background, with the hovered link in the Primary color. Captured at desktop width.

At a glance

Header Navigation Menu

  • What it does: outputs a single HubSpot menu into the header markup, wraps it with a sidebar close button for the mobile/off-canvas state, and applies a view-type class from the theme header settings so the menu adapts to the active header layout.
  • Best used for: a straightforward header menu where the look is controlled by the theme and you just need to pick which menu renders.
  • Not the right fit if: you want hand-built mega panels with featured promos and badges (use Navigation in Mega mode or Megamenu).
  • 🔗 Live demo: (add demo link)

Add it to your page

  1. Open your global Header (or the header partial) in the HubSpot editor.
  2. Add or select the Simple Navigation module.
  3. Pick your menu in the Simple menu field.
  4. Use a three-level menu structure to keep dropdowns clean.
  5. Preview across desktop and mobile to confirm the off-canvas menu and close button behave.

Design recipes

Each recipe is a look plus the exact fields to reproduce it.

Top-level links laid out in the header bar.

📷 Result

Target file: recipe-inline-horizontal-menu.webp

The header showing a single row of top-level links with no dropdowns, Dark text on a Light header background.

Field Set to
Simple menu a single-level HubSpot menu

Top-level items that open second and third level dropdowns.

📷 Result

Target file: recipe-dropdown-menu.webp

The header with one top-level item open, showing a second-level dropdown and a nested third-level flyout. Dark links on a Light panel, hovered item in the Primary color.

Field Set to
Simple menu a three-level HubSpot menu

A slide-in panel with the built-in close control on smaller screens.

📷 Result

Target file: recipe-off-canvas-mobile.webp

A mobile-width capture with the off-canvas menu slid in, showing the stacked links and the built-in close (X) control at the top. Captured at mobile width.

Field Set to
Simple menu any menu (mobile behavior is automatic)

"I want to..." quick reference

Goal Setting
Set the header menu Pick a menu in Simple menu
Keep dropdowns clean Use a three-level menu structure
Change the menu look Handled by theme header settings / _simple_navigation.css, not this module

Field reference

The editor exposes a single content field; all styling lives in the theme. (1 field total.)

Content tab

Simple menu
Field Type Default
Simple menu menu -

Be sure to use a three-level dropdown menu to maintain a clean UI.

Style tab

Styling

No style-tab fields. The look is controlled by the theme header settings and the _simple_navigation.css stylesheet.

Tips & gotchas

One field, whole menu

This module is intentionally minimal - it only picks the menu. Build and reorder the actual links in HubSpot's Menus area, and they update everywhere the menu is used.

Styling lives in the theme

Colors, spacing, and the view-type layout come from the theme header settings and _simple_navigation.css. There are no visual fields to set here.

Mobile close button

The off-canvas close (X) control is built in for the mobile state. Test the slide-in panel on a phone width so you know it opens and closes as expected.