Canvas Docs

How To Build A Mega Menu

A mega menu replaces a menu item's ordinary dropdown with a wide, multi-column panel: link columns under headings, a promotional image panel, whatever the design calls for. Canvas builds them two ways, and both attach at the same place, the menu item itself. The quick way turns the item's own sub-items into columns; the designed way composes a panel from blocks as a Mega Menu record and assigns it to the item.

Before You Start: Reveal The Fields

The mega menu controls live on menu items under Appearance > Menus, and they arrive as Screen Options groups so the Menus screen stays uncluttered for sites that never use them. Open Screen Options at the top of the Menus screen and tick the groups you need: Mega Menu, Mega Menu Style, Mega Menu Column and Content Panel for this page's work (the other groups, Icon & Badge, Link Options, Smooth Scroll, Sub-menu and Visibility, are covered in Menus And Navigation). If a field named below is not visible on your items, this checklist is why.

The Quick Way: Columns From Sub-Items

Starting screenAppearanceMenus, with your menu selected.

Expand a top level menu item and turn on Enable Mega Menu. From that moment the item's dropdown is a mega menu and each of its direct child items becomes a column: the child is the column heading, and the items nested under the child are the links inside that column. You already know how to build this structure, because it is the same drag and drop nesting as any menu.

Then shape the panel on the top level item:

  • Mega Menu Type decides how wide the panel is. Choices: Default, Standard, Full Width, Compact. None turns the mega menu off, whatever else is set below.
  • Custom Width accepts a CSS width, such as 500px or 30rem, for a panel that should match neither the menu nor the page.
  • Alternate Style, and the Mega Menu Style group behind Enable Custom Style (Background Color, Border, Border Radius, Shadow, Padding, Custom CSS Classes), restyle the panel itself.

And shape each column on the child items, with the Mega Menu Column fields: Column Width (Auto (Equal) shares the row evenly), Column CSS Classes, Display as Column Heading with its Column Heading Style (Heading (default) or Plain link), and Children Open as a Flyout to float an item's own sub-items beside the column instead of stacking them inside it.

A column can also be a picture instead of links. Set a child item's Item Renders As to Content Panel, no link and it becomes a decorative panel with a Panel Heading, Panel Text and Panel Background Image; pair the image with the column classes bg-cover bg-center bg-overlay-mask dark, and use Image Overlay Opacity to keep the text readable over it.

The Designed Way: A Mega Menu Record

When the panel is a design rather than a list of links, build it from blocks.

Starting screenCanvasMega Menus.

Choose Add New and compose the panel in the editor. The Canvas Mega Menu Column block is the natural unit, one per column inside a Row, and its reference page documents its heading, link list and free content modes; any other block can join it, which is the point of this route. Publish the record.

Where two rows in the panel read the same on screen, give each of them a Screen Reader Suffix in its row of the block's Links list. The wording you enter joins that row's name for screen readers only, so someone hearing the menu can tell two identically labelled rows apart while the panel itself looks exactly as designed.

Then attach it: back under Appearance > Menus, expand the top level item, turn on Enable Mega Menu, and pick your record under Mega Menu Content instead of the default Use Sub-menu Items. The record's edit screen keeps a Used In box listing every menu item that renders it, so you can always trace a panel back from the menu, and one record can serve items in several menus at once.

How To Style Every Mega Menu At Once

The fields above dress one item's panel. When every mega menu on the site should share a look, set it once instead.

Starting screenCanvasTheme Options, the Header tab, on its Mega Menu sub-tab.

The sub-tab holds the panel itself (Background Color, Box Shadow, Border, Compact Menu Width), the columns inside it (Column Padding, Column Divider Border), the column headings (Title Font Size, Title Font Weight, Title Text Transform, Title Letter Spacing, Title Color, Title Hover Color, Title Bottom Spacing) and the links under them (Link Padding, Link Hover Background, Link Hover Border Radius). Every box is empty by default and an empty box keeps the theme's own value, so set only what you want to differ. Link Padding takes one length for both axes, or two for vertical and horizontal.

These are the baseline every panel on the site starts from, so set the look here first and reach for a single item's Enable Custom Style only where one panel genuinely differs. The Header options reference documents the tab in full.

Pitfalls

Every one of these produces a visible warning or an empty panel, and every one has a one step fix:

  • The item opens an empty dropdown. The assigned Mega Menu record is a draft, trashed or deleted, and only published records render. Meanwhile the item's own sub-items are not used while a record is assigned, so nothing fills the gap. Publish the record, pick another, or set Mega Menu Content back to Use Sub-menu Items.
  • Nothing renders at all. Mega Menu Type is set to None, which switches the mega menu off regardless of everything configured below it. Pick a type.
  • The mega menu fields are missing from your items. Their Screen Options groups are unticked. See the checklist at the top of this page.
  • Column settings do nothing on a deeper item. The column fields apply to the items directly under the mega menu item, because those are the columns. An item nested deeper sits inside a column and has no width of its own.
  • The panel image has no dark overlay. Image Overlay Opacity needs the bg-overlay-mask class among the column's classes; without it there is no overlay to set the opacity of.
  • An item's own Background Color is ignored. The site wide Background Color on the Mega Menu sub-tab covers every panel once it holds a value, and the item's colour is only the fallback beneath it. Clear the site wide box to let individual panels choose their own.

The dropdown's skin, arrow and open behaviour are chosen per page in Header Options Per Page, and the rest of the per item fields are covered in Menus And Navigation.

Was this page helpful?