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.