Dropdown
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.
<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="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 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.
<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="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 3</a>
<a class="chi-dropdown__menu-item" href="#">Item 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.
<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="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 3</a>
</div>
</div>
Animate
Triggers can be animated by applying the -animate
class.
<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="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 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
.
<!-- Top start -->
<div class="chi-dropdown">
<button class="chi-button chi-dropdown__trigger" id="dropdown-top-start" data-position="top-start">Top start</button>
<div class="chi-dropdown__menu">
<a class="chi-dropdown__menu-item" href="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 3</a>
</div>
</div>
<!-- Top -->
<div class="chi-dropdown">
<button class="chi-button chi-dropdown__trigger" id="dropdown-top" data-position="top">Top</button>
<div class="chi-dropdown__menu">
<a class="chi-dropdown__menu-item" href="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 3</a>
</div>
</div>
<!-- Top end -->
<div class="chi-dropdown">
<button class="chi-button chi-dropdown__trigger" id="dropdown-top-end" data-position="top-end">Top end</button>
<div class="chi-dropdown__menu">
<a class="chi-dropdown__menu-item" href="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 3</a>
</div>
</div>
<!-- Left start -->
<div class="chi-dropdown">
<button class="chi-button chi-dropdown__trigger" id="dropdown-left-start" data-position="left-start">Left start</button>
<div class="chi-dropdown__menu">
<a class="chi-dropdown__menu-item" href="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 3</a>
</div>
</div>
<!-- Left -->
<div class="chi-dropdown">
<button class="chi-button chi-dropdown__trigger" id="dropdown-left" data-position="left">Left</button>
<div class="chi-dropdown__menu">
<a class="chi-dropdown__menu-item" href="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 3</a>
</div>
</div>
<!-- Left end -->
<div class="chi-dropdown">
<button class="chi-button chi-dropdown__trigger" id="dropdown-left-end" data-position="left-end">Left end</button>
<div class="chi-dropdown__menu">
<a class="chi-dropdown__menu-item" href="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 3</a>
</div>
</div>
<!-- Right start -->
<div class="chi-dropdown">
<button class="chi-button chi-dropdown__trigger" id="dropdown-right-start" data-position="right-start">Right start</button>
<div class="chi-dropdown__menu">
<a class="chi-dropdown__menu-item" href="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 3</a>
</div>
</div>
<!-- Right -->
<div class="chi-dropdown">
<button class="chi-button chi-dropdown__trigger" id="dropdown-right" data-position="right">Right</button>
<div class="chi-dropdown__menu">
<a class="chi-dropdown__menu-item" href="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 3</a>
</div>
</div>
<!-- Right end -->
<div class="chi-dropdown">
<button class="chi-button chi-dropdown__trigger" id="dropdown-right-end" data-position="right-end">Right end</button>
<div class="chi-dropdown__menu">
<a class="chi-dropdown__menu-item" href="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 3</a>
</div>
</div>
<!-- Bottom start -->
<div class="chi-dropdown">
<button class="chi-button chi-dropdown__trigger" id="dropdown-bottom-start" data-position="bottom-start">Bottom start</button>
<div class="chi-dropdown__menu">
<a class="chi-dropdown__menu-item" href="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 3</a>
</div>
</div>
<!-- Bottom -->
<div class="chi-dropdown">
<button class="chi-button chi-dropdown__trigger" id="dropdown-bottom" data-position="bottom">Bottom</button>
<div class="chi-dropdown__menu">
<a class="chi-dropdown__menu-item" href="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 3</a>
</div>
</div>
<!-- Bottom end -->
<div class="chi-dropdown">
<button class="chi-button chi-dropdown__trigger" id="dropdown-bottom-end" data-position="bottom-end">Bottom end</button>
<div class="chi-dropdown__menu">
<a class="chi-dropdown__menu-item" href="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 3</a>
</div>
</div>
<!-- JavaScript -->
<script>chi.dropdown(document.querySelectorAll('.chi-dropdown .chi-dropdown__trigger'));</script>
Menu
Menu item states
Menu items support the following states: initial
, active
, disabled
and
hover
.
<div class="chi-dropdown__menu">
<a class="chi-dropdown__menu-item" href="#">Item</a>
<a class="chi-dropdown__menu-item -active" href="#">Active item</a>
<a class="chi-dropdown__menu-item -disabled" href="#">Disabled item</a>
<a class="chi-dropdown__menu-item -hover" href="#">Hovered item</a>
</div>
Description
<div class="chi-dropdown__menu -list">
<a class="chi-dropdown__menu-item" href="#">
<span class="chi-dropdown__menu-item_title">Item</span>
<span class="chi-dropdown__menu-item_text">Item description</span>
</a>
<a class="chi-dropdown__menu-item -active" href="#">
<span class="chi-dropdown__menu-item_title">Active item</span>
<span class="chi-dropdown__menu-item_text">Item description</span>
</a>
<a class="chi-dropdown__menu-item -disabled" href="#">
<span class="chi-dropdown__menu-item_title">Disabled item</span>
<span class="chi-dropdown__menu-item_text">Item description</span>
</a>
<a class="chi-dropdown__menu-item -hover" href="#">
<span class="chi-dropdown__menu-item_title">Hovered item</span>
<span class="chi-dropdown__menu-item_text">Item description</span>
</a>
</div>
Divider
Several menu items can be arranged together by using a divider. Use the chi-divider
component.
<div class="chi-dropdown__menu">
<a class="chi-dropdown__menu-item" href="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 3</a>
<div class="chi-divider"></div>
<a class="chi-dropdown__menu-item" href="#">Item 4</a>
</div>
Icons
Dropdown component has been developed to support Chi icons in the menu items.
<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.
<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="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">Item 3</a>
<a class="chi-dropdown__menu-item" href="#">Item 4</a>
</div>
Checkboxes
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">Item 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">Item 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">Item 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">Item 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>
Item 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>
Item 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>
Item 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>
Item 4
</label>
</div>
</div>
</div>
Radio Buttons
<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
<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
<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.
<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.
<div class="chi-dropdown__menu" style="width:10rem">
<a class="chi-dropdown__menu-item" href="#">Item 1</a>
<a class="chi-dropdown__menu-item" href="#">Item 2</a>
<a class="chi-dropdown__menu-item" href="#">
<div class="-flex--ellipsis">Item 3 with truncated longer text</div>
</a>
<a class="chi-dropdown__menu-item" href="#">Item 4</a>
</div>
Flexible height
Add the class -h--auto
to set menu item height to auto.
<div class="chi-dropdown__menu" style="width:10rem">
<a class="chi-dropdown__menu-item" href="#">Item 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="#">Item 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.