Dropdown

A responsive menu.

Published Last updated: 2.25.1 Change log Github NPM
Twig Usage // Via Twig {% embed "@bolt-components-dropdown/dropdown.twig" with { title: "Toggle Menu", collapse: true } %} {% block content %} {% include "@bolt-components-nav/nav.twig" with { links: [ { text: "Link 1 Text", url": "#!" }, { text: "Link 2 Text", url": "#!" }, { text: "Link 3 Text", url": "#!" } ] } %} {% endblock %} {% endembed %} // Via Web Component and Twig <bolt-dropdown title="Custom Element w/ Collapse &amp; Center" > {% include "@bolt-components-nav/nav.twig" with { links: [ { text: "Link 1 Text", url": "#!" }, { text: "Link 2 Text", url": "#!" }, { text: "Link 3 Text", url": "#!" } ] } only %} </bolt-dropdown> Schema Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
title

The toggle title text

 string —
  • —
center

True to center the toggle title

 boolean false
  • —
collapse

True to hide toggle until mobile screen size

 boolean false
  • —
content

All of the items in the dropdown -- generally works by including @bolt-components-nav/nav.twig with links array of objects containing text & url

 any —
  • —
Install Install npm install @bolt/components-dropdown Dependencies @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue classnames ev-emitter handorgel