Dropdowns

Documentation of dropdowns and thiers variations.

Files

app/styles/components/dropdown/config.scss
app/styles/components/dropdown/style.scss

Dropdown

Basic dropdown

Dropdown components usualy hides extended functionality behind action, which opens dropdowns. Dropdown is build with .dropdown class. Expaneded state is set with aria-expanded="true" attribute. Example of basic dropdown list is shown below. Example also contains basic usage with dropdown buttons.

Javascript dependency

Dropdown copmonent require:

Toggle javascript module:app/scripts/modules/Toggle.js.
Initialized by default in: app/scripts/main.js file.

Dropdown javascript module:app/scripts/modules/Dropdown.js.
Initialized by default in: app/scripts/main.js file.

Example:

Code:

<div class="dropdown" data-dropdown aria-expanded="false">
  <a class="dropdown__item" href="#">...</a>
  ...
</div>

<!-- expanded -->
<div class="dropdown" data-dropdown aria-expanded="true">

Interactive dropdown

Dropdown menu with Interactive functionality eg. forms, buttons etc. should not close after click inside of dropdown component. This can be achieved with attribute [data-dropdown-interactive].

Note

Disable max height of dropdown with .dropdown--nowrap class.

Note

Add padding to dropdown with .dropdown--space class.

Example:

Code:

<div class="dropdown dropdown--nowrap dropdown--space" data-dropdown data-dropdown-interactive>
  ...
</div>

Dropdown position and offset

Dropdown positioning

By default, the dropdown expands downwards and spans the whole width of the button or more if needed and expands to the right. This behaviour can be modified by using .dropdown--top and .dropdown--left.

Example:

Code:

<div class="dropdown" data-dropdown>
  ...
</div>

<div class="dropdown dropdown--left" data-dropdown>
  ...
</div>
<div class="dropdown dropdown--center" data-dropdown>
  ...
</div>

<div class="dropdown dropdown--top" data-dropdown>
  ...
</div>

<div class="dropdown dropdown--left dropdown--top" data-dropdown>
  ...
</div>

Dropdown offset

Drodown panes can be offset horizontally and vertically using .dropdown--offset-horizontal and .dropdown--offset-vertical.

Note that vertical offset is negative.

Example:

Code:

<div class="dropdown dropdown--offset-horizontal" data-dropdown>
  ...
</div>

<div class="dropdown dropdown--left dropdown--offset-horizontal" data-dropdown>
  ...
</div>

<div class="dropdown dropdown--offset-vertical" data-dropdown>
  ...
</div>

<div class="dropdown dropdown--left dropdown--top dropdown--offset-horizontal dropdown--offset-vertical" data-dropdown>
  ...
</div>

Dropdown items

Default .dropdown__items are great for simple dropdowns. To create some structure, there is .dropdown__heading and .dropdown__divider. Each accepts a --space modifier to add some horizontal space.

Example:

Code:

<div class="dropdown" data-dropdown>
  <div class="dropdown__heading">Heading</div>
  <a href="#" class="dropdown__item">Item 1</a>
  <hr class="dropdown__divider">
  <a href="#" class="dropdown__item">Item 2</a>
  <hr class="dropdown__divider">
  <a href="#" class="dropdown__item">Item 3</a>
</div>

<div class="dropdown" data-dropdown>
  <div class="dropdown__heading dropdown__heading--space">Heading</div>
  <a href="#" class="dropdown__item dropdown__item--space">Item 1</a>
  <hr class="dropdown__divider dropdown__divider--space">
  <a href="#" class="dropdown__item dropdown__item--space">Item 2</a>
  <hr class="dropdown__divider dropdown__divider--space">
  <a href="#" class="dropdown__item dropdown__item--space">Item 3</a>
</div>