Dropdown — wd-dropdown

Category: Navigation · Tag: wd-dropdownBack to: Components overview

---

What it does

A button that opens a menu. You set the button label and place the menu items inside; clicking the button toggles the menu (built on the native popover, so it closes on outside-click automatically).

---

Adding it & its settings

Add Component → Navigation → Dropdown.

Basic Settings (all components): #id, Classes, Inline Style.

Component Settings:

Setting	Type	Effect
Button Text	text	The label shown on the trigger button.

---

Content & slots

• Default slot — the menu items (e.g. links). They appear in the popover menu.

<wd-dropdown><!-- Button Text set to "Menu" in settings -->
  <a href="/profile">Profile</a>
  <a href="/settings">Settings</a>
  <a href="/logout">Log out</a>
</wd-dropdown>

---

Styling

CSS variables

Trigger button

Variable	Default
--dropdown-button-background	#f0f0f0
--dropdown-button-hover-background	#e0e0e0
--dropdown-button-color	#333
--dropdown-button-padding	0.5rem 1rem
--dropdown-button-border	none
--dropdown-button-border-radius	0.25rem
--dropdown-button-font-family	sans-serif
--dropdown-button-font-size	1rem
--dropdown-button-font-weight	normal
--dropdown-button-transition	all 0.3s ease

Menu (popover)

Variable	Default
--dropdown-menu-background	#fff
--dropdown-menu-border	1px solid #e6e6e6
--dropdown-menu-border-radius	0.25rem
--dropdown-menu-padding	0.5rem
--dropdown-menu-min-width	auto
--dropdown-menu-width	max-content
--dropdown-menu-inset	0
--dropdown-menu-box-shadow	0 2px 5px rgba(0,0,0,0.15)
--dropdown-menu-flex-direction	column
--dropdown-menu-gap	0.5rem
--dropdown-menu-popover-open-display	grid

::part()

Part	Element
dropdown-<id>	The dropdown wrapper (button + menu).

wd-dropdown::part(dropdown-user) { font-weight: 600; }

---

Notes

• Menu items are your own slotted elements (in the light DOM), so you can style them with ordinary page CSS as well as the variables above.