Canvas Docs

Menus And Navigation

Navigation in Canvas has two halves. The menu itself, the tree of items and links, is managed on the classic Appearance > Menus screen, and it stays there even though Canvas is a block theme, because a menu is content that outlives any header design. The presentation, which menu shows where and how it looks, belongs to the header: the Canvas Header Navigation block displays a menu, and the header and page settings style it. Edit the tree in one place, and every header showing that menu updates.

Starting screenAppearanceMenus.

Build menus here as you always have: add pages, posts and custom links, drag to nest. Canvas registers seven display locations a menu can be assigned to: Primary Menu, Primary Menu 1 and Primary Menu 2 for headers, Mobile Menu for a separate tree on small screens, Secondary Menu, Top Bar Menu, and Copyrights Menu for the small print strip. A built header's Canvas Header Navigation block can also pick a specific menu directly in its own settings, which is how two headers can show two different menus; the block's reference covers its full option set, and the per page menu treatments (style, dropdown skin, click behaviour) live in Header Options Per Page.

Per Item Controls

Canvas adds settings to every menu item, grouped so the screen stays manageable. The groups appear as checkboxes under Screen Options at the top of the Menus screen, so tick a group there before looking for its fields on an item. Expand any item and you will find, group by group:

Icon & Badge decorates the item. Icon puts an icon before the label, Badge Text hangs a small marker on it (New, Hot, Sale), and Badge Style colours the badge, with Custom Color revealing a Badge Background Color picker. A badge earns attention exactly once per menu; more than one and none of them work.

Link Options changes what the link is and does:

  • Link CSS Classes styles the link itself. WordPress puts its own menu classes on the list item, so classes meant for the anchor go here.
  • Link Inline Style carries CSS declarations for one emphasised row, the classic case being a menu item drawn as a button.
  • Render as a Plain Link drops the standard menu link styling entirely, so the row is styled by your classes alone.
  • Link Query String appends a query to the link, so several rows can point at one page and ask it for different views, and the link still survives an import because the page itself resolves normally.
  • Divider After Item renders a divider directly after the item, carrying the classes you give it.
  • Open in Lightbox opens the link in a lightbox instead of navigating: Inline for an on-page element such as a link triggered popup, Image for a picture, Iframe (video / embed) for players, Ajax (load a URL) to load a page into the dialog.

Smooth Scroll turns the item into an on-page anchor link. Set Scroll To Target to an on-page id such as #footer and the item scrolls there instead of navigating; Scroll Offset (px) stops the target underneath a sticky header, and Scroll Speed (ms) and Scroll Easing shape the movement. This is the mechanism one page sites drive their whole menu with. On the front page the Header Navigation block marks the first of those links as the current one before the visitor has scrolled anywhere; switch off its Highlight the First Section Link setting when your design leaves the bar unmarked until a section comes into view.

A one page site can also skip the menu system and draw its bar with the header's Page Menu block, which lists its rows in its own settings. Give a row a Fallback Link (One-Page) so it still goes somewhere before the scroll script loads, and use Link Classes for the spacing a design gives its first or last row. Add a call to action at the end of the bar with Button Text and Button Link, and set Button Opens when the link should open a lightbox or an on-page sign-in card instead of loading a page. One-Page Hook chooses whether the container or the nav element carries the scroll settings; pick the one the design puts them on, because the scroll script reads either.

Sub-menu and Visibility finish the set: Sub-menu Data Class applies breakpoint conditional classes to the item's dropdown, and Hide on Desktop / Hide on Mobile show an item to only one audience, such as a call link that exists only on phones.

Two more groups, the mega menu family, turn an item's dropdown into a multi-column panel; they have their own page. And one field lives elsewhere by WordPress convention: the item's Description, which the header's Item Sub-Titles treatment renders beneath the label, is a built in WordPress field on the same item.

Pitfalls

The Menus screen has three classic dead ends, all shallow:

  • The Canvas fields are missing from your items. Their groups are unticked under Screen Options. This is per user and per screen, so a colleague seeing different fields than you is the same cause.
  • Scroll Speed and Scroll Easing are hidden. They appear only once Scroll To Target is set, because without a target there is no scroll to shape.
  • Badge Background Color is missing. It appears only while Badge Style is Custom Color; the named styles bring their own colour.
  • Item Sub-Titles shows nothing. The treatment renders the item's Description, so items without one have nothing to show. Fill in the Description on the items that need a sub-title.

The block that displays all of this is configured in How To Build A Header, the per page menu treatments live in Header Options Per Page, and the wide dropdown panels are built in How To Build A Mega Menu.

Was this page helpful?