Canvas Docs

Mega Menu Column

A single mega-menu column (.mega-menu-column): a heading + link list, flat links, or free widget content. Place one or more inside a Row block as your Mega Menu content (Appearance > Menus > Mega Menu still controls the outer panel type/style). It is shown in the block inserter as Canvas Mega Menu Column and registered as canvas-core/mega-menu.

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

The Mega Menu Column 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

  • Column ContentDefaultLink List (.mega-menu-title / flat links)

    Whether this column holds a list of links set up below, or any blocks you place inside it, which is how a promotion panel goes in a menu.

    ChoicesLink List (.mega-menu-title / flat links)Free Content (.widget: place any blocks)

  • Column HeadingDefaultEmpty

    Optional. Wraps the links below in the .mega-menu-title heading pattern. Leave empty for a flat list of links with no heading.

    Shown when Column Content is "Link List (.mega-menu-title / flat links)"

  • Heading LinkDefault#

    Address the column heading opens, usually the section the links below belong to.

    Shown when Column Content is "Link List (.mega-menu-title / flat links)"

  • Column Heading Row ClassesDefaultEmpty

    Replaces the heading row's own classes. Leave empty for the standard .mega-menu-title heading; a design whose column title is styled differently states its class here.

    Shown when Column Content is "Link List (.mega-menu-title / flat links)"

  • Column Heading Link ClassesDefaultEmpty

    Added to the heading link, beside .menu-link.

    Shown when Column Content is "Link List (.mega-menu-title / flat links)"

  • LinksDefaulta preset list of 2 rows

    The rows in this column, in the order listed here. A row can be a plain link or a heading that groups the rows under it.

    Shown when Column Content is "Link List (.mega-menu-title / flat links)"

    Each row of Links takes:

    • LabelDefaultEmpty

      Wording of this row in the menu.

    • URLDefault#

      Address this row opens.

    • Icon ClassDefaultEmpty

      Icon shown with this row.

    • Screen Reader SuffixDefaultEmpty

      Extra wording added to this row's name for screen readers only, so two rows that read the same on screen are told apart when they are announced.

    • Icon After LabelDefaultOff

      Place the icon after the link text instead of before it: the shape a "Show all →" row uses.

    • Style as HeadingDefaultOff

      Bold "mega-menu-title" style with no nested list, for flat category headers (e.g. a Sunglasses / Watches / Bags row).

    • Flyout LevelDefaultEmpty

      Nests this row in a .mega-menu-dropdown list that opens beside its parent row, for a column whose entries carry their own sub-menus.

      ChoicesTop level (in this column) (empty)Flyout under the row aboveFlyout under the level-1 row aboveFlyout under the level-2 row above

    • Start Heading GroupDefaultOff

      Starts a NEW stacked heading+list group ("Default" / "Timeline" pattern): this row's Label/URL become the group heading, and every plain row that follows is nested under it as its own link list, until the next "Start Heading Group" or "Style as Heading" row. Unlike "Style as Heading", this row DOES get a nested list. Only used when the column's top-level "Column Heading" field (above) is left empty.

Layout

  • Column WidthDefaultEmpty

    How much of the open menu panel this column takes. Leave it unset and the columns share the width evenly.

    ChoicesAuto (Equal Width) (empty)Fit Content (col-lg-auto)Fill Remaining (col-lg)1/12 (col-lg-1)2/12 (col-lg-2)3/12 (col-lg-3)4/12 (col-lg-4)5/12 (col-lg-5)6/12 (col-lg-6)7/12 (col-lg-7)8/12 (col-lg-8)9/12 (col-lg-9)and 3 more

  • Extra ClassesDefaultEmpty

    Appended to the .sub-menu-container.mega-menu-column wrapper (e.g. the Tab/Side-Tab layouts add "border-start-0 p-0" / "ps-lg-0").

  • Column Width BreakpointDefaultLarge screens and up (col-lg-)

    Mega-menu columns normally stack below large screens. Choose "All screen sizes" for a row that keeps its width at every breakpoint, such as a full-width footer button.

    ChoicesLarge screens and up (col-lg-)All screen sizes (col-*) (empty)

  • Sub-menu Container ClassDefaultOn

    Off drops .sub-menu-container from the column, for a panel row that is a layout container rather than a menu list: the tab-content row of a tabbed mega menu.

  • Content PlacementDefaultInside a list item (default)

    Free Content columns only. "Directly" drops the list item and the .widget wrapper: the shape a tab strip spanning the whole panel uses.

    ChoicesInside a list item (default)Directly in the columnShown when Column Element is "List (default, wraps content in a .widget list item)"

  • Column ElementDefaultList (default, wraps content in a .widget list item)

    Free Content columns only. Use "Whole-column link" for panels whose entire column is clickable, and "Plain container" for a full-width row such as a footer button.

    ChoicesList (defaultwraps content in a .widget list item)Plain container (content placed directly inside)Whole-column link (content placed directly inside)Shown when Column Content is "Free Content (.widget: place any blocks)"

  • Column Link URLDefaultEmpty

    Address the whole column opens when the column itself is the link, as a promotion panel usually is.

    Shown when Column Element is "Whole-column link (content placed directly inside)"

  • Content Item ClassesDefaultEmpty

    Free Content columns only. Replaces the default "menu-item" class on the list item holding the content: e.g. a promo panel styled as a borderless card.

    Shown when Column Element is "List (default, wraps content in a .widget list item)"

  • Wrap Content in .widgetDefaultOn

    Free Content columns only. Turn off for a panel whose blocks sit directly in the list item, such as an image + link promo card.

    Shown when Column Element is "List (default, wraps content in a .widget list item)"

  • Content Column HeadingDefaultEmpty

    Free Content columns only. Set to give the column the same titled shape a Link List column has: the content is nested under a .mega-menu-title row instead of sitting at the top of the column.

    Shown when Column Element is "List (default, wraps content in a .widget list item)"

  • Content Column Heading URLDefaultEmpty

    Address the heading of a free-content column opens. Leave it empty for a heading that is not a link.

    Shown when Column Element is "List (default, wraps content in a .widget list item)"

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?