dropdown docs

2.15.0

Dropdown

Dropdown Component

Published

History
View changes
Install
yarn add @bolt/components-dropdown
Source code
View on Github
Dependencies
@bolt/components-icon @bolt/core-v3.x 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)

Overview Usage Schema Edit this page

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

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 —
  • —

dropdown

  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text

dropdown center

  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text

dropdown collapse

  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text

dropdown collapse center

  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text
  • Link 5 Text
  • Link 6 Text
  • Link 7 Text
  • Link 8 Text

dropdown theme variations

  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text
  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text
  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text
  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text
  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text

dropdown long header

  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text
  • Link 5 Text
  • Link 6 Text
  • Link 7 Text
  • Link 8 Text

dropdown custom element demo collection

Default Dropdown

  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text

Center

  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text

Collapse

  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text

Collapse and Center

  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text

Theme Variations

  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text
  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text
  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text
  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text
  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text

Extra Long Header

  • Link 1 Text
  • Link 2 Text
  • Link 3 Text
  • Link 4 Text
  • Link 5 Text
  • Link 6 Text
  • Link 7 Text
  • Link 8 Text
Debug Panel