--- meta: title: Dropdown description: Dropdowns display a popup containing a menu or other content when triggered by a button or element. layout: component --- Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it. Dropdowns are designed to work with menus and menu items, but they can contain any content. They also provide methods to programmatically show and hide the panel. ```html:preview Edit Duplicate Archive Delete ``` ## Examples ### Getting the Dropdown to Close By default, dropdowns close when you select a menu item in the dropdown's panel. To change this behavior, set the `stay-open-on-select` attribute to prevent the dropdown from closing when menu selections are made. ```html:preview Settings Notifications Privacy Security ``` ### Placement The preferred placement of the dropdown can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport if you're using positioning features such as `flip` and `shift`. ```html:preview Top Start Edit Delete Top Edit Delete Top End Edit Delete

Bottom Start Edit Delete Bottom Edit Delete Bottom End Edit Delete

Left Start Edit Delete Left Edit Delete Left End Edit Delete

Right Start Edit Delete Right Edit Delete Right End Edit Delete ``` ### Distance Use the `distance` attribute to change how far the dropdown panel is from the trigger. This value is specified in pixels. ```html:preview Distance 20px Edit Delete Distance 50px Edit Delete ``` ### Skidding Use the `skidding` attribute to move the dropdown panel along the trigger. This value is specified in pixels. ```html:preview Skidding 30px Edit Delete Skidding -30px Edit Delete ``` ### Hoisting Dropdown panels will be clipped if they're inside a container that has `overflow: auto|hidden|scroll`. The `hoist` attribute forces the panel to use a fixed positioning strategy, allowing it to break out of the container. In this case, the panel will be positioned relative to its containing block, which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. The `hoist` attribute is enabled by default to prevent clipping issues. ```html:preview
Hoisted (Default) Edit Delete Not Hoisted Edit Delete
``` ### Syncing Width or Height Use the `sync` attribute to make the dropdown panel match the width or height of the trigger element. This is useful when you want the panel to be the same size as the trigger. ```html:preview Sync Width Edit Delete Archive Sync Height Edit Delete Sync Both Edit Delete ``` ### Disabled Use the `disabled` attribute to disable the dropdown so the panel will not open. ```html:preview Disabled Edit Delete ``` ### Custom Trigger Any element can be used as a trigger by placing it in the `trigger` slot. The trigger should be a focusable element like a button or link. ```html:preview Click to open Edit Delete ``` ### Non-Menu Content Dropdowns can contain any content, not just menus. Use the default slot to add custom content to the dropdown panel. ```html:preview User Profile

John Doe

john.doe@example.com

 ``` ### Programmatic Control You can use the `show()` and `hide()` methods to programmatically open and close the dropdown. You can also check the `open` property to determine if the dropdown is currently open. ```html:preview Dropdown Edit Delete

Show Hide ``` ### Keyboard Navigation When focused on the trigger, the following keyboard interactions are available: - **Space/Enter** - Opens the dropdown and focuses the first menu item - **Arrow Down** - Opens the dropdown and focuses the first menu item - **Arrow Up** - Opens the dropdown and focuses the last menu item - **Home** - Opens the dropdown and focuses the first menu item - **End** - Opens the dropdown and focuses the last menu item When the dropdown is open: - **Escape** - Closes the dropdown and returns focus to the trigger - **Tab** - Closes the dropdown and returns focus to the trigger - **Arrow Down** - Moves focus to the next menu item - **Arrow Up** - Moves focus to the previous menu item ### Remote Content The dropdown supports loading content from a remote source using the `uri` attribute. The content will be preloaded when the user hovers over or focuses on the trigger. ```html:preview Load Remote Content ``` ### Events The dropdown emits several events that you can listen to: - `zn-show` - Emitted when the dropdown is about to open - `zn-after-show` - Emitted after the dropdown has opened and all animations are complete - `zn-hide` - Emitted when the dropdown is about to close - `zn-after-hide` - Emitted after the dropdown has closed and all animations are complete - `zn-select` - Emitted when a menu item is selected (bubbles up from the menu) ```html:preview Open Dropdown Edit Delete
Event log:
```