Canvas Docs

Top Links

The top-bar links menu with optional single-level dropdown, using the .top-links markup and styling. It is shown in the block inserter as Canvas Top Links and registered as canvas-core/top-links.

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

The Top Links settings in the block editor sidebar

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

  • Top LinksDefaulta preset list of 3 rows

    The links in the bar, in order. Any of them can open a dropdown of its own.

    Each row of Top Links takes:

    • LabelDefaultEmpty

      Wording shown in the bar for this link.

    • URLDefault#

      Where this link leads. Leave it as a hash for a row that only opens a dropdown.

    • IconDefaultEmpty

      Optional icon rendered before the label inside the link: e.g. a globe on a language switcher, or a pin/envelope/phone on a contact bar.

    • Image URLDefaultEmpty

      Optional image rendered before the label inside the link: e.g. a flag on a language switcher.

    • Image Alt TextDefaultEmpty

      Alt text for the image above. Falls back to the label.

    • Dropdown LinksDefaultEmpty

      One per line as "Label|URL", optionally "Label|URL|Image URL|Image Alt" to show an image before the label. Leave empty for no dropdown. Ignored when "Use Section Content" is enabled.

    • Use Section ContentDefaultOff

      ".top-links-section", wraps this item's dropdown in the block's own InnerBlocks content (e.g. a Login Form block) instead of the Dropdown Links list. Only the FIRST item with this enabled receives the content; enable on one item only.

    • Section Inline StyleDefaultEmpty

      Styling set on this item's dropdown panel, for a one off width or text size.

    • Item ClassesDefaultEmpty

      Extra classes on this item's list element (e.g. a highlight or responsive-visibility utility).

    • Link ClassesDefaultEmpty

      Extra classes on this item's link (e.g. a side-panel trigger).

Style

  • Dropdown Extra ClassesDefaultEmpty

    Extra classes added to every ".top-links-sub-menu" dropdown: e.g. a background utility so the dropdown matches the bar it drops out of.

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.

Was this page helpful?