Twig Components / Menu

Note: You are currently reading the documentation for Bolt 4.0. Looking for the documentation for Bolt 5.2 instead?

You can create menu's in Bolt by defining them in menu.yaml, and subsequently outputting them using {{ menu() }}.

Example menu:

main:
  - label: Home
    title: This is the <b>first<b> menu item.
    link: homepage
    class: homepage
  - label: About
    link: blocks/about
    submenu:
        - label: Sub 1
          link: entry/29
        - label: Sub 2
          class: menu-item-class
          link: entry/30
        - label: Sub 4
          class: sub-class
          link: page/32
  - label: All pages
    link: pages/
  - label: The Bolt site
    link: https://boltcms.io/
    class: bolt-site
    title: Visit the excellent Bolt website!

Each menu item has a few attributes you can use to define the menu.

Usage in templates¶

The menu tag renders HTML containing your site's menu items, as defined in the menu.yaml file. There are a few parameters to define the output:

The default output is taken from the file vendor/bolt/core/templates/helpers/_menu.html.twig. Most often, you'll want to customize this file yourself. You can copy this file to your own theme in public/themes, and use the template parameter to ensure it's being used.

Examples:

{{ menu() }}

The second example renders the main menu, as defined in menu.yaml, using the partials/_sub_menu.twig. Note that this file should be present in your public/theme/yourthemename folder.

{{ menu(name='main', template = 'partials/_sub_menu.twig') }}

You can specify other parameters besides the menu name and the template. For example, you can also set the the ul class or whether or not the output should contain submenus. You can control these using the so-called named arguments in Twig. For example:

{{ menu(
    identifier = 'foo',
    template = 'partials/_menu_foo.twig',
    params = {'withsubmenus': false, 'class': 'myclass'}
) }}

Which is equivalent to this shorthand version:

{{ menu('foo', 'partials/_menu_foo.twig', {'withsubmenus': false, 'class': 'myclass'}) }}

Doing this will render the menu foo, using the template _menu_foo.twig. The filename can be anything, but it's good practice to prefix it with _menu, so it's always easily recognizable later, or to other people working with your HTML.

Note: You can define more than one menu in your menu.yaml file, but you should define only one menu in each template file. So, if you have multiple menus that should be rendered with different HTML, you should have as many _menu_menuname.twig files in your theme.

menu_array()¶

Returns an array of the menu items defined in the menu.yaml file for the given name. If name is null, the array contains the definition for the first menu in the file. The menu_array function is used internally as part of the previous menu() function.

{{ dump(menu_array('main')) }}

Example output of menu_array()

array:4 [▼
  0 => array:7 [▼
    "label" => "Home"
    "title" => "This is the <b>first<b> menu item."
    "link" => "homepage"
    "class" => "homepage"
    "submenu" => null
    "uri" => "/"
    "current" => false
  ]
  1 => array:7 [▼
    "label" => "About"
    "title" => "About This Site"
    "link" => "blocks/about"
    "class" => ""
    "submenu" => array:1 [▼
      0 => array:7 [▼
        "label" => "Sub 1"
        "title" => "Incidunt exercitationem sed."
        "link" => "entry/29"
        "class" => ""
        "submenu" => null
        "uri" => "/entry/incidunt-exercitationem-sed"
        "current" => false
      ]
    ]
    "uri" => "/block/about"
    "current" => false
  ]
  ...
]

admin_menu_array()¶

Returns an array similar to the menu_array() function, but for the admin menu instead.