side nav docs

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

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 {% 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 %}
HTML
Not available in plain HTML. Please use Twig.