Page Menu

A sub-header page navigation bar with sticky and side-dots variants: one-page anchor scrolling or plain links. Use only one per page. It is shown in the block inserter as Canvas Page Menu and registered as canvas-core/page-menu.

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

• TitleDefaultEmpty

  Optional bar title shown before the menu items. Leave empty to hide.

• Title HighlightDefaultEmpty

  Optional emphasised part appended to the title (rendered as its highlight span).

  Shown when Title is set

Items

• Menu ItemsDefaultEmpty

  The rows of the bar, in the order listed here. Nothing is shown until you add at least one.

  Each row of Menu Items takes:

  • LabelDefaultSection

    Wording of this row in the bar.

  • Anchor / URLDefaultEmpty

    One-Page mode: the target section anchor (e.g. #section-1). Plain Links mode: a normal URL.

  • CurrentDefaultOff

    Mark as the active item (Plain Links mode, in One-Page mode the scroll-spy manages this automatically).

  • Link ClassesDefaultEmpty

    Utility classes on this row's link, for the spacing a design gives the first or last row.

  • Fallback Link (One-Page)Default#

    One-Page mode only: what the row links to before the scroll script takes over. Leave empty for a row that carries no link at all.

  • LevelDefaultLevel 1

    A Level 2 row drops into a flyout under the Level 1 row above it.

    ChoicesLevel 1Level 2 (flyout)

Settings

• StyleDefaultEmpty

  Default renders a full-width bar below the header. The dots variants render a fixed vertical dots rail at the side of the viewport (never sticky: they are already fixed).

  ChoicesSub-Header Bar (Default) (empty)Side DotsSide Dots - BorderedSide Dots - Left

• Link ModeDefaultOne-Page Anchors (smooth scroll + scroll-spy)

  Whether the rows glide to sections further down the same page, marking the one a reader has reached, or behave as ordinary links to other pages.

  ChoicesOne-Page Anchors (smooth scroll + scroll-spy)Plain Links

• PlacementDefaultHere in the content

  A section bar belongs above the content area, spanning the full page width. Choosing that moves this bar out of the content column and prints it directly under the header, where the page title sits.

  ChoicesHere in the contentFull widthabove the content

• Disable StickyDefaultOff

  Keep the bar in normal document flow instead of sticking below the header on scroll.

  Shown when Style is "Sub-Header Bar (Default)"

• Sticky on MobileDefaultOff

  Keeps the bar pinned to the top on phones as well, not only on wider screens.

  Shown when Style is "Sub-Header Bar (Default)"

• Light Scheme WrapDefaultOff

  Adds the not-dark class to the inner wrap so the bar keeps its light scheme inside dark sections.

• Row Extra ClassesDefaultEmpty

  Utility classes appended to the page-menu-row (e.g. vertical padding).

• Nav Extra ClassesDefaultEmpty

  Utility classes appended to the page-menu-nav element that holds the rows.

• One-Page HookDefaultOn the row list

  Which element carries the one-page class and the scroll settings. Both are read the same way by the scroll script; choose the one the design puts them on.

  ChoicesOn the row listOn the nav elementShown when Link Mode is "One-Page Anchors (smooth scroll + scroll-spy)"

• Title Extra ClassesDefaultEmpty

  Utility classes appended to the page-menu-title.

  Shown when Title is set

• Scroll EasingDefaulteaseInOutExpo

  How the glide to a section accelerates and settles. The default starts and ends gently; leave empty to let the scroll script decide.

  Shown when Link Mode is "One-Page Anchors (smooth scroll + scroll-spy)"

• Scroll Speed (ms)Default1250

  How long that glide takes, in milliseconds. Lower it for a snappier feel on a long page; 0 leaves it to the scroll script.

  Shown when Link Mode is "One-Page Anchors (smooth scroll + scroll-spy)"

• Scroll Offset (px)Default65

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

  Shown when Link Mode is "One-Page Anchors (smooth scroll + scroll-spy)"

Button

• Button TextDefaultEmpty

  Wording of a call-to-action button placed at the end of the bar, after the rows. Leave empty for a bar with no button.

• Button LinkDefaultEmpty

  Where the button goes. A #id here opens that element when a lightbox type is chosen below.

  Shown when Button Text is set

• Button ClassesDefaultbutton ms-auto

  Classes on the button, so it takes the design's own button treatment and alignment.

  Shown when Button Text is set

• Button OpensDefaultEmpty

  Open the link in the theme's lightbox instead of loading it. Choose the dialog option for a sign-in card that already sits on the page.

  ChoicesA page (normal link) (empty)A dialog already on this pageAn imageAn embedded pageShown when Button Text is set

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.