dropdown docs

2.24.0

Dropdown

Dropdown Component

The Dropdown component adds a slick, extensible, and accessible menu system.

Install via NPM
npm install @bolt/components-dropdown

Description

Fully interactive with and without JS enabled (including keyboard support)

  // 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>

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

dropdown

Open Dropdown Close Dropdown

dropdown center

Open Dropdown Close Dropdown

dropdown collapse

Open Dropdown Close Dropdown

Open Dropdown Close Dropdown

Open Dropdown Close Dropdown

Open Dropdown Close Dropdown

Open Dropdown Close Dropdown

Open Dropdown Close Dropdown

Open Dropdown Close Dropdown

dropdown long header

Open Dropdown Close Dropdown

Default Dropdown

Center

Collapse

Collapse and Center

Theme Variations

Extra Long Header

Debug Panel