Side Nav

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

Published Last updated: 4.2.1 Change log Github NPM
Twig Usage // List item template {% include '@bolt-components-side-nav/side-nav-li.twig' with { link: { content: 'Item text', 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 %} // List template {% include '@bolt-components-side-nav/side-nav-ul.twig' with { content: content, // Pass list items in here. } only %} // Side nav template {% include '@bolt-components-side-nav/side-nav.twig' with { headline: { content: 'Headline text', link_attributes: { href: 'https://pega.com', }, }, content: content, // 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
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
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
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.

      • —
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