side nav docs

Side Nav

Secondary navigation that resides on the sidebar of a page layout.

Published Last updated: 5.5.0 Change log Github NPM
Twig Usage
// List item template
{% set list_items %}
  {% set icon_external_link %}
    {% include '@bolt-elements-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 %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Side Nav (side-nav.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

object
content *

Content of the side nav. side-nav-ul template is expected here.

any
headline

Set the title of the side nav.

object
    • content

      Text content of the headline.

    • link_attributes

      A Drupal attributes object. Applies extra HTML attributes to the link element.

Side Nav ul (side-nav-ul.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

object
content *

Content of the side nav list. side-nav-li template is expected here.

any
Side Nav li (side-nav-li.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

object
link

Set a nav link item.

object
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the link element.

    • content

      Text content of the link.

    • icon

      Set an icon after the link text. Use this to indicate external links. Do not use this if the link has children.

children

Render the nested children links. side-nav-ul template is expected here.

object
current

Indicate the link item as the current page.

boolean
expanded

Set the nested children links to be expanded by default. This only applies if the children is also set.

boolean
Install Install
npm install @bolt/components-side-nav
Dependencies @bolt/components-icon @bolt/core-v3.x

side nav

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-elements-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.