---
layout: default.html
title: Dropdowns
description: Add beautiful menus to your app with dropdowns.
---
## Dropdowns
Dropdowns can be created using the markup below. You can use a `` or an `` as a trigger. Dropdown indicators (i.e. carets) are added for you. Menu items are simply ` ` elements. Dividers are simply `
Dropdown
```
Use the `dropdown-top` and `dropdown-left` modifiers to change the positioning of the menu. You can combine these modifiers as needed.
```html
...
...
...
```
Dropdowns with button triggers can be used inside input groups.
```html
```
### 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:
- `show` – Fires when a dropdown is shown.
- `hide` – Fires when a dropdown is hidden.
- `select` – Fires when a dropdown menu item is selected. The second callback argument is a reference to the respective menu item.
This example will log all three events for a dropdown with an id of `my-dropdown`.
```javascript
$('#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);
});
```