Canvas Docs

Header Icon Link

A single icon-only link for a built header (wishlist, account, user, cart trigger, login modal), using the .header-misc-icon markup. It is shown in the block inserter as Canvas Header Icon Link and registered as canvas-core/header-icon-link.

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

The Header Icon Link 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

  • IconDefaultbi-heart

    Font-icon class for the link glyph, e.g. "bi-heart" (wishlist), "bi-person" (account), "bi-box-arrow-in-right" (login).

  • URLDefaultEmpty

    Ignored when a Modal Target below is set.

  • Open Inline Modal (#id)DefaultEmpty

    Open a popup already on the page instead of following a link, which is how a header opens a sign-in form. Enter the id of the popup, including the #. Overrides the URL above.

  • Badge / CountDefaultEmpty

    Optional badge shown on the icon (.top-cart-number pattern), e.g. a wishlist or notification count.

  • Dropdown ItemsDefaultEmpty

    Optional. Turn the icon into a Bootstrap dropdown toggle with these menu links.

    Each row of Dropdown Items takes:

    • Item Icon ClassDefaultEmpty

      Small icon shown before this row in the dropdown.

    • Item TextDefaultEmpty

      Wording of this row in the dropdown.

    • Item URLDefaultEmpty

      Address this row opens.

Settings

  • Accessible LabelDefaultEmpty

    Accessible name for this icon-only link (WCAG 4.1.2). Falls back to a generic label when left empty.

  • Extra ClassesDefaultEmpty

    Additional utility classes appended to the .header-misc-icon wrapper (e.g. spacing/visibility utilities such as "ms-3" or "d-none d-sm-block").

  • Link ClassesDefaultEmpty

    Classes on the link itself. A design that draws the icon as a bordered tile, or binds a behaviour to it, sets that on the link rather than on the wrapper.

  • Icon ClassesDefaultEmpty

    Extra classes on the glyph itself, for its colour or its size.

  • Badge ClassesDefaultEmpty

    Classes on the count itself. Empty keeps the cart-style number; a design that draws the count as a pill pinned to the icon corner states its own.

  • What the Count CountsDefaultEmpty

    Read out after the number by a screen reader, so "5" is announced as "5 unread messages". Supplying it also replaces the link's generic accessible name, which would otherwise hide it.

  • Dropdown Menu ClassesDefaultEmpty

    Utility classes appended to the .dropdown-menu element.

  • Dropdown Item ClassesDefaultEmpty

    Utility classes appended to each .dropdown-item link.

  • Dropdown OffsetDefaultEmpty

    Nudges the dropdown away from the icon, as sideways and downward pixels separated by a comma. Use it when the panel sits too close to the header edge.

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 Info, Header Logo.

Was this page helpful?