Header Navigation

The primary navigation menu for a built header. Pick a menu and alignment. It is shown in the block inserter as Canvas Header Navigation and registered as canvas-core/header-navigation.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

• MenuDefaultEmpty

  Pick a menu directly, or a theme location so the menu stays swappable from Appearance → Menus. A split (centered-logo) header points its two navigations at Primary Menu 1 and Primary Menu 2.

  Choices- Theme Default - (empty)Location: Primary Menu 1Location: Primary Menu 2Location: Mobile MenuLocation: Secondary MenuLocation: Top Bar MenuLocation: Copyrights MenuLocation: 404 Navigation LinksCanvas Main MenuHeaders DirectoryHeaders Ecommerce MinimalHeaders Floating Semiand 9 more

• Mobile MenuDefaultEmpty

  Optional separate navigation menu rendered specifically for the mobile breakpoint, alongside the menu above inside the same nav (the alternate-mobile-menu pattern). Leave as None to use only the menu above on mobile.

  Choices- None - (empty)Location: Primary MenuLocation: Primary Menu 1Location: Primary Menu 2Location: Mobile MenuLocation: Secondary MenuLocation: Top Bar MenuLocation: Copyrights MenuLocation: 404 Navigation LinksCanvas Main MenuHeaders DirectoryHeaders Ecommerce Minimaland 10 more

Settings

• AlignmentDefaultRight (Default)

  Where the menu sits in the header row. Choose None to let the row alignment or your own classes place it instead.

  ChoicesNone (parent-controlled) (empty)LeftCenterRight (Default)Center (Large screens+)

• Dropdown ArrowsDefaultOn

  Show caret arrows next to items that have sub-menus.

• Justify Items to EndDefaultOff

  Adds "justify-content-lg-end" to the rendered .menu-container. Used by split-menu layouts so one side's top-level items hug the outer edge of its column while the other side hugs the centered logo: the two patterns simply swap which Navigation instance has this enabled.

• Secondary Menu StyleDefaultOff

  Render with the secondary-menu style (e.g. a compact links row).

• Navigation LabelDefaultEmpty

  The name screen readers announce for this navigation landmark. Leave empty for Primary or Secondary.

• One-Page ModeDefaultOff

  Turn the menu into a one-page anchor navigation: items whose URL is a section anchor (e.g. "#section-1") smooth-scroll to that section and highlight automatically while scrolling. Items with normal URLs keep working as plain links.

• Scroll EasingDefaulteaseInOutExpo

  How the scroll accelerates and settles when a menu item jumps to its section. The default starts and ends gently.

  Shown when One-Page Mode is on

• Scroll Speed (ms)Default1250

  How long the jump to a section takes, in milliseconds. Lower it for a snappier feel on a long page.

  Shown when One-Page Mode is on

• Scroll Offset (px)Default65

  Distance kept between the viewport top and the target section after scrolling.

  Shown when One-Page Mode is on

• Link Anchors Home Off the Front PageDefaultOff

  On views other than the front page, render each anchor item as a real link to the front page plus its anchor, so a one-page menu still works from an inner page.

  Shown when One-Page Mode is on

• Highlight the First Section LinkDefaultOn

  On the front page, show the first section link as the active one before the visitor scrolls. Turn it off for a design whose navigation stays unmarked until a section comes into view.

• Menu StyleDefaultEmpty

  Top-level menu item style variant appended to the primary-menu class list.

  ChoicesDefault (empty)Style 3 (Boxed Items)Style 4 (Bordered Items)Style 5 (Stacked Icon + Label)Style 6 (Animated Underline)

• Open Dropdowns on ClickDefaultOff

  Open sub-menus on click instead of hover (adds the on-click modifier class).

• Bordered MenuDefaultOff

  Adds the menu-style-border modifier class (bottom-border item treatment).

• Item SpacingDefaultEmpty

  How space between top-level items is created. Used with the boxed and bordered item styles.

  ChoicesDefault (empty)Margin

• Mobile Menu StyleDefaultEmpty

  How the menu opens below the mobile breakpoint. Theme Options follows Header → Mobile → Mobile Menu Style.

  ChoicesTheme Options (empty)Slide DownOff-Canvas (Side)Off-Canvas (Right Side)Full-Screen Overlay

• Full-Screen Overlay MenuDefaultOff

  Open the menu as a full-screen overlay instead of a bar: the items are laid out in a centred grid row, and any blocks nested in this navigation become a second column beside them (a search form, social links). Usually paired with Open Dropdowns on Click.

• Overlay Row ClassesDefaultalign-items-center justify-content-center

  Classes on the overlay grid row that holds the menu column.

  Shown when Full-Screen Overlay Menu is on

• Overlay Menu Column ClassesDefaultcol-lg-3

  Classes on the column holding the menu itself.

  Shown when Full-Screen Overlay Menu is on

• Overlay Side Column ClassesDefaultcol-lg-3 d-none d-lg-block

  Classes on the column holding the blocks nested in this navigation. Nothing renders when no blocks are nested.

  Shown when Full-Screen Overlay Menu is on

• Top-Level Item IconsDefaultEmpty

  Show an icon beside each named top-level item, for this navigation only: the menu itself is untouched, so other headers using the same menu stay as they are. An icon set on the item in Appearance → Menus wins.

  Each row of Top-Level Item Icons takes:

  • Menu Item LabelDefaultEmpty

    The top-level item to decorate, written exactly as it reads in the menu.

  • IconDefaultEmpty

    Icon shown beside that item.

• Top-Level Item Sub-TitlesDefaultEmpty

  Sub-title text for each named top-level item, shown when Item Sub-Titles is on. Set here rather than on the menu so other headers sharing the menu are unaffected; an item's own Description in Appearance → Menus wins.

  Shown when Item Sub-Titles is on

  Each row of Top-Level Item Sub-Titles takes:

  • Menu Item LabelDefaultEmpty

    The top-level item to caption, written exactly as it reads in the menu.

  • Sub-TitleDefaultEmpty

    Small line shown under that item.

• Dropdown SkinDefaultEmpty

  Look of the panels that open under this menu: their background, corners and shadow. It applies to this navigation alone, so a second menu in the same header can keep the default.

  ChoicesDefault (empty)BlurColorsDarkFlatFull-WidthRoundedShadow

• Stretch to Fill the BarDefaultOff

  Top-level items share the full width of the bar equally instead of taking their natural widths.

• Dropdown Arrow IconDefaultEmpty

  Which arrow marks the items that open a sub-menu. Leave it on Default to keep the theme caret.

  ChoicesDefault (Theme Caret) (empty)ChevronShort ArrowFilled CaretAngle DownPlusShown when Dropdown Arrows is on

• Item Sub-TitlesDefaultOff

  Sub-title menu style. Displays each top-level menu item's Description field (set per item in Appearance → Menus) as a small sub-title beneath its label.

• CTA ButtonDefaultOff

  Append a call-to-action button after the menu.

• Button TextDefaultLogin

  Wording on the button that follows the menu.

  Shown when CTA Button is on

• Button LinkDefaulta preset list of 3 rows

  Where that button sends a visitor.

  Shown when CTA Button is on

• Extra ClassesDefaultEmpty

  Additional free-text utility classes appended to the rendered .primary-menu nav, after the alignment class (e.g. responsive/order utilities used across many header layouts such as "ms-lg-auto", "order-lg-first order-last", "me-lg-3").

• Dropdown Panel ClassesDefaultEmpty

  Classes added to every dropdown / mega-menu panel this navigation renders: "dark" puts the panels in the theme's dark colour scheme, which the Dark skin already does on its own.

• Extra Menu List ClassesDefaultEmpty

  Additional utility classes appended to the rendered .menu-container list itself, for layouts that trim the list's own border or spacing. Leave empty for the standard list.

• Decorative First Item ClassesDefaultEmpty

  Adds an empty leading list item holding a span with these classes, for designs that draw a shape behind the menu. Empty adds nothing.

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Header: App Menu, Header Button, Header Cart, Header Container, Header Icon Link, Header Info.