Skip to content
Mistral Studio

Navigation and menus

Set up the global header and footer: menu sources, mega-menu panels, search, top bar, footer columns and the landing page header and footer.

Updated August 23, 2026 · 5 min read · Applies from version 1.0.0

The header and the footer are global content: edit them from any page editor (HubSpot warns you that the change applies to every page) or from Design Tools → Mistral Pro → templates → partials. Build your menus first in Settings → Content → Navigation (HubSpot's menu editor), then point the theme at them.

The logo inherits your brand kit; an optional logo on dark backgrounds is used while the header is transparent over a dark hero. When no logo is set, the wordmark text is shown, with an optional brand mark.

In the Navigation group, Menu source offers three options:

OptionWhen to use it
HubSpot navigation menuA menu built in Settings → Content → Navigation. Recommended for a real site: one place to maintain, and HubSpot handles the active state. Pick the menu in HubSpot menu (the default "Select a menu" means the account's default menu).
Simple menu edited hereThe default: a small menu stored with the header, edited inline. Useful for a quick start.
Menu items with icons and descriptionsMenu items entered in the module, each sub-item with a label, a link, a short description and an icon — for the richer mega-menu tiles.

Two navigation levels are rendered — top-level entries and their direct children; a third level is ignored.

Default sub-menu style applies to every item with children: dropdown list or mega menu with icon tiles. To give one item a richer panel, add an entry in Mega-menu panels and type the menu item's label in Applies to the menu item labeled: the panel is matched by label. Four panel styles:

  • Dropdown list
  • Icon tiles — each sub-item as a tile with an icon and a description. With a HubSpot or simple menu, the icons and descriptions come from the panel's Tile details, matched by sub-item label.
  • Icon tiles and a featured card — tiles plus a card with an image, badge, caption, title and button.
  • Icon tiles and the latest articles — tiles plus the latest posts of a blog (pick the blog and the number of articles).

Each panel can have a footer row with a text and two buttons. Icons and descriptions show in the desktop mega-menu only; on phones the menu becomes a full-screen overlay with drill-down into sub-menus.

Call to action, search, language switcher

  • Call to action — one button (label, link, optional arrow), following the theme's primary button style.
  • Site search — a search dialog with a placeholder, quick links, a hint and a close shortcut label. It submits to /hs-search-results; change Search results page path if your search results page lives elsewhere (and do the same in the Search results page's own module).
  • Language switcher — shown in the top bar and in the mobile menu when the page has translations. See Multiple languages.

Top bar

Switched on in the theme settings (Header → Top bar) and filled here: contact details (icon, text, optional link, shown in the mobile menu or not) and secondary links (label, link, accent colour, icon). The top bar stays in flow and scrolls away; the header bar itself is fixed and stays visible (Sticky header in the theme settings).

Accessibility labels

Skip link, logo link, main navigation, sub-menu toggle, search and menu buttons, mobile dialog, back label… all editable, so they can be translated.

  • Brand column — logo (inherits the brand kit) or wordmark, description, contact details (icon, text, link), social links (YouTube, Instagram, Facebook, LinkedIn, X, Behance, email).
  • Menu columns — up to four, each with a heading (h2, h3 or paragraph) and a Links source: HubSpot navigation menu or simple menu edited here. Columns collapse into accordions on phones.
  • Legal row — copyright text, the current year appended automatically (updated in the browser), a suffix, legal links (HubSpot menu or simple menu), a cookie settings button that reopens HubSpot's cookie banner, and an optional language switcher.
  • Style — text, heading, link hover, background and divider colours inherit the Footer theme settings. The oversized wordmark is a theme setting (Footer → Oversized wordmark).

The Landing page full width template replaces the global header and footer with two modules that carry no navigation menu on purpose, so nothing pulls the visitor away from the offer:

  • Landing page header with logo and call to action — logo (inherits the brand kit), an optional phone number and one call-to-action button. Background page, subtle or dark; compact or regular height; logo left and actions right, or centered.
  • Landing page footer with legal links — logo, a short row of legal links, the copyright line and optional social links.

They are edited on the landing page itself, not globally.

See also