Jump to docs navigation

Creating Menus

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

Bolt has built-in functionality to create menus in your frontend templates. You can define one or more menus in the file config/bolt/menu.yaml, which can then be inserted in your templates using the {{ menu() }} tag.

To change one or more of the menus, edit the file config/bolt/menu.yaml. You can add more separate menus, if you wish, and each menu can have one level of items below it. See the default menu.yaml for an example of the supported options:

main:
  - label: Home
    title: This is the first menu item. Fo shizzle!
    link: homepage
    class: first
  - link: entry/1
    label: Second item
    submenu:
      - label: Sub 1
        link: entry/2
      - label: Sub 2
        class: menu-item-class
        link: entry/3

In this case main is the name of the menu. The options are:

Option	Description
`label`	override the 'title' of the record with a defined label. If omitted, the 'title' of the record is used.
`title`	used as a 'title'-attribute in the rendered HTML. If omitted this can be substituted for the `subtitle`-field in a record.
`class`	used to define an HTML `class`-attribute
`link`	the `link` to a Bolt record, group of records or an external site. For example `link: page/about` will make this item link to a record of type 'page' with the slug 'about'. `link: page/1` will link to the 'page' with id '1'. `link: entries` will link to the `/entries` overview page. `link: https://bolt.cm` will link to that external website.
`submenu`	defines a submenu. In the submenu you can define other items, with the same options as before.

To insert a menu in your templates, use

{{ menu() }}

If you have more than one menu, you should use its name to make sure you get the intended one:

{{ menu('foo') }}

Much more information on rendering menus in your templates can be found on the page on menus in the Twig Components section.

Other pages in this section:

Edit this page on GitHub

Couldn't find what you were looking for? We are happy to help you in the forum, on Slack or on Github.