Dropdown
Getting Started
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)
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
{% include "@bolt-components-nav/nav.twig" with {
links: [
{
text: "Link 1 Text",
url": "#!"
},
{
text: "Link 2 Text",
url": "#!"
},
{
text: "Link 3 Text",
url": "#!"
}
]
} only %}
Schema
| Name | Type | Value(s) | Description | Default |
|---|---|---|---|---|
| title | string
| |
The toggle title text |
N/A |
| center | boolean
| |
|
false
|
| collapse | boolean
| |
|
false
|
| content | any
| |
All of the items in the dropdown -- generally works by including |
N/A |