Pattern Library

Components

Dropdown

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.

Basic Dropdown

Accessibility

Do 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 .st-dropdown_items.

You can use either a link or a button for your toggle. In the second example, we are using the .st-button.

Header

Header

Modifiers

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.

Without Header

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.

Without Icon

You can omit the icons on the toggle and header element by adding the class .dropdown--no-icon to the .st-dropdown element.

Header

In Menus

You can use a dropdown inside an existing menu. The .st-dropdown can be assigned to a li or div element and .st-dropdowwn_toggle can be applied to your menu item.

Keep in mind that the .st-dropdown_toggle will 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.

Usage

To use Dropdowns, you will need to import the Dropdown JavaScript class in your main JS file and instantiate a new Dropdown object.

import Dropdown from 'Dropdown' new Dropdown(document.getElementById('#my-dropdown'))

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:

const path = require('path'); module.exports = { mode: 'production', entry: './js/path/to/index.js', output: { path: path.resolve(__dirname, 'path/to/dist'), filename: 'yourFileName.js' }, module: { rules: [{ use: [{ loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } }] }] }, resolve: { alias: { Dropdown: path.resolve(__dirname, 'node_modules/st-ui/js/Dropdown.js') }, } };

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.

My Account