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