CenturyLink Logo
CenturyLink
Lumen Logo
Lumen
Lumen Enterprise Portal Logo
Lumen Enterprise Portal
Lumen Rebrand24 Logo
Lumen Rebrand 24
Portal Rebrand24 Logo
Portal Rebrand 24

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>

Error and helper message

Use the state danger to provide feedback to users when input data fails to validate. To meet accessibility requirements, danger states must include an error message explaining the failure and/or how to correct it. Other allowed states are warning info success.

Item 1Item 2Item 3Item 4
<chi-dropdown 
  position='bottom' 
  button='Dropdown with error' 
  state='danger' 
  helper-message='Helpful info for the user'
>
  <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">
  <button class="chi-button chi-dropdown__trigger -b--danger -fluid">
    Dropdown with error
  </button>
  <div class="chi-label -status -danger">
    <i class="chi-icon icon-circle-warning" aria-hidden="true"></i>
    Helpful info for the user
  </div>
  <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>

Retain Selection

There is an available property, retain-selection, which allows retaining the selected item in the dropdown as active and see the selected item when the dropdown is closed.

Item 1Item 2Item 3Item 4
<chi-dropdown button="Dropdown, click me" retain-selection>
  <a class="chi-dropdown__menu-item" slot="menu">Item 1</a>
  <a class="chi-dropdown__menu-item" slot="menu">Item 2</a>
  <a class="chi-dropdown__menu-item" slot="menu">Item 3</a>
  <a class="chi-dropdown__menu-item" slot="menu">Item 4</a>
</chi-dropdown>
<div class="chi-dropdown">
  <button id="example__dropdown-retain-selection" style="width: 180px;"
  class="chi-button chi-dropdown__trigger -d--flex -justify-content--between">Dropdown, click me</button>
  <div class="chi-dropdown__menu">
    <a class="chi-dropdown__menu-item">Item 1</a>
    <a class="chi-dropdown__menu-item">Item 2</a>
    <a class="chi-dropdown__menu-item">Item 3</a>
    <a class="chi-dropdown__menu-item">Item 4</a>
  </div>
</div>

<script>
  chi.dropdown(document.getElementById('example__dropdown-retain-selection'));

  <!-- Include your custom logic here to retain dropdown selection -->
</script>

Icon

There is an available property, icon, which allows adding an icon as the dropdown trigger.

Item 1Item 2Item 3Item 4
<chi-dropdown icon="more-vert" icon-tooltip-message="More options">
  <a class="chi-dropdown__menu-item" slot="menu">Item 1</a>
  <a class="chi-dropdown__menu-item" slot="menu">Item 2</a>
  <a class="chi-dropdown__menu-item" slot="menu">Item 3</a>
  <a class="chi-dropdown__menu-item" slot="menu">Item 4</a>
</chi-dropdown>
<div class="chi-dropdown">
  <button id="example__dropdown-icon" class="chi-button chi-dropdown__trigger chi-dropdown__icon" 
    aria-label="More options" data-tooltip="More options"> 
    <div class="chi-button__content">
      <i class="chi-icon icon-more-vert" aria-hidden="true"></i>
    </div>
  </button>
  <div class="chi-dropdown__menu">
    <a class="chi-dropdown__menu-item">Item 1</a>
    <a class="chi-dropdown__menu-item">Item 2</a>
    <a class="chi-dropdown__menu-item">Item 3</a>
    <a class="chi-dropdown__menu-item">Item 4</a>
  </div>
</div>

<script>
  chi.dropdown(document.getElementById('example__dropdown-icon'));
  chi.tooltip(document.querySelectorAll('[data-tooltip]'));
</script>

Icon

There is an available property, icon, which allows adding an icon as the dropdown trigger.

Item 1Item 2Item 3Item 4
<chi-dropdown icon="more-vert" variant="flat" icon-tooltip-message="More options">
  <a class="chi-dropdown__menu-item" slot="menu">Item 1</a>
  <a class="chi-dropdown__menu-item" slot="menu">Item 2</a>
  <a class="chi-dropdown__menu-item" slot="menu">Item 3</a>
  <a class="chi-dropdown__menu-item" slot="menu">Item 4</a>
</chi-dropdown>
<div class="chi-dropdown">
  <button id="example__dropdown-icon" class="chi-button -flat chi-dropdown__trigger chi-dropdown__icon" 
    aria-label="More options" data-tooltip="More options"> 
    <div class="chi-button__content">
      <i class="chi-icon icon-more-vert" aria-hidden="true"></i>
    </div>
  </button>
  <div class="chi-dropdown__menu">
    <a class="chi-dropdown__menu-item">Item 1</a>
    <a class="chi-dropdown__menu-item">Item 2</a>
    <a class="chi-dropdown__menu-item">Item 3</a>
    <a class="chi-dropdown__menu-item">Item 4</a>
  </div>
</div>

<script>
  chi.dropdown(document.getElementById('example__dropdown-icon'));
  chi.tooltip(document.querySelectorAll('[data-tooltip]'));
</script>

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.

Left Aligned

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>

Right Aligned

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

Search Input

Item 1Item 2Item 3Item 4
<chi-dropdown active>
  <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>
</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>

Select mode

The select-mode property enables the looks and feels of the select component, with the advantage of having the options to be shown with styles following the brand guidelines and independent from the operating systems or browsers.

With value single, only one option can be selected. With value multi any number of options can be selected, and clicking a selected option will unselect it.

Item 1Item 2Item 3Item 4Item 1Item 2Item 3Item 4
<!-- Select mode single -->
<chi-dropdown button="- Select single -" select-mode> <!-- or select-mode="single" -->
  <a class="chi-dropdown__menu-item" slot="menu">Item 1</a>
  <a class="chi-dropdown__menu-item" slot="menu">Item 2</a>
  <a class="chi-dropdown__menu-item" slot="menu">Item 3</a>
  <a class="chi-dropdown__menu-item" slot="menu">Item 4</a>
</chi-dropdown>

<!-- Select mode multi -->
<chi-dropdown button="- Select multi -" select-mode="multi">
  <a class="chi-dropdown__menu-item" slot="menu">Item 1</a>
  <a class="chi-dropdown__menu-item" slot="menu">Item 2</a>
  <a class="chi-dropdown__menu-item" slot="menu">Item 3</a>
  <a class="chi-dropdown__menu-item" slot="menu">Item 4</a>
</chi-dropdown>

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
fontWeight
font-weight
To set weight of the button text { normal }.
"normal"
undefined
helperMessage
helper-message
To display an additional helper text message below the Dropdown
string
undefined
hover
hover
To configure activation on hover of the Dropdown with base-style button trigger
boolean
undefined
icon
icon
To provide the name of an icon to display as trigger of the Dropdown
string
undefined
iconTooltipMessage
icon-tooltip-message
To provide icon tooltip message
string
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
retainSelection
retain-selection
To retain the selection of the menu item and display it as the trigger
boolean
undefined
selectMode
select-mode
To apply select-like functionality and styles
"multi" | "single"
undefined
size
size
to set button size { xs, sm, md, lg, xl }.
string
undefined
state
state
To define state color of Dropdown
"danger" | "success" | "warning"
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>
chiDropdownItemDeselected
Triggered when an item is deselected in the dropdown menu
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>
chiDropdownValueChanged
Triggered when selected items have changed in the dropdown menu. Payload is an array of strings.
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