Dropdown

Dropdowns contain and give access to a list of buttons or other elements hidden by default. They are commonly used for menus in web applications.

This component requires Javascript

Using Dropdowns

A dropdown must be associated to an activator, commonly a button, which, at the time of being clicked, expands the dropdown. Activator and dropdown should be contained in a div with an m-dropdown class, or otherwise, the activator must reference the dropdown with a data-target attribute.

Use the m-dropdown__trigger class on your activator button to make the chevron appear.

Example 1

Trigger and dropdown enclosed in the same div.

Initial
Expanded

<div class="m-dropdown">
  <button class="a-btn m-dropdown__trigger">Dropdown component</button>
  <div class="m-dropdown__menu">
    <a class="m-dropdown__menu-item" href="#">Element 1</a>
    <a class="m-dropdown__menu-item" href="#">Element 2</a>
    <a class="m-dropdown__menu-item" href="#">Element 3</a>
  </div>
</div>

<div class="m-dropdown">
  <button class="a-btn m-dropdown__trigger -active">Dropdown component</button>
  <div class="m-dropdown__menu -active">
    <a class="m-dropdown__menu-item" href="#">Element 1</a>
    <a class="m-dropdown__menu-item" href="#">Element 2</a>
    <a class="m-dropdown__menu-item" href="#">Element 3</a>
  </div>
</div>

Example 2

Dropdown referenced by a data-target attribute in the activator.

Initial
Expanded

There is no need for proximity between elements.

<div class="-p--3">
  <button class="a-btn m-dropdown__trigger" data-target="#dropdown-1">Dropdown component</button>
  <p class="-text">There is no need for proximity between elements.</p>
  <div class="m-dropdown__menu" id="dropdown-1">
    <a class="m-dropdown__menu-item" href="#">Element 1</a>
    <a class="m-dropdown__menu-item" href="#">Element 2</a>
    <a class="m-dropdown__menu-item" href="#">Element 3</a>
    <a class="m-dropdown__menu-item" href="#">Element 4</a>
  </div>
</div>

There is no need for proximity between elements.

<div class="-p--3">
  <button class="a-btn m-dropdown__trigger -active" data-target="#dropdown-1">Dropdown component</button>
  <p class="-text">There is no need for proximity between elements.</p>
  <div class="m-dropdown__menu -active" id="dropdown-1">
    <a class="m-dropdown__menu-item" href="#">Element 1</a>
    <a class="m-dropdown__menu-item" href="#">Element 2</a>
    <a class="m-dropdown__menu-item" href="#">Element 3</a>
    <a class="m-dropdown__menu-item" href="#">Element 4</a>
  </div>
</div>

Example 3

Dropdown on hover is only supported when trigger and dropdown elements are enclosed in the same div. Use the m-dropdown__hover class to achieve this.

<div class="m-dropdown m-dropdown__hover">
  <button class="a-btn m-dropdown__trigger">Dropdown component</button>
  <div class="m-dropdown__menu">
    <a class="m-dropdown__menu-item" href="#">Element 1</a>
    <a class="m-dropdown__menu-item" href="#">Element 2</a>
    <a class="m-dropdown__menu-item" href="#">Element 3</a>
  </div>
</div>

Divider

Several menu items can be arranged together by using a divider. Use the a-divider component.

Example

<div class="m-dropdown__menu">
  <a class="m-dropdown__menu-item" href="#">Element 1</a>
  <a class="m-dropdown__menu-item" href="#">Element 2</a>
  <a class="m-dropdown__menu-item" href="#">Element 3</a>
  <div class="a-divider"></div>
  <a class="m-dropdown__menu-item" href="#">Element 4</a>
</div>

Menu item states

Each menu item can be in one of four item states normal, active, disabled and hover.

Example

<div class="m-dropdown__menu">
  <a class="m-dropdown__menu-item" href="#">Normal element</a>
  <a class="m-dropdown__menu-item -active" href="#">Active element</a>
  <a class="m-dropdown__menu-item -disabled" href="#">Disabled element</a>
  <a class="m-dropdown__menu-item -hover" href="#">Hovered item</a>
</div>

Icons

Dropdown component has been developed to support Chi icons in the menu items.

Example

<div class="m-dropdown__menu">
  <a class="m-dropdown__menu-item" href="#">
    <i class="a-icon icon-file-outline"></i>New
  </a>
  <a class="m-dropdown__menu-item -disabled" href="#">
    <i class="a-icon icon-arrow-to-bottom"></i>Save
  </a>
  <div class="a-divider"></div>
  <a class="m-dropdown__menu-item" href="#">
    <i class="a-icon icon-mail"></i>Send
  </a>
  <a class="m-dropdown__menu-item -active" href="#">
    <i class="a-icon icon-cart"></i>Buy
  </a>
  <a class="m-dropdown__menu-item" href="#">
    <i class="a-icon icon-users"></i>Share
  </a>
  <div class="a-divider"></div>
  <a class="m-dropdown__menu-item" href="#">
    <i class="a-icon icon-logout"></i>Logout
  </a>
</div>

Form elements

Several kinds of form items can be added inside the dropdown menu.

Search box

This search box is a special kind of text input prepared to be located on top of the menu-item. It has slightly smaller padding at the sides.

<div class="m-dropdown__menu">
  <div class="m-input__wrapper -icon--left m-dropdown__menu-item" role="search">
    <input class="a-input" type="text" placeholder="Search" aria-label="Search">
    <i class="a-icon icon-search"></i>
  </div>
  <a class="m-dropdown__menu-item" href="#">Element 1</a>
  <a class="m-dropdown__menu-item" href="#">Element 2</a>
  <a class="m-dropdown__menu-item" href="#">Element 3</a>
  <a class="m-dropdown__menu-item" href="#">Element 4</a>
</div>

Checkboxes

Two versions of checkboxes, with and without icon have been included in the library to be used as menu items.

Base

<div class="m-dropdown__menu">
  <div class="m-dropdown__menu-item">
    <div class="a-checkbox">
      <input class="a-checkbox__input" type="checkbox" id="checkbox1">
      <label class="a-checkbox__label" for="checkbox1">Element 1</label>
    </div>
  </div>
  <div class="m-dropdown__menu-item">
    <div class="a-checkbox">
      <input class="a-checkbox__input" type="checkbox" id="checkbox2" disabled>
      <label class="a-checkbox__label" for="checkbox2">Element 2</label>
    </div>
  </div>
  <div class="m-dropdown__menu-item">
    <div class="a-checkbox">
      <input class="a-checkbox__input" type="checkbox" id="checkbox3" checked>
      <label class="a-checkbox__label" for="checkbox3">Element 3</label>
    </div>
  </div>
  <div class="m-dropdown__menu-item">
    <div class="a-checkbox">
      <input class="a-checkbox__input" type="checkbox" id="checkbox4">
      <label class="a-checkbox__label" for="checkbox4">Element 4</label>
    </div>
  </div>
</div>

With Icons

<div class="m-dropdown__menu">
  <div class="m-dropdown__menu-item">
    <div class="a-checkbox">
      <input class="a-checkbox__input" type="checkbox" id="checkbox1">
      <label class="a-checkbox__label" for="checkbox1">
        <i class="a-icon icon-logo-centurylink"></i>
        Element 1
      </label>
    </div>
  </div>
  <div class="m-dropdown__menu-item">
    <div class="a-checkbox">
      <input class="a-checkbox__input" type="checkbox" id="checkbox2" disabled>
      <label class="a-checkbox__label" for="checkbox2">
        <i class="a-icon icon-logo-centurylink"></i>
        Element 2
      </label>
    </div>
  </div>
  <div class="m-dropdown__menu-item">
    <div class="a-checkbox">
      <input class="a-checkbox__input" type="checkbox" id="checkbox3" checked>
      <label class="a-checkbox__label" for="checkbox3">
        <i class="a-icon icon-logo-centurylink"></i>
        Element 3
      </label>
    </div>
  </div>
  <div class="m-dropdown__menu-item">
    <div class="a-checkbox">
      <input class="a-checkbox__input" type="checkbox" id="checkbox4">
      <label class="a-checkbox__label" for="checkbox4">
        <i class="a-icon icon-logo-centurylink"></i>
        Element 4
      </label>
    </div>
  </div>
</div>

Plain Text

Use a span tag to include text without rendering as a link.

<div class="m-dropdown__menu">
  <span class="m-dropdown__menu-item">Text 1</span>
  <span class="m-dropdown__menu-item">Text 2</span>
  <span class="m-dropdown__menu-item">Text 3</span>
  <span class="m-dropdown__menu-item">Text 4</span>
</div>

Radio Buttons

<div class="m-dropdown__menu">
  <fieldset>
    <legend class="m-dropdown__menu-item">Select an option</legend>
    <div class="m-dropdown__menu-item">
      <div class="a-radio">
        <input class="a-radio__input" type="radio" name="radios" id="radio1">
        <label class="a-radio__label" for="radio1">Radio Button 1</label>
      </div>
    </div>
    <div class="m-dropdown__menu-item">
      <div class="a-radio">
        <input class="a-radio__input" type="radio" name="radios" id="radio2" disabled>
        <label class="a-radio__label" for="radio2">Disabled Radio Button 2</label>
      </div>
    </div>
    <div class="m-dropdown__menu-item">
      <div class="a-radio">
        <input class="a-radio__input" type="radio" name="radios" id="radio3">
        <label class="a-radio__label" for="radio3">Radio Button 3</label>
      </div>
    </div>
    <div class="m-dropdown__menu-item">
      <div class="a-radio">
        <input class="a-radio__input" type="radio" name="radios" id="radio4">
        <label class="a-radio__label" for="radio4">Radio Button 4</label>
      </div>
    </div>
  </fieldset>
</div>

Text Input

<div class="m-dropdown__menu">
  <a class="m-dropdown__menu-item" href="#">Option 1</a>
  <a class="m-dropdown__menu-item" href="#">Option 2</a>
  <div class="a-divider"></div>
  <div class="m-dropdown__menu-item">
    <input class="a-input" type="text" placeholder="Placeholder" aria-label="Text input description">
  </div>
</div>

Range Input

<div class="m-dropdown__menu">
  <div class="m-dropdown__menu-item">
    <span class="-text -mr--2">200GB</span>
    <input class="a-input" type="range" aria-label="Range description">
    <span class="-text -ml--2">5TB</span>
  </div>
  <div class="a-divider"></div>
  <legend class="m-dropdown__menu-item">Select range</legend>
  <div class="m-dropdown__menu-item">
    <input class="a-input" type="range" aria-label="Range description">
  </div>
</div>

Toggle Switch

<div class="m-dropdown__menu">
  <fieldset>
    <legend class="m-dropdown__menu-item">Configure options</legend>
    <div class="m-dropdown__menu-item">
      <div class="m-form__item">
        <label class="a-switch" for="toggle-mail">
          <input type="checkbox" class="a-switch__input" id="toggle-mail">
          <span class="a-switch__content">
            <span class="a-switch__thumb"></span>
          </span>
          <span class="a-switch__label">Email notifications</span>
        </label>
      </div>
    </div>
    <div class="m-dropdown__menu-item">
      <div class="m-form__item">
        <label class="a-switch" for="toggle-tlf">
          <input type="checkbox" class="a-switch__input" id="toggle-tlf">
          <span class="a-switch__content">
            <span class="a-switch__thumb"></span>
          </span>
          <span class="a-switch__label">Phone notifications</span>
        </label>
      </div>
    </div>
    <div class="m-dropdown__menu-item">
      <div class="m-form__item">
        <label class="a-switch" for="toggle-app">
          <input type="checkbox" class="a-switch__input" id="toggle-mail">
          <span class="a-switch__content">
            <span class="a-switch__thumb"></span>
          </span>
          <span class="a-switch__label">Email notifications</span>
        </label>
      </div>
    </div>
  </fieldset>
</div>

Helpers

Truncate long menu-items

Wrap the menu-item content in a div with the class -flex--ellipsis to truncate long strings.

<div class="m-dropdown__menu" style="width:10rem">
  <a class="m-dropdown__menu-item" href="#">Element 1</a>
  <a class="m-dropdown__menu-item" href="#">Element 2</a>
  <a class="m-dropdown__menu-item" href="#">
    <div class="-flex--ellipsis">Long text element 3</div>
  </a>
  <a class="m-dropdown__menu-item" href="#">Element 4</a>
</div>

Flexible height

Add the class -h--auto to set menu item height to auto.

<div class="m-dropdown__menu" style="width:10rem">
  <a class="m-dropdown__menu-item" href="#">Option 1</a>
  <div class="m-dropdown__menu-item -h--auto -py--1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <a class="m-dropdown__menu-item" href="#">Option 2</a>
</div>

Animation

Triggers can be animated by applying the -animate class.

<div class="m-dropdown">
  <button class="a-btn m-dropdown__trigger -animate">Animated dropdown trigger</button>
  <div class="m-dropdown__menu">
    <a class="m-dropdown__menu-item" href="#">Element 1</a>
    <a class="m-dropdown__menu-item" href="#">Element 2</a>
    <a class="m-dropdown__menu-item" href="#">Element 3</a>
  </div>
</div>

<div class="m-dropdown">
  <button class="a-btn m-dropdown__trigger -animate -active">Animated dropdown trigger</button>
  <div class="m-dropdown__menu -active">
    <a class="m-dropdown__menu-item" href="#">Element 1</a>
    <a class="m-dropdown__menu-item" href="#">Element 2</a>
    <a class="m-dropdown__menu-item" href="#">Element 3</a>
  </div>
</div>

Positioning

Dropdown is prepared to work with positioning libraries like Popper.js. That is why we support the data-position attribute. Chevron orientation will change depending on its value. Valid values are default, initial, top, right, bottom, left, top-start, top-end, right-start, right-end, bottom-start, bottom-end, left-start, left-end.

<div class="m-dropdown">
  <button class="a-btn m-dropdown__trigger" data-position="bottom">Drop-down</button>
  <div class="m-dropdown__menu">
    <a class="m-dropdown__menu-item" href="#">Element 1</a>
    <a class="m-dropdown__menu-item" href="#">Element 2</a>
    <a class="m-dropdown__menu-item" href="#">Element 3</a>
  </div>
</div>