Bolt Design System

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

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

npm install @bolt/components-side-nav

Dependencies

@bolt/components-icon

@bolt/core-v3.x

Side Nav

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