Design Kit

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.

Examples

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 a chi-dropdown class, or otherwise, the activator must reference the dropdown with a data-target attribute. Use the chi-dropdown__trigger class on your activator button to make the chevron appear.

Base

Trigger and dropdown enclosed in the same div.

Element 1Element 2Element 3Element 4
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-dropdown">
  <button id="dropdown-1" class="chi-button chi-dropdown__trigger">Dropdown component</button>
  <div class="chi-dropdown__menu">
    <a class="chi-dropdown__menu-item" href="#">Element 1</a>
    <a class="chi-dropdown__menu-item" href="#">Element 2</a>
    <a class="chi-dropdown__menu-item" href="#">Element 3</a>
  </div>
</div>

<script>chi.dropdown(document.getElementById('dropdown-1'));</script>

Data-target

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

There is no need for proximity between elements.

Element 1Element 2Element 3Element 4
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<button id="dropdown-2" class="chi-button chi-dropdown__trigger" data-target="#dropdown-2-menu">Dropdown component</button>
<p class="-text">There is no need for proximity between elements.</p>
<div class="chi-dropdown__menu" id="dropdown-2-menu">
  <a class="chi-dropdown__menu-item" href="#">Element 1</a>
  <a class="chi-dropdown__menu-item" href="#">Element 2</a>
  <a class="chi-dropdown__menu-item" href="#">Element 3</a>
  <a class="chi-dropdown__menu-item" href="#">Element 4</a>
</div>

<script>chi.dropdown(document.getElementById('dropdown-2'));</script>

Hover

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

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

Animate

Triggers can be animated by applying the -animate class.

Element 1Element 2Element 3
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-dropdown">
  <button id="dropdown-animate" class="chi-button chi-dropdown__trigger -animate">Animated dropdown trigger</button>
  <div class="chi-dropdown__menu">
    <a class="chi-dropdown__menu-item" href="#">Element 1</a>
    <a class="chi-dropdown__menu-item" href="#">Element 2</a>
    <a class="chi-dropdown__menu-item" href="#">Element 3</a>
  </div>
</div>

<script>chi.dropdown(document.getElementById('dropdown-animate'));</script>

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.

Element 1Element 2Element 3
Element 1Element 2Element 3
Element 1Element 2Element 3
Element 1Element 2Element 3
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-dropdown">
  <button class="chi-button chi-dropdown__trigger" id="dropdown-3" data-position="bottom">Drop-down</button>
  <div class="chi-dropdown__menu">
    <a class="chi-dropdown__menu-item" href="#">Element 1</a>
    <a class="chi-dropdown__menu-item" href="#">Element 2</a>
    <a class="chi-dropdown__menu-item" href="#">Element 3</a>
  </div>
</div>
<div class="chi-dropdown">
  <button class="chi-button chi-dropdown__trigger" id="droptop" data-position="top">Drop-top</button>
  <div class="chi-dropdown__menu">
    <a class="chi-dropdown__menu-item" href="#">Element 1</a>
    <a class="chi-dropdown__menu-item" href="#">Element 2</a>
    <a class="chi-dropdown__menu-item" href="#">Element 3</a>
  </div>
</div>
<div class="chi-dropdown">
  <button class="chi-button chi-dropdown__trigger" id="dropleft" data-position="left">Drop-left</button>
  <div class="chi-dropdown__menu">
    <a class="chi-dropdown__menu-item" href="#">Element 1</a>
    <a class="chi-dropdown__menu-item" href="#">Element 2</a>
    <a class="chi-dropdown__menu-item" href="#">Element 3</a>
  </div>
</div>
<div class="chi-dropdown">
  <button class="chi-button chi-dropdown__trigger" id="dropright" data-position="right">Drop-right</button>
  <div class="chi-dropdown__menu">
    <a class="chi-dropdown__menu-item" href="#">Element 1</a>
    <a class="chi-dropdown__menu-item" href="#">Element 2</a>
    <a class="chi-dropdown__menu-item" href="#">Element 3</a>
  </div>
</div>

<script>
  chi.dropdown(document.getElementById('dropdown-3'));
  chi.dropdown(document.getElementById('droptop'));
  chi.dropdown(document.getElementById('dropleft'));
  chi.dropdown(document.getElementById('dropright'));
</script>

Menu

Menu item states

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

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

Divider

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

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

Icons

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

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

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.

Element 1Element 2Element 3Element 4
<div class="chi-dropdown__menu">
  <div class="chi-input__wrapper -icon--left chi-dropdown__menu-item" role="search">
    <input class="chi-input" type="text" placeholder="Search" aria-label="Search">
    <i class="chi-icon icon-search"></i>
  </div>
  <a class="chi-dropdown__menu-item" href="#">Element 1</a>
  <a class="chi-dropdown__menu-item" href="#">Element 2</a>
  <a class="chi-dropdown__menu-item" href="#">Element 3</a>
  <a class="chi-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="chi-dropdown__menu">
  <div class="chi-dropdown__menu-item">
    <div class="chi-checkbox">
      <input class="chi-checkbox__input" type="checkbox" id="checkbox1">
      <label class="chi-checkbox__label" for="checkbox1">Element 1</label>
    </div>
  </div>
  <div class="chi-dropdown__menu-item">
    <div class="chi-checkbox">
      <input class="chi-checkbox__input" type="checkbox" id="checkbox2" disabled>
      <label class="chi-checkbox__label" for="checkbox2">Element 2</label>
    </div>
  </div>
  <div class="chi-dropdown__menu-item">
    <div class="chi-checkbox">
      <input class="chi-checkbox__input" type="checkbox" id="checkbox3" checked>
      <label class="chi-checkbox__label" for="checkbox3">Element 3</label>
    </div>
  </div>
  <div class="chi-dropdown__menu-item">
    <div class="chi-checkbox">
      <input class="chi-checkbox__input" type="checkbox" id="checkbox4">
      <label class="chi-checkbox__label" for="checkbox4">Element 4</label>
    </div>
  </div>
</div>

With Icons

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

Radio Buttons

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

Range Input

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

Toggle Switch

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

Plain Text

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

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

Helpers

Truncate long menu-items

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

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

Flexible height

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

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

JavaScript

Properties

Preventing memory leaks

Dropdown components have a dispose function to free all resources attached to the element, such as event listeners and object data. You must call this method when you want to remove the component.

var elem = document.getElementById('dropdown-3');
var dropdown = chi.dropdown(elem);
// do stuff
dropdown.dispose();

It is safe to call the dropdown method more than once, as it will return any previously created dropdown component associated to the trigger.

var elem = document.getElementById('dropdown-4');
var dropdown = chi.dropdown(elem);
var elem2 = document.getElementById('dropdown-4');
var dropdown2 = chi.dropdown(elem2);
dropdown === dropdown2; // returns true

dropdown.dispose(); // Only have to do it once.

Accessibility

Accessibility guidelines coming soon