Sub Navigation

The SubNavigation component displays a list of categories and navigation items. It will also neatly wrap itself up on smaller screens.

Open this example in a new tab

View the code for this example

{% from 'includes/subNavigation.njk' import subNavigation as subNavigation %}

{{ subNavigation({
  id: 'example-subNavigation',
  title: 'Example Sub Navigation',
  items: [
    {
      title: 'Recent articles',
      items: collections['articles'].slice(0,5)
    }, {
      title: 'Older articles',
      items: collections['articles'].slice(5,10)
    }
  ]
}) }}

Nunjucks Macro parameters

Name	Type	Description
`id`	string	Required. A unique identifier for the menu
`title`	string	Required. A title that helps users identify the links in the menu.
`items`	object	Required. The navigation items object
`items.title`	string	Required. The section title
`items.items`	11ty collection	Required. Pass a collection, all the items will be linked-to in this section.