2.5.1

Dropdown

Dropdown Component

Published

History
View changes
Install
yarn add @bolt/components-dropdown
Source code
View on Github
Dependencies
@bolt/components-icon @bolt/core classnames ev-emitter handorgel

Overview

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

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 —
  • —
Overview Usage Schema Edit this page