Dropdowns are toggled, contextual overlays that give users options to perform actions or follow links. They are toggled by clicking and not hovering. Use Dropdowns in menus, forms, or mobile layouts.
AccessibilityDo not forget to add the aria attributes to your `.st-dropdown_toggle` element. `aria-expanded` will be toggled true|false upon user interaction.
The basic dropdown is created by adding the class
.st-dropdown to a wrapper element.
Inside that wrapper element, you will also need to add a link or button with the class
.st-dropdown_toggle and a
.st-dropdown_menu that contains
You can use either a link or a button for your toggle. In the second example, we are using the
Of course, you can and should modify your dropdown with any additional classes and stylings. However, we have provided a couple built-in modifier classes.
You might not want the
.st-dropdown_header element inside the menu. In this case, the menu needs to pop out below the toggle element, providing an object for user interaction.
Add the class
.dropdown--no-header to the
.st-dropdown element and omit the header element in your markup.
You can omit the icons on the toggle and header element by adding the class
.dropdown--no-icon to the
You can use a dropdown inside an existing menu. The
.st-dropdown can be assigned to a
div element and
.st-dropdowwn_toggle can be applied to your menu item.
Keep in mind that the
prevent_default() so your top level menu item should not be a followable link; it only toggles state of your dropdown.
Any sibling dropdown element will be toggled off by interacting with another sibling dropdown.
To use Dropdowns, you will need to
new Dropdown object.
Depending on what browsers you need to support, you might need to use Babel to transpile your code to ES5. If you are
using Webpack, you can also set up an alias to point your
import Dropdown from 'Dropdown' statements to the copy of
the PL in
node_modules. Here is an example of a Webpack config file (webpack.config.js) that does that:
Changing the Dropdown’s styling
The example below uses the necessary classes to display a basic dropdown. We’ve added the
my-dropdown class to allow us to target the component for our own styles.
This example includes both the CSS and HTML for recreating the dropdown.