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.

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

Web Component
HTML Blueprint

<!-- 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.

Web Component
HTML Blueprint

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

Web Component
HTML Blueprint

<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

Web Component
HTML Blueprint

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

Web Component
HTML Blueprint

<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

Web Component
HTML Blueprint

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

Web Component
HTML Blueprint

<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

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>

<div class="chi-dropdown">
  <button id="example__dropdown-with-search" class="chi-button chi-dropdown__trigger">Dropdown, click me</button>
  <div class="chi-dropdown__menu">
    <div class="chi-dropdown__menu-header -mb--1">
      <div class="chi-input__wrapper -icon--right">
        <input class="chi-input chi-search__input -sm" type="search" placeholder="Search" aria-label="search input" />
        <button class="chi-button -icon -flat -sm -bg--none" aria-label="Search">
          <div class="chi-button__content">
            <i class="chi-icon icon-search" aria-hidden="true"></i>
          </div>
        </button>
      </div>
    </div>
    <div class="chi-dropdown__menu-items-wrapper" 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>
</div>

<script>chi.dropdown(document.getElementById('example__dropdown-with-search'));</script>

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.

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

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

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

<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

Web Component
HTML Blueprint

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

Web Component
HTML Blueprint

<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

Web Component
HTML Blueprint

<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

Web Component
HTML Blueprint

<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

Web Component
HTML Blueprint

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

<div class="chi-dropdown__menu">
  <div class="chi-dropdown__menu-header -mb--1">
    <div class="chi-input__wrapper -icon--right">
      <input class="chi-input chi-search__input -sm" type="search" placeholder="Search" aria-label="search input" />
      <button class="chi-button -icon -flat -sm -bg--none" aria-label="Search">
        <div class="chi-button__content">
          <i class="chi-icon icon-search" aria-hidden="true"></i>
        </div>
      </button>
    </div>
  </div>
  <div class="chi-dropdown__menu-items-wrapper"> 
    <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>

Checkboxes

Base

Web Component
HTML Blueprint

<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

Web Component
HTML Blueprint

<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

Web Component
HTML Blueprint

<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

Web Component
HTML Blueprint

<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

Web Component
HTML Blueprint

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

Web Component
HTML Blueprint

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

Web Component
HTML Blueprint

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

Web Component
HTML Blueprint

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

Web Component
HTML Blueprint

<!-- 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
`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
`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

Examples

Base

Additional Styles

Data-target

Hover

Animate

Fluid

Positioning

Visible items

Search input

Retain Selection

Icon

Icon

Menu

Menu item states

Description

Divider

Icons

Left Aligned

Right Aligned

Search Input

Checkboxes

Base

With Icons

Radio Buttons

Range Input

Toggle Switch

Plain Text

Helpers

Truncate long menu-items

Flexible height

Select mode

Web Component

Properties

Events

Methods

JavaScript

Properties

Methods

Events

Preventing memory leaks

Accessibility