Dropdowns can be created using the markup below. You can use a <button> or an <a> as a trigger. Dropdown indicators (i.e. carets) are added for you. Menu items are simply <a> elements. Dividers are simply <hr> elements.

Note the class names used for the main container, the trigger, and the menu. Additionally, menu items can be disabled by adding the disabled class. Menu items can also be given a checked state using the checked class.

To disable a dropdown entirely, add the disabled property to the dropdown trigger if it’s a button. If it’s a link, add the disabled class instead.

<div class="dropdown">
  <button type="button" class="dropdown-trigger">Dropdown</button>
  <div class="dropdown-menu">
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
    <a href="#" class="checked">Checked</a>
    <a href="#" class="disabled">Disabled</a>
    <hr>
    <a href="#">More...</a>
  </div>
</div>

Use the dropdown-top and dropdown-left modifiers to change the positioning of the menu. You can combine these modifiers as needed.

<div class="dropdown dropdown-left">
  ...
</div>

<div class="dropdown dropdown-top">
  ...
</div>

<div class="dropdown dropdown-top dropdown-left">
  ...
</div>

Dropdowns with button triggers can be used inside input groups.

$

Events

Dropdowns require shoelace.js to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”

There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events:

This example will log all three events for a dropdown with an id of my-dropdown.

$('#my-dropdown')
  .on('show', function(event) {
    console.log('show', event.target);
  })
  .on('hide', function(event) {
    console.log('hide', event.target);
  })
  .on('select', function(event, item) {
    console.log('select', event.target, item);
  });