dropdown docs

Dropdown

A responsive menu.

Published Last updated: 4.4.0 Change log Github NPM
Twig Usage
  {% embed '@bolt-components-dropdown/dropdown.twig' with {
  title: 'Toggle Menu',
  collapse: true
} %}
  {% block content %}
    {% include '@bolt-components-list/list.twig' with {
      inset: true,
      spacing: 'small',
      items: [
        include('@bolt-elements-text-link/text-link.twig', {
          content: 'Link 1',
          attributes: {
            href: '#!'
          }
        }),
        include('@bolt-elements-text-link/text-link.twig', {
          content: 'Link 2',
          attributes: {
            href: '#!'
          }
        }),
        include('@bolt-elements-text-link/text-link.twig', {
          content: 'Link 3',
          attributes: {
            href: '#!'
          }
        }),
      ]
    } only %}
  {% endblock %}
{% endembed %}
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

dropdown

dropdown center

dropdown collapse

dropdown collapse center

Open Dropdown Close Dropdown

dropdown theme variations

dropdown long header

Open Dropdown Close Dropdown

dropdown web component

Web Component Usage Bolt Dropdown is a web component, you can simply use <bolt-dropdown> in the markup to make it render.
<bolt-dropdown title="This is a dropdown"> <bolt-list spacing="small" inset> <bolt-list-item> <a href="#!" class="e-bolt-text-link">Link 1</a> </bolt-list-item> <bolt-list-item> <a href="#!" class="e-bolt-text-link">Link 2</a> </bolt-list-item> <bolt-list-item> <a href="#!" class="e-bolt-text-link">Link 3</a> </bolt-list-item> </bolt-list> </bolt-dropdown>
Prop Usage Configure the dropdown with the properties specified in the schema.
<bolt-dropdown title="This is a dropdown" center collapse> <bolt-list spacing="small" inset> <bolt-list-item> <a href="#!" class="e-bolt-text-link">Link 1</a> </bolt-list-item> <bolt-list-item> <a href="#!" class="e-bolt-text-link">Link 2</a> </bolt-list-item> <bolt-list-item> <a href="#!" class="e-bolt-text-link">Link 3</a> </bolt-list-item> </bolt-list> </bolt-dropdown>