Modules / Query loops & dynamic data

Query loop: menu items

Loop over the items of a WordPress menu and build navigation, mega menus, footers or sitemaps from any elements.

#35 of 39 modules by votes

  • On by default
  • Needs Bricks 2.4 or newer
  • Tested with Bricks 2.4.3

Tile 35 of 39, ranked by votes · Recording in progress

Where to find it in the builder

  • Query editor: the query type Menu items (Kiln).
  • Container, Block, Div, Content tab, directly under the Query control: Menu and Items. They show while that query type is chosen.
  • Dynamic data picker: the tags, in the Kiln group, labelled "Menu item: title", "Menu item: URL" and so on.

How to use it

A flat list of top-level items

  1. Select a Container, Block or Div and turn on its query loop.
  2. In the Query editor, choose the query type Menu items (Kiln).
  3. Under the Query control, pick the Menu.
  4. Leave Items on Top level.
  5. Inside the loop, add tags such as {kiln_menu_item_title} and {kiln_menu_item_url}.

A mega menu

  1. Build the top-level loop as above.
  2. Inside it, add a second Container, Block or Div with its own query loop, type Menu items (Kiln).
  3. Set Items to Children of the parent loop's item. Leave Menu empty: a nested loop uses the menu of the loop around it.
  4. Inside the inner loop, use the same tags for the sub-items.

Every item in one list

Set Items to All, in menu order.

Tags

  • {kiln_menu_item_title}: the title. Basic markup in the title, such as an icon, is kept.
  • {kiln_menu_item_url}: the link URL.
  • {kiln_menu_item_target}: _blank when the item opens in a new tab, otherwise empty.
  • {kiln_menu_item_rel}: the link relationship (XFN) value.
  • {kiln_menu_item_attr_title}: the title attribute.
  • {kiln_menu_item_description}: the description.
  • {kiln_menu_item_classes}: the item's CSS classes, including current-menu-item and menu-item-has-children.
  • {kiln_menu_item_current}: current for the page being viewed, ancestor for its parents, otherwise empty.
  • {kiln_menu_item_has_children}: has-children when the item has sub-items, otherwise empty.
  • {kiln_menu_item_id}: the menu item's ID.

How it works with WordPress menus

Kiln marks the current item the way wp_nav_menu does, so {kiln_menu_item_current} and the current-menu-item class follow the page being viewed. You manage the menu itself in Appearance > Menus.

Limits

  • Current depends on the page being viewed. It stays empty in the builder canvas.
  • Children of the parent loop's item returns nothing when no Menu-items loop surrounds it.
  • With no menu chosen and no parent loop to take one from, the loop is empty.
  • The tags work only inside a Menu-items loop. Elsewhere they print nothing.

Settings

None. Turn the module on in Bricks > Kiln (it is on by default).

Requirements

Bricks 2.4 or newer.