{% 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 %}kebab-case.
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
title
|
The toggle title text |
string
| — |
|
|
center
|
|
boolean
|
false
|
|
|
collapse
|
|
boolean
|
false
|
|
|
content
|
All of the items in the dropdown -- generally works by including |
any
| — |
|
npm install @bolt/components-dropdown<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><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>