Canvas Docs

App Menu

An app-style navigation bar pinned to the bottom of the screen on small devices. It is shown in the block inserter as Canvas App Menu and registered as canvas-core/app-menu.

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

The App Menu 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

  • ItemsDefaultEmpty

    The bar's items, left to right.

    Each row of Items takes:

    • IconDefaultbi-house

      The icon this item shows in the bar. An icon carries the whole item when labels are turned off, so choose one a visitor will recognise.

    • LabelDefaultEmpty

      The wording under the icon. It is still announced to screen readers when Show Labels is off, so fill it in either way.

    • LinkDefault#

      Where tapping this item takes the visitor.

    • Mark as CurrentDefaultOff

      Shows this item as the one the visitor is on, in the manner the chosen Style marks it.

    • Menu Trigger Instead of IconDefaultOff

      Render the mobile menu trigger in place of this item's icon, so tapping it opens the primary menu.

Settings

  • StyleDefaultEmpty

    How the active item is marked.

    ChoicesDefault (tinted active item) (empty)Style 2 (accent rule above the active item)

  • DarkDefaultOff

    Use the theme's dark colour scheme for the bar.

  • Show LabelsDefaultOn

    Show each item's label under its icon. When off the label is still read by screen readers.

  • Hide FromDefaultLarge screens up (992px)

    The bar belongs to small screens; above this width it is hidden.

    ChoicesNever (always visible) (empty)Small screens up (576px)Medium screens up (768px)Large screens up (992px)Extra-large screens up (1200px)

  • Trigger Item ClassesDefaultEmpty

    Extra classes on the menu trigger, to line it up with the icons beside it.

  • Extra ClassesDefaultEmpty

    Additional classes on the bar itself. Space separated.

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: Header Button, Header Cart, Header Container, Header Icon Link, Header Info, Header Logo.

Was this page helpful?