Header Navigation | SaaSFlow Docs

102 settingsPagesBlog postsBlog listings

Where it is used

Every page (global header).

Content settings

What the module says and shows. Repeaters (groups you can add items to) are marked as such.

Setting Type What it does

Announcement barGroup · 5 settings

Show announcement bar	On/off	Default: `On`
Message	Text	The announcement text, kept to one line.Default: `SaaSFlow 3.0 is here: AI-powered insights for every team.`
Link text	Text	Text of the link after the message. Leave empty for no link.Default: `See what's new`
Link URL	Link	Where this link goes.
Visitors can close it	On/off	Adds a close button. The bar stays hidden for that visitor until the message changes.Default: `On`

Logo (for light backgrounds) Image Shown when the header uses light mode.

Logo (for dark backgrounds) Image Shown when the header uses dark mode. Leave empty to use the light-background logo in both modes.

Logo text Text Shown next to the logo mark when no logo image is uploaded.Default: SaaSFlow

Menu Choice Use a menu from Settings > Content > Navigation, or build one here with dropdowns and mega menus.Options: HubSpot navigation menu (Settings > Content > Navigation)Custom menu (below), with dropdowns and mega menusDefault: Custom menu (below), with dropdowns and mega menus

Navigation menu Menu Used when Menu is set to HubSpot navigation menu. Items with sub-items open as dropdowns.

Menu itemsRepeater · 5 settings

Used when Menu is set to Custom menu.

Label Text Text shown in the menu.

Type Choice A plain link, a short dropdown list, or a large mega menu.Options: LinkDropdown listMega menuDefault: Link

Link Link Where the item goes. For a Dropdown list or Mega menu this is optional: when set, the label itself is a link and the arrow next to it opens the menu.

Dropdown linksRepeater · 7 settings

Used when Type is Dropdown list.

Icon source	Choice	Optional icon beside the link: pick from the icon library, upload an image, or paste SVG code. Leave the icon empty for a text-only link.Options: Icon libraryUpload an imageCustom SVG codeDefault: `Icon library`
Icon	Icon	Search the Font Awesome library and pick an icon. It takes the item's icon color.
Icon image	Image	A square SVG or PNG, at least 48 x 48px. Uploaded images keep their own colors.
SVG code or emoji	Text	Paste an element. Use stroke="currentColor" or fill="currentColor" so it takes the icon color.
Label	Text	Text shown in the menu.
Description	Text	Supporting text. Keep it to one or two sentences for best results.
URL	Link	Where this item links to.

Mega menu contentGroup · 3 settings

Used when Type is Mega menu.

Columns per row Number How many columns sit side by side in this dropdown. More columns than this wrap onto a new row.Default: 4

ColumnsRepeater · 2 settings

Column title Text Shown as the item's heading.

LinksRepeater · 7 settings

Icon source	Choice	Pick an icon from the library, upload an SVG or PNG, or paste SVG code. If the chosen one is empty, any of the others that is filled in is used.Options: Icon libraryUpload an imageCustom SVG codeDefault: `Icon library`
Icon	Icon	Search the Font Awesome library and pick an icon. It takes the item's icon color.
Icon image	Image	A square SVG or PNG, at least 48 x 48px. Uploaded images keep their own colors.
SVG code or emoji	Text	Paste an element. Use stroke="currentColor" or fill="currentColor" so it takes the icon color.
Label	Text	Text shown in the menu.
Description	Text	Supporting text. Keep it to one or two sentences for best results.
URL	Link	Where this item links to.

Featured cardGroup · 7 settings

Show featured card	On/off	Default: `On`
Eyebrow	Text	Short label shown above the heading, such as a category or theme.Default: `FEATURED`
Title	Text	Shown as the item's heading.
Description	Text	Supporting text. Keep it to one or two sentences for best results.
CTA text	Text	Text on the button. Leave empty to hide the button.
CTA URL	Link	Where the button goes.
Bottom image	Image	Recommended: a PNG, JPG or WebP under 1MB. Add alt text that describes the image.

Right actionsGroup · 14 settings

Show search	On/off	Default: `On`
Search results page	Text	The page that shows search results. HubSpot's default is /hs-search-results.Default: `/hs-search-results`
Search placeholder	Text	Hint text inside the empty search box.Default: `Search SaaSFlow`
Login text	Text	Text of the login link. Leave empty to hide it.Default: `Log in`
Login URL	Link	Where the login link goes.
Log in icon	Choice	An icon on the Log in button.Options: NoneFrom the icon libraryDefault: `None`
Icon	Icon	Search HubSpot's icon library, for example user or right-to-bracket.
Icon position	Choice	Where the icon sits on the button.Options: Before the textAfter the textDefault: `Before the text`
Button text	Text	Text on the button. Leave empty to hide the button.Default: `Get started free`
Button URL	Link	Where the button goes.
Main button icon	Choice	An icon on the main button. A HubSpot CTA (below) shows its own design instead.Options: ArrowFrom the icon libraryNoneDefault: `Arrow`
Icon	Icon	Search HubSpot's icon library, for example rocket or calendar.
Icon position	Choice	Where the icon sits on the button.Options: After the textBefore the textDefault: `After the text`
Main button: HubSpot CTA ID	Text	Optional. To use a HubSpot CTA instead of the button (so HubSpot tracks its views and clicks), paste the CTA's ID here. Find it in Marketing > CTAs: open the CTA and copy the number from the page address. Needs HubSpot's CTA tool. Leave empty to use the button.

Language switcherGroup · 2 settings

Show language switcher	On/off	Appears only on pages that have translations.Default: `On`
Label (screen readers)	Text	Default: `Change language`

Style settings

In the module's Styles tab: layout, color mode, background, fonts, spacing and animation.

Setting Type What it does

Header design Choice Overall layout of the header.Options: Design 1: Classic (one row)Design 2: Stacked (menu on its own row)Design 3: Pill (compact rounded bar)Design 4: Search bar (logo, open search and buttons, menu below)Default: Design 1: Classic (one row)

FontsGroup · 1 setting

Header font

Font

Starts as the theme's header font (or the body font when that is empty). Change it to use another font in the header only.

Announcement barGroup · 6 settings

Background	Choice	Kind of background for this box.Options: Brand gradient (primary to accent)Brand tint (follows light/dark mode)Solid colorCustom gradientDefault: `Brand gradient (primary to accent)`
Color / gradient start	Color	The solid color, or the first color of a custom gradient.Default: `#1E1B4B`
Gradient end	Color	Used by the custom gradient.Default: `#7C3AED`
Gradient angle	Number	Direction of the gradient. 90 runs left to right, 180 top to bottom.Default: `90`
Text color	Color	Used with a solid color or gradient. The brand tint uses the theme text colors.Default: `#FFFFFF`
Text alignment	Choice	Alignment of the text.Options: CenterLeftDefault: `Center`

Show bottom border On/off A thin line under the header.Default: On

Logo alignment Choice Design 4 always keeps the logo on the left, next to the search bar.Options: LeftCenterDefault: Left

Menu position Choice Used when the logo is on the left.Options: Next to the logoCenteredDefault: Next to the logo

Header behavior Choice Whether the header scrolls away or stays at the top.Options: Static (scrolls away)Sticky (stays at the top)Floating (inset bar over the content)Default: Sticky (stays at the top)

Transparent background On/off The header sits over the page's first section. Designs 1, 2 and 4: see-through until visitors scroll. Floating and Design 3 (pill): the bar keeps its background and floats over the section.Default: Off

Mega menu icon color Color Leave empty to use the theme primary color.

Mega menuGroup · 12 settings

Size and layout of mega menu panels (desktop). Phones and tablets always show them as a simple list.

Panel width	Choice	Smart: each panel is as wide as its columns and featured card need, up to the maximum width, so a 2-column menu stays compact and a 4-column one grows.Options: Smart: fits its columnsFixed widthSame width as the header contentFull screen widthDefault: `Smart: fits its columns`
Maximum width	Number	Smart: the widest a panel can grow. Fixed: the panel's width. Never wider than the screen.Default: `1200`
Column width	Number	Ideal width of each column. Columns shrink a little when space is short.Default: `230`
Featured card width	Number	Width of the featured card beside the columns.Default: `300`
Featured card side	Choice	Which side of the columns the featured card sits on.Options: RightLeftDefault: `Right`
Panel position	Choice	Lined up: the panel starts under the menu item and moves in just enough to stay on screen.Options: Centered under the headerLined up with its menu itemDefault: `Centered under the header`
Space between columns	Number	Gap between columns and the featured card.Default: `32`
Inner padding	Number	Space inside the panel edge.Default: `32`
Lines between columns	On/off	A thin line between columns.Default: `Off`
Show link descriptions	On/off	Off: a compact menu with just icons and labels.Default: `On`
Dropdown opening animation	Choice	How dropdown lists and mega menus open on hover, and close again in reverse. Visitors who prefer reduced motion get a simple fade.Options: Curtain: drops down, items slide in one by oneFade in, items slide in one by oneSimple fadeNoneDefault: `Curtain: drops down, items slide in one by one`
Animation speed	Choice	Options: FastNormalSlowDefault: `Normal`

Interface labels

Words on buttons and for screen readers. Change them to translate the module.

Setting	Type	What it does
Skip link	Text	Link that lets keyboard users jump past the header.Default: `Skip to content`
Logo link	Text	Read by screen readers for the logo link.Default: `Home page`
Main menu	Text	Read by screen readers for the main menu.Default: `Main`
Open menu button	Text	Read by screen readers for the mobile menu button.Default: `Open menu`
Close menu button	Text	Read by screen readers when the mobile menu is open.Default: `Close menu`
Search button	Text	Read by screen readers for the search icon.Default: `Search`
Search submit button	Text	Text on the button in the search bar.Default: `Search`
Close announcement button	Text	Read by screen readers for the button that hides the announcement.Default: `Close announcement`
Back to top button	Text	Read by screen readers for the back to top button.Default: `Back to top`
Submenu arrow (screen readers)	Text	Read out for the arrow beside a menu item that is both a link and a dropdown, followed by the item name.Default: `Show submenu`

Tip

Headings support [brackets] to highlight words and | for a new line. See Editing tips.