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 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 Simple Navigation module.
- Pick your menu in the Simple menu field.
- Use a three-level menu structure to keep dropdowns clean.
- 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 is organized into a Content tab and a Style tab, grouped exactly as they appear in HubSpot. (151 fields total - expand each group as needed.)
This module absorbed the header logo, language switcher and search, so nearly everything about the header is set here rather than in theme settings. The three largest groups have their own sections on this page: Logo, Language switcher and Search.
Content tab¶
Click to update content
| Group | What it holds |
|---|---|
| Logo | default and dark logos, on-scroll logo, link override |
| Menu | the HubSpot menu to render |
| Language switcher | label style, globe icon, chevron |
| Buttons | up to two header buttons, each with style, icon and link |
| Search | results page and the search panel's wording |
Use a three-level dropdown menu at most, to keep the UI clean.
Style tab¶
Layout, header and mobile drawer
| Group | What it holds |
|---|---|
| Layout settings | container width, alignment, breakpoint |
| Header | background, border, padding, shadow on scroll |
| Slide out [mobile] | the mobile drawer: width, background, animation, close icon |
Menu and submenu
| Group | What it holds |
|---|---|
| Navigation menu [desktop] | typography, colours, spacing, hover and active states |
| Navigation menu [mobile] | the same, sized for the drawer |
| Submenu [desktop] | panel surface and item styling |
| Submenu [mobile] | indent, dividers, chevron behaviour |
Logo, language switcher, search and buttons
| Group | What it holds |
|---|---|
| Logo | height on desktop and mobile |
| Language switcher | trigger and dropdown styling |
| Search | trigger and panel styling |
| Buttons | size, gap, full width on mobile |
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 Menu 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.
Logo¶
The site logo shown in the header. You set the default logo, an optional light logo for dark heroes, the link it points to, and its accessible label. Best for: placing your brand mark in the header and linking it home.
📷 Hero image
Target file: assets/img/header-logo/hero.webp
A close crop of the left side of the site header showing the brand logo sized to sit comfortably against the header height, with the start of the nav links to its right. Use a transparent logo on a Light header background so the mark reads cleanly. Captured at desktop width.
At a glance¶
Header Branding Configuration
- What it does: shows your logo in the header, links it (usually to the homepage), and lets you supply a separate light logo for pages with a dark hero.
- Best used for: the brand mark at the top of every page, inside the site header.
- Not the right fit if: you want a logo wall or client grid (use Logo Grid or Logo Slider).
- 🔗 Live demo: (add demo link)
This is a configuration module
You set the logo images, link, and label here. Logo sizing and broader header styling (background, spacing, sticky behavior) come from Theme Settings header options, not from this module.
Where to find it¶
The logo is part of this module, not a separate one, so there is nothing to add.
- Open your header template or global header in the HubSpot editor.
- Select the Simple Navigation module.
- Under Default theme, upload your Logo (light scheme), or leave it empty to inherit your account Brand Kit logo.
- If any pages use a dark hero with the light header, upload a light-scheme logo under Logo (light scheme).
- Set the Logo link (usually your homepage) and, if needed, adjust the Screen reader search field aria-label.
- Save so the logo appears across the site.
Setting your Brand Kit logo¶
If you leave Logo (light scheme) empty, the module falls back to the logo set in your HubSpot account's Brand Kit. Here's how to upload or change that logo.
- In the HubSpot navigation, click the three dots at the end of the left sidebar.
- Click Marketing, scroll down a little, and click Brand.
- This opens the Brand Identity page. Scroll to the Logo section at the top.
- Click Add (or click your existing logo to replace it).
- Upload your logo file.
- Click Save.
Best logo file types
Use an SVG for a crisp logo at any size, or a PNG with a transparent background if you don't have one. Avoid JPG: it can't have a transparent background, so it shows a white box around the logo on colored headers.
One upload, every page
Once set here, this is the logo Simple Navigation falls back to on every page where Logo (light scheme) is left empty, so you only need to upload it once.
Common setups¶
| Goal | Setting |
|---|---|
| Use your Brand Kit logo | Leave Logo (light scheme) empty (it inherits from Brand Kit) |
| Override the Brand Kit logo | Upload an image into Logo (light scheme) |
| Light logo over dark heroes | Upload a light-scheme logo; it shows when Page Settings Style (light header) is on |
| Link the logo home | Set Logo link to / (the default) or your homepage |
| Resize the logo | Set it in Theme Settings header options |
Field reference¶
This is a configuration module, so its fields are focused on the logo itself.
Default theme
| Field | Type | What it does | Default |
|---|---|---|---|
| Default logo | logo | The logo for normal pages. Defaults to your account Brand Kit logo (Settings › Brand Kit); upload here to override it. | inherits Brand Kit |
Light theme
| Field | Type | What it does | Default |
|---|---|---|---|
| Light logo | image | Shown on pages where Page Settings › Make header lighter is on (a light logo over a dark hero). If left empty, the default logo is used. | empty (160 × 48) |
Logo link and label
| Field | Type | What it does | Default |
|---|---|---|---|
| Logo link | link | The URL the logo links to, typically the homepage. Supports page, external, file, email, and blog targets. | / |
| Logo aria-label | text | Accessible label for the logo link, read by screen readers. | Home |
Sizing and header style (from Theme Settings)
There is no size field in this module. Logo dimensions and the header bar around it (background, spacing, sticky behavior) are controlled globally in Theme Settings header options.
Tips & gotchas¶
Use a crisp, transparent logo
A transparent PNG or SVG keeps your logo sharp on any header background. Provide a light-scheme logo too so your mark stays visible on dark heroes.
Sizing lives in the theme
If you cannot find a width or height option here, check Theme Settings. This module only handles the logo images, link, and label.
Language switcher¶
The language selector in the header: a button showing the current language, and a panel listing every published translation of the page. Best for: letting visitors move between the language versions of your pages.
📷 Hero image
Target file: assets/img/language-switcher/hero.webp
A close crop of the right side of the site header with the switcher open. The button reads EN in uppercase with a chevron beside it, and a white rounded panel sits below listing English and Français. Dark text on a Light header background. Captured at desktop width.
At a glance¶
Header Multilingual Configuration
- What it does: shows the current language in the header and opens a list of the page's other published translations.
- Best used for: the header of a multi-language site built with HubSpot language variations.
- Not the right fit if: your site is single-language, or you want a navigation menu (use Navigation or Megamenu).
- 🔗 Live demo: (add demo link)
You do not add this module
It is mounted in the header for you and cannot be dropped onto a page. Turn it on with Language switcher in Theme Settings, under Website header. Everything else is set on the module itself.
Styling moved out of Theme Settings in August 2026
The trigger and the dropdown used to be styled from Theme Settings. Both are now settings on this module, under Style, and the old theme group has been removed. If you styled the switcher before that date, set it again here.
How to use it¶
- Set up your language variations in HubSpot so the page has more than one language version.
- In Theme Settings > Website header, turn on Language switcher.
- Open the header in the global content editor and select Simple Navigation.
- Pick How language names are shown, then turn the globe and the chevron on or off.
- Style the button under Style > Preset settings > Trigger, and the panel under Dropdown.
How language names are shown¶
The button and the panel can read differently, which is the point of this setting.
| Value | Button | Panel |
|---|---|---|
| Short form | EN | EN, FR, DE |
| Long form | English | English, French, German |
| Hybrid (default) | EN | English, French, German |
Hybrid is the default because it suits a tight header: the button stays narrow while the list stays readable. It is also the only mode rendered entirely on the server, so the labels never flicker on load. Short form and long form load a small script to relabel the list after HubSpot renders it.
Common setups¶
| Goal | Setting |
|---|---|
| Compact codes like EN and DE | How language names are shown = Short form |
| Full names everywhere | How language names are shown = Long form |
| Short button, readable list | How language names are shown = Hybrid |
| Show a globe before the code | Turn Add globe icon on |
| Drop the chevron | Turn Add chevron off |
| Button follows a dark header | Leave Trigger > Text color on Default (scheme) |
| Button in a fixed colour | Trigger > Text color = Custom color |
| Tighter panel | Lower Dropdown > Dropdown spacing and Gap between languages |
| Panel with no shadow | Dropdown > Shadow = None |
| Square panel | Dropdown > Round corner = 0 |
Field reference¶
33 fields: three on Content, and thirty under Style split between the button and the panel.
Content
| Field | Type | What it does | Default |
|---|---|---|---|
| How language names are shown | choice (radio) | Short form, Long form or Hybrid, as described above. | Hybrid |
| Add globe icon | boolean | Shows a globe before the language on the button. | off |
| Add chevron | boolean | Shows a downward chevron after the language on the button. | on |
Style > Preset settings > Trigger
The button in the header: globe, language code and chevron. All three take one colour, so they cannot drift apart.
| Field | Type | What it does | Default |
|---|---|---|---|
| Text color | choice | Default (scheme) follows the header, including a page's Header color scheme override. Custom color fixes it. | Default (scheme) |
| Custom text color | color | Used only when Text color is Custom color. | #FFFFFF |
| Text transform | choice | Casing of the code on the button. Does not touch the panel. | Uppercase |
| Make font bold | boolean | Bolds the code on the button. | off |
| Globe icon size [desktop] | number | Globe size, in px. | 20 |
| Globe icon size [mobile] | number | Globe size below 1024px. | 18 |
| Font size [desktop] | number | Size of the language code. | 16 |
| Font size [mobile] | number | Size of the code below 1024px. | 15 |
| Arrow icon size [desktop] | number | Chevron size. | 12 |
| Arrow icon size [mobile] | number | Chevron size below 1024px. | 11 |
| Globe icon stroke width | number | Line thickness of the globe. | 1.5 |
| Arrow icon stroke width | number | Line thickness of the chevron. | 1.5 |
| Gap between text and icons [desktop] | choice | Space between globe, code and chevron, from the theme gap scale. | M |
| Gap between text and icons [mobile] | choice | The same below 1024px. | XS |
Style > Preset settings > Dropdown
The panel that opens below the button, and the language names inside it.
| Field | Type | What it does | Default |
|---|---|---|---|
| Background color | color | Panel background. | #FFFFFF |
| Show border | boolean | Draws a border around the panel. | on |
| Border width | number | Border thickness, in px. Shown when Show border is on. | 1 |
| Border color | choice | Primary, Secondary, Tertiary, Light, Dark, Black, White, White transparent or Custom. Shown when Show border is on. | Light |
| Custom border color | color | Used only when Border color is Custom. Opens pre-filled from your theme Light colour, so it is a starting point to adjust rather than a blank white. | inherited |
| Shadow | choice | None, Light shadow, Regular shadow or Dark shadow. | Light shadow |
| Round corner | choice | From the theme roundness scale, or Custom. | M |
| Custom round corner | number | Used only when Round corner is Custom. | 8 |
| Dropdown spacing | spacing | Padding inside the panel, around the list. | 18px 24px |
| Text color | color | Language names in the list. Inherits your Body text colour. | inherited |
| Hover color | color | Language name under the pointer. Inherits your link hover colour. | inherited |
| Font size [desktop] | number | Size of the language names. | 16 |
| Font size [mobile] | number | Size of the names below 1024px. | 16 |
| Make font bold | boolean | Bolds the language names. | off |
| Text transform | choice | Casing of the names in the list. | Capitalize |
| Gap between languages | choice | Vertical space between one language and the next, from the theme gap scale. | XL (16px) |
Tips & gotchas¶
It appears only when there is somewhere to go
The switcher renders nothing unless the page has at least one published translation. A translation that exists but is unpublished is not counted, so the header stays clean on a single-language site.
Border color Light is almost invisible on a white panel
Light reads your theme's Light colour, which ships as a very pale grey and against the default white background is close to no border at all. Two ways to get a border you can see: switch Border color to Custom, which opens pre-filled with that same theme colour so you can darken it to around #E2E7EE, or change the Light colour in Theme Settings, which affects every element using it across the site.
The button follows the header, the panel does not
Leave Trigger > Text color on Default (scheme) and the button flips with the header on a page set to a dark scheme. The panel's own colours are fixed values, so set a background and text colour that read well against both if you use both header schemes.
Two casings, on purpose
The button and the panel have separate Text transform settings. The defaults pair an uppercase EN on the button with capitalised names in the list, which is the usual look.
Mobile sizes are separate
Globe, font and chevron sizes each have a mobile value that takes over below 1024px, so a switcher tuned for desktop does not crowd a narrow header.
Search¶
A header search trigger that opens a modal search field with live autosuggest, scoped to the content types you choose. Best for: site-wide search in the header - pairs with the search results page it sends visitors to.
📷 Hero image
Target file: assets/img/search-input/hero.webp
The open search modal dialog centered over a dimmed page, showing the search field with a magnifier icon and a placeholder, and a live autosuggest list of results below it as the visitor types. Light modal surface with Dark field text and a Primary-colored icon and active suggestion. Captured at desktop width.
At a glance¶
Header Search Modal
- What it does: renders a search icon that opens a modal dialog with a search form. As the visitor types, a live autosuggest list appears, and the form posts to the global search results page or a custom page you pick, scoped to the content types you enable.
- Best used for: a header search that lets visitors search across pages, blog posts, knowledge articles, and case studies from anywhere on the site.
- Not the right fit if: you need to render the results listing itself (use Search Results on the destination page).
- 🔗 Live demo: (add demo link)
Where to find it¶
Search is part of this module, not a separate one, so there is nothing to add.
- Select the Simple Navigation module in your header.
- Under Results, keep the default global results page or turn on Use custom search results page and pick your Search results page.
- In Search results include, enable the content types you want searched.
- Optionally turn on the Button with an icon and label (this shows only when the theme header search button is enabled).
- Edit the Default text strings (placeholder, autosuggest messages, screen-reader labels) to match your voice.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
A minimal magnifier that opens the modal.
📷 Result
Target file: recipe-icon-only-trigger-default.webp
A close crop of the header showing just the magnifier search icon among the header actions, no label. Dark icon on a Light header background.
| Field | Set to |
|---|---|
| Button › Add icon | off |
| Default text › Placeholder text | your prompt |
A labeled search button with an icon (theme header search button must be on).
📷 Result
Target file: recipe-button-with-icon.webp
A close crop of the header showing a labeled "Search" button with a magnifier icon on the left of the text, styled in the Primary color.
| Field | Set to |
|---|---|
| Button › Add icon | on |
| Button › Title | Search |
| Button › Icon size | left or right |
| Styles › Button › Spacing between icon and text | gap-m |
Restricts results to specific content types.
📷 Result
Target file: recipe-scoped-search.webp
The open search modal with an autosuggest list showing only blog-post results for the typed query, demonstrating the narrowed content scope.
| Field | Set to |
|---|---|
| Search results include › Website pages | off |
| Search results include › Blog posts | on |
| Results › Group ID | one content group (optional) |
Routes searches to a chosen page instead of the global one.
📷 Result
Target file: recipe-custom-results-page.webp
The open search modal at the moment of submit, with the custom results page URL visible in the browser address bar to show searches routing to a chosen destination.
| Field | Set to |
|---|---|
| Results › Use custom search results page | on |
| Results › Search results page | the page that renders the search results |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Show a labeled search button | Button › Add icon + set Title (also requires the theme header search button on) |
| Put the icon after the label | Button › Icon size = right |
| Send searches to a specific page | Results › Use custom search results page + Search results page |
| Search only blog posts | Search results include › turn off others, keep Blog posts |
| Include knowledge base / case studies | Search results include › Knowledge articles / Case studies |
| Limit to one content group | Results › Group ID |
| Change the input placeholder | Default text › Placeholder text |
| Reword the live suggestions header | Default text › Autosuggest results message ([[search_term]] token) |
| Adjust the button icon-label gap | Styles › Button › Spacing between icon and text |
Field reference¶
The editor is organized into a Content tab and a Style tab, grouped exactly as they appear in HubSpot. (24 fields total - expand each group as needed.)
Content tab¶
Button
| Field | Type | Options | Default |
|---|---|---|---|
| Add icon | boolean | - | off |
| Icon | icon | - | Magnifying Glass (SOLID) |
| Title | text | - | Search |
| Icon side | choice | left / right | left |
The button appears only when the header search button is enabled in theme settings.
Results
| Field | Type | Default |
|---|---|---|
| Use custom search results page | boolean | off |
| Search results page | page | - |
| Group ID | number | - |
Search results include: Website pages (on), Landing pages (off), Blog posts (on), Knowledge articles (off), Case studies (off).
Default text
Editable strings for the modal and its accessibility layer:
- Placeholder text, Autosuggest results message, Autosuggest no results message (use
[[search_term]]). - Screen-reader labels for the field, button, and suggestions (use
[[number_of_results]]/[[search_term]]). - Autosuggest results message lines - sample suggestions shown only inside the editor preview, never on the live page.
Style tab¶
Styles - Button
| Field | Type | Options | Default |
|---|---|---|---|
| Spacing between icon and text | choice | gap-0 to gap-4xl | gap-m |
Applies when an icon is added to the button.
Tips & gotchas¶
Pair with Search Results
This module only sends the query. Put the Search Results module on the destination page so visitors land on an actual results listing.
The button needs the theme toggle
The labeled search button appears only when the header search button is enabled in your theme settings. If your button is not showing, check the theme first.
Editor-only samples
The auto-suggest example lines exist so the dropdown is visible while you build. They never render on the live page, so you can leave them as-is.