side nav docs

Side Nav

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

Published Last updated: 4.4.0 Change log Github NPM
Twig Usage 
// 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://pega.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://pega.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-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://pega.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://pega.com',
    },
  },
  content: list, // Pass list in here.
} only %}
HTML
Not available in plain HTML. Please use Twig.