Basic Side Nav Side nav is a secondary navigation. It is commonly used in documentation design. Important Notes: Although nesting is possible, it is not recommended to go more than 4 levels deep. Side nav is intended to be used as the left sidebar of a Holy Grail layout. Tech Doc is a great example of using Holy Grail layout, Site layout, Side Nav, Content Pagination, and Article element together. View demo Demo
Twig
// List item template
{% set list_items %}
  {% set icon_external_link %}
    {% include '@bolt-components-icon/icon.twig' with {
      name: 'external-link',
    } only %}
  {% endset %}
  {% include '@bolt-components-side-nav/side-nav-li.twig' with {
    link: {
      content: 'Item text',
      icon: icon_external_link, // Set a custom icon for external link.
      attributes: {
        href: 'https://google.com',
      },
    },
    current: true, // When set to true, the item is indicated as the current page.
    expanded: true, // When set to true, it will show children.
    children: children, // Pass another list in here.
  } only %}
{% endset %}

// List template
{% set list %}
  {% include '@bolt-components-side-nav/side-nav-ul.twig' with {
    content: list_items, // Pass list items in here.
  } only %}
{% endset %}

// Side nav template
{% include '@bolt-components-side-nav/side-nav.twig' with {
  headline: {
    content: 'Headline text',
    link_attributes: {
      href: 'https://google.com',
    },
  },
  content: list, // Pass list in here.
} only %}
HTML
Not available in plain HTML. Please use Twig.