CenturyLink Logo
CenturyLink
Lumen Logo
Lumen
Lumen Enterprise Portal Logo
Lumen Enterprise Portal

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 with 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

Item 1Item 2Item 3Item 4
<chi-dropdown position="bottom" button="Dropdown, click me">
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 3</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 4</a>
</chi-dropdown>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

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>
    <a class="chi-dropdown__menu-item" href="#">Item 4</a>
  </div>
</div>

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

Additional Styles

The web component accepts the properties color, variant, size, uppercase and disabled to modify the underlying chi-button element behavior and style.

Item 1Item 2Item 3Item 4Item 1Item 2Item 3Item 4Item 1Item 2Item 3Item 4Item 1Item 2Item 3Item 4Item 1
<!-- Primary button -->
<chi-dropdown position='bottom' button='Primary' color='primary'>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 1</a>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 2</a>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 3</a>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 4</a>
</chi-dropdown>

<!-- Primary outline button -->
<chi-dropdown position='bottom' button='Primary outline' color='primary' variant='outline'>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 1</a>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 2</a>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 3</a>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 4</a>
</chi-dropdown>

<!-- Primary flat button -->
<chi-dropdown position='bottom' button='Primary flat' color='primary' variant='flat'>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 1</a>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 2</a>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 3</a>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 4</a>
</chi-dropdown>

<!-- Base flat button -->
<chi-dropdown position='bottom' button='Flat' variant='flat'>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 1</a>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 2</a>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 3</a>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 4</a>
</chi-dropdown>

<!-- Disabled button -->
<chi-dropdown position='bottom' button='Disabled' disabled>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 1</a>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 2</a>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 3</a>
  <a class='chi-dropdown__menu-item' href='#' slot="menu">Item 4</a>
</chi-dropdown>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<!-- Primary button -->
<div class="chi-dropdown">
  <button id="dropdown-styles-1" class="chi-button -primary chi-dropdown__trigger">Dropdown</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>
    <a class="chi-dropdown__menu-item" href="#">Item 4</a>
  </div>
</div>

<!-- Primary outline button -->
<div class="chi-dropdown">
  <button id="dropdown-styles-2" class="chi-button -primary -outline chi-dropdown__trigger">Dropdown</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>
    <a class="chi-dropdown__menu-item" href="#">Item 4</a>
  </div>
</div>

<!-- Primary flat button -->
<div class="chi-dropdown">
  <button id="dropdown-styles-3" class="chi-button -primary -flat chi-dropdown__trigger">Dropdown</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>
    <a class="chi-dropdown__menu-item" href="#">Item 4</a>
  </div>
</div>

<!-- Base flat button -->
<div class="chi-dropdown">
  <button id="dropdown-styles-4" class="chi-button -flat chi-dropdown__trigger">Dropdown</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>
    <a class="chi-dropdown__menu-item" href="#">Item 4</a>
  </div>
</div>

<!-- Disabled button -->
<div class="chi-dropdown">
  <button id="dropdown-styles-4" class="chi-button chi-dropdown__trigger" disabled>Dropdown</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>
    <a class="chi-dropdown__menu-item" href="#">Item 4</a>
  </div>
</div>

<script>chi.dropdown(document.querySelectorAll('.chi-dropdown .chi-button'));</script>

Data-target

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

There is no need for proximity between elements.

Item 1Item 2Item 3Item 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="#">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

Item 1Item 2Item 3
<chi-dropdown hover position="bottom" button="Dropdown component">
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 3</a>
</chi-dropdown>
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

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

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>

Fluid

Use fluid to render Dropdowns that span the full width of the parent container.

Item 1Item 2Item 3Item 4
<chi-dropdown position="bottom" button="Dropdown, click me" fluid>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 3</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 4</a>
</chi-dropdown>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-dropdown -fluid">
  <button id="dropdown-1" class="chi-button chi-dropdown__trigger -fluid">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>
    <a class="chi-dropdown__menu-item" href="#">Item 4</a>
  </div>
</div>

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

Positioning

Dropdown item 1Dropdown item 2Dropdown item 3
Dropdown item 1Dropdown item 2Dropdown item 3
Dropdown item 1Dropdown item 2Dropdown item 3
Dropdown item 1Dropdown item 2Dropdown item 3
Dropdown item 1Dropdown item 2Dropdown item 3
Dropdown item 1Dropdown item 2Dropdown item 3
Click buttons to see Dropdown positions
Dropdown item 1Dropdown item 2Dropdown item 3
Dropdown item 1Dropdown item 2Dropdown item 3
Dropdown item 1Dropdown item 2Dropdown item 3
Dropdown item 1Dropdown item 2Dropdown item 3
Dropdown item 1Dropdown item 2Dropdown item 3
Dropdown item 1Dropdown item 2Dropdown item 3
We support the 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 -->
<chi-dropdown position="top-start" button="Top start">
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 3</a>
</chi-dropdown>
<!-- Top -->
<chi-dropdown position="top" button="Top">
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 3</a>
</chi-dropdown>
<!-- Top end -->
<chi-dropdown position="top-end" button="Top end">
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 3</a>
</chi-dropdown>
<!-- Left start -->
<chi-dropdown position="left-start" button="Left start">
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 3</a>
</chi-dropdown>
<!-- Left -->
<chi-dropdown position="left" button="Left">
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 3</a>
</chi-dropdown>
<!-- Left end -->
<chi-dropdown position="left-end" button="Left end">
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 3</a>
</chi-dropdown>
<!-- Right start -->
<chi-dropdown position="right-start" button="Right start">
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 3</a>
</chi-dropdown>
<!-- Right -->
<chi-dropdown position="right" button="Right">
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 3</a>
</chi-dropdown>
<!-- Right end -->
<chi-dropdown position="right-end" button="Right end">
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 3</a>
</chi-dropdown>
<!-- Bottom start -->
<chi-dropdown position="bottom-start" button="Bottom start">
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 3</a>
</chi-dropdown>
<!-- Bottom -->
<chi-dropdown position="bottom" button="Bottom">
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 3</a>
</chi-dropdown>
<!-- Bottom end -->
<chi-dropdown position="bottom-end" button="Bottom end">
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Dropdown item 3</a>
</chi-dropdown>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

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="#">Dropdown item 1</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown item 2</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown 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="#">Dropdown item 1</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown item 2</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown 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="#">Dropdown item 1</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown item 2</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown 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="#">Dropdown item 1</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown item 2</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown 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="#">Dropdown item 1</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown item 2</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown 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="#">Dropdown item 1</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown item 2</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown 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="#">Dropdown item 1</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown item 2</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown 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="#">Dropdown item 1</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown item 2</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown 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="#">Dropdown item 1</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown item 2</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown 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="#">Dropdown item 1</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown item 2</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown 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="#">Dropdown item 1</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown item 2</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown 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="#">Dropdown item 1</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown item 2</a>
    <a class="chi-dropdown__menu-item" href="#">Dropdown item 3</a>
  </div>
</div>

<!-- JavaScript -->
<script>chi.dropdown(document.querySelectorAll('.chi-dropdown .chi-dropdown__trigger'));</script>

Visible items

Item 1Item 2Item 3Item 4Item 5
<chi-dropdown visible-items="3" button="Dropdown, click me">
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 3</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 4</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 5</a>
</chi-dropdown>
Max-height can be adjusted according to the needs, using styles. This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

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" style="overflow-y: auto; max-height: 7rem">
    <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>
    <a class="chi-dropdown__menu-item" href="#">Item 5</a>
  </div>
</div>

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

Search input

Item 1Item 2Item 3Item 4Item 5
There are two extra slots available for the dropdown menu: menu-header and menu-footer, which places the items inside those slots, accordingly inside the header and footer of dropdown menu.
<chi-dropdown button="Dropdown, click me" visible-items="3">
  <chi-search-input size="sm" placeholder="Search" slot="menu-header"></chi-search-input>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 3</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 4</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 5</a>
</chi-dropdown>

Menu

Menu item states

Menu items support the following states: initial, active, disabled and hover.

ItemActive itemDisabled ItemHovered Item
<chi-dropdown active>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item</a>
  <a class="chi-dropdown__menu-item -active" href="#" slot="menu">Active item</a>
  <a class="chi-dropdown__menu-item -disabled" href="#" slot="menu">Disabled Item</a>
  <a class="chi-dropdown__menu-item -hover" href="#" slot="menu">Hovered Item</a>
</chi-dropdown>
<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

ItemItem descriptionActive ItemItem descriptionDisabled ItemItem descriptionHovered ItemItem description
<chi-dropdown active description>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">
    <span class="chi-dropdown__menu-item_title" slot="menu">Item</span>
    <span class="chi-dropdown__menu-item_text" slot="menu">Item description</span>
  </a>
  <a class="chi-dropdown__menu-item -active" href="#" slot="menu">
    <span class="chi-dropdown__menu-item_title" slot="menu">Active Item</span>
    <span class="chi-dropdown__menu-item_text" slot="menu">Item description</span>
  </a>
  <a class="chi-dropdown__menu-item -disabled" href="#" slot="menu">
    <span class="chi-dropdown__menu-item_title" slot="menu">Disabled Item</span>
    <span class="chi-dropdown__menu-item_text" slot="menu">Item description</span>
  </a>
  <a class="chi-dropdown__menu-item -hover" href="#" slot="menu">
    <span class="chi-dropdown__menu-item_title" slot="menu">Hovered Item</span>
    <span class="chi-dropdown__menu-item_text" slot="menu">Item description</span>
  </a>
</chi-dropdown>
<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.

Item 1Item 2Item 3
Item 4
<chi-dropdown active>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 3</a>
  <div class="chi-divider" slot="menu"></div>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 4</a>
</chi-dropdown>
<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.

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

Search Input

Item 1Item 2Item 3Item 4
<chi-dropdown active>
  <chi-search-input size="sm" placeholder="Search" slot="menu"></chi-search-input>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 3</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 4</a>
</chi-dropdown>

Checkboxes

Base

<chi-dropdown active>
  <div class="chi-dropdown__menu-item" slot="menu">
    <chi-checkbox id="checkbox1" label="Item 1"></chi-checkbox>
  </div>
  <div class="chi-dropdown__menu-item" slot="menu">
    <chi-checkbox id="checkbox2" label="Item 2" disabled></chi-checkbox>
  </div>
  <div class="chi-dropdown__menu-item" slot="menu">
    <chi-checkbox id="checkbox3" label="Item 3" checked></chi-checkbox>
  </div>
  <div class="chi-dropdown__menu-item" slot="menu">
    <chi-checkbox id="checkbox4" label="Item 4"></chi-checkbox>
  </div>
</chi-dropdown>   
<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

<chi-dropdown active>
  <div class="chi-dropdown__menu-item" slot="menu">
    <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" aria-hidden="true"></i>
        Item 1
      </label>
    </div>
  </div>
  <div class="chi-dropdown__menu-item" slot="menu">
    <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" aria-hidden="true"></i>
        Item 2
      </label>
    </div>
  </div>
  <div class="chi-dropdown__menu-item" slot="menu">
    <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" aria-hidden="true"></i>
        Item 3
      </label>
    </div>
  <div class="chi-dropdown__menu-item" slot="menu">
   <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" aria-hidden="true"></i>
        Item 4
      </label>
    </div>
  </div>
</chi-dropdown>
<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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></i>
        Item 4
      </label>
    </div>
  </div>
</div>

Radio Buttons

Select an option
<chi-dropdown active>
  <legend class="chi-dropdown__menu-item" slot="menu">Select an option</legend>
  <div class="chi-dropdown__menu-item" slot="menu">
    <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" slot="menu">
    <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" slot="menu">
    <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" slot="menu">
    <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>
</chi-dropdown>
<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
<chi-dropdown active>
  <div class="chi-dropdown__menu-item" slot="menu">
    <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" slot="menu"></div>
  <legend class="chi-dropdown__menu-item" slot="menu">Select range</legend>
  <div class="chi-dropdown__menu-item" slot="menu">
    <input class="chi-input" type="range" aria-label="Range description" />
  </div>
</chi-dropdown>
<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
<chi-dropdown active>
  <legend class="chi-dropdown__menu-item" slot="menu">Configure options</legend>
  <div class="chi-dropdown__menu-item" slot="menu">
    <div class="chi-form__item">
      <label class="chi-switch -xs" for="toggle-mail">
        <input class="chi-switch__input" type="checkbox" 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" slot="menu">
    <div class="chi-form__item">
      <label class="chi-switch -xs" for="toggle-tlf">
        <input class="chi-switch__input" type="checkbox" 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" slot="menu">
    <div class="chi-form__item">
      <label class="chi-switch -xs" for="toggle-app">
        <input class="chi-switch__input" type="checkbox" id="toggle-app" />
        <span class="chi-switch__content">
          <span class="chi-switch__thumb"></span>
        </span>
        <span class="chi-switch__label">App notifications</span>
      </label>
    </div>
  </div>
</chi-dropdown>
<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 -xs" 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 -xs" 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 -xs" 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
<chi-dropdown active>
  <span class="chi-dropdown__menu-item" href="#" slot="menu">Text 1</span>
  <span class="chi-dropdown__menu-item" href="#" slot="menu">Text 2</span>
  <span class="chi-dropdown__menu-item" href="#" slot="menu">Text 3</span>
  <span class="chi-dropdown__menu-item" href="#" slot="menu">Text 4</span>
</chi-dropdown>  
<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.

Item 1Item 2
Item 3 with truncated longer text
Item 4
<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>

<!-- Tooltip for truncated text -->
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>

Flexible height

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

Item 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Item 2
<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>

Web Component

Properties

Property
Attribute
Description
Type
Default
active
active
To set the state of Dropdown
boolean
false
animateChevron
animate-chevron
To animate the chevron of Dropdown
boolean
undefined
button
button
To provide the value of base-style button as trigger of the Dropdown
string
undefined
color
color
To set the color of the button. The value is directly passed to chi-button element if present { primary, secondary, danger, dark, light }.
string
undefined
description
description
To enable the description of Dropdown menu item
boolean
undefined
disabled
disabled
to disable chi-button.
boolean
false
fluid
fluid
To render Dropdowns that span the full width of the parent container
boolean
undefined
hover
hover
To configure activation on hover of the Dropdown with base-style button trigger
boolean
undefined
position
position
To set position of the Dropdown
"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"
undefined
preventAutoHide
prevent-auto-hide
To prevent hiding of the Dropdown when clicking outside its bounds
boolean
undefined
preventItemSelected
prevent-item-selected
To prevent emitting the event chiDropdownItemSelected when an item is clicked
boolean
false
reference
reference
To provide selector of an external reference element
string
undefined
size
size
to set button size { xs, sm, md, lg, xl }.
string
undefined
uppercase
uppercase
to render a button with uppercase text.
boolean
false
variant
variant
To set the variant of the button. The value is directly passed to chi-button element if present { outline, flat }
string
undefined
visibleItems
visible-items
To provide number of items in the dropdown to be displayed, and apply scroll if needed
number
undefined

Events

Event
Description
Type
chiDropdownHide
Triggered when hiding the Dropdown
CustomEvent<any>
chiDropdownItemSelected
Triggered when select an item in the dropdown menu
CustomEvent<any>
chiDropdownKeyDown
Triggered when press key to up/down the Dropdown menu items
CustomEvent<any>
chiDropdownShow
Triggered when showing the Dropdown
CustomEvent<any>

Methods

Method
Description
Returns
Parameters
hide() => Promise<void>
Hides the dropdown

Type: Promise<void>

-
show() => Promise<void>
Shows the dropdown

Type: Promise<void>

-
toggle() => Promise<void>
Toggles active state (show/hide)

Type: Promise<void>

-
updatePopper() => Promise<void>

Type: Promise<void>

-

JavaScript

Properties

Methods

Method
Description
Returns
hide() => void
Hides the dropdown
Type: void
show() => void
Shows the dropdown
Type: void
toggle() => void
Toggles active state (show/hide)
Type: void

Events

Event
Description
chiDropdownShow
Dropdown show has been triggered.
chiDropdownHide
Dropdown hide has been triggered.

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 with 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