API REFERENCE · OVERLAYS
<dj-dropdown>
A menu button: a trigger that opens a menu or panel anchored to it, built on <dj-popup> and <dj-list>.
Put the trigger, usually a <dj-button>, in the trigger slot, and the menu, usually one <dj-list>, in the default slot.
npm install @dojo-ng/dropdown
import "@dojo-ng/dropdown";Opening and closing
- A click on the trigger opens or closes it. ArrowDown, Enter, and Space open it.
- When the content is a
<dj-list>, opening switches on itsmenumode, focuses it, and activates the first item. - Choosing an item closes the menu. The list's
changeevent still reaches your code unchanged. - Escape closes it. Focus returns to the trigger every time it closes.
Other content
- Content that is not a
<dj-list>works as a plain anchored panel. The dropdown then only opens, closes, handles Escape, and returns focus. - For an anchored panel with no menu behavior, use
dj-trigger-popup. For a right-click menu, usedj-context-menu.
Accessibility
- It follows the APG menu button pattern, and sets
aria-haspopupandaria-expandedon your trigger for you.
Properties
| Property | Attribute | Type | Default |
|---|---|---|---|
openWhether the menu is open. Reflected so page CSS can target :host([open]). |
open reflected |
boolean |
false |
positionPopup placement (pass-through to <dj-popup>). |
position reflected |
"above""below""left""right" |
"below" |
matchWidthSize the panel to the trigger's width. Off by default — menus are content-sized. |
match-width |
boolean |
false |
Events
dj-opendj-close
Slots
| Slot | Description |
|---|---|
trigger | the button |
| Default slot | the menu list or panel |
CSS parts
Style these with dj-dropdown::part(name).
| Part | Description |
|---|---|
panel | the content wrapper inside the popup |