DefaultMenuVisualEventsClosableLayoutMultipleTriggersPositionAlignmentRadioGroupCheckboxGroupLegacyBehaviorTriggerHintPositionFallback
<nve-button popovertarget="dropdown">button</nve-button>
<nve-dropdown id="dropdown">dropdown content</nve-dropdown>
Edit Example Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls. MDN Popover API
Dropdown with popover-positioned menu for trigger-based actions. Use for context menus, settings, and user actions where content appears on demand relative to a trigger button.
<nve-dropdown anchor="btn">dropdown content</nve-dropdown>
<nve-button id="btn">button</nve-button>
Edit Example Dropdown using anchor attribute to reference trigger element by ID. Alternative approach for connecting dropdowns to their triggers.
<nve-dropdown id="dropdown">dropdown content</nve-dropdown>
<nve-button popovertarget="dropdown">button</nve-button>
<script type="module">
const dropdown = document.querySelector("nve-dropdown");
dropdown.addEventListener("beforetoggle", () => console.log("beforetoggle"));
dropdown.addEventListener("toggle", () => console.log("toggle"));
dropdown.addEventListener("open", () => console.log("open"));
dropdown.addEventListener("close", () => console.log("close"));
</script>
Edit Example Event Description close Dispatched when the dropdown closes.
Dispatched when the dropdown opens.
Dispatched on a popover element just after showing or hiding. MDN
Dispatched on a popover just before showing or hiding. MDN
<nve-dropdown anchor="btn" closable>
<h3 nve-text="label">Title</h3>
<p nve-text="body">some text content in a closable dropdown</p>
</nve-dropdown>
<nve-button id="btn">button</nve-button>
Edit Example Indicates whether the user can dismiss or close the element.
Closable Description true The element displays a close control and the user can dismiss it. false The user cannot close the element and must dismiss it programmatically. <nve-dropdown anchor="btn">
<nve-dropdown-header>
<h3 nve-text="heading semibold sm">heading</h3>
</nve-dropdown-header>
<p nve-text="body">some text content in a closable dropdown</p>
<nve-dropdown-footer>
<p nve-text="body">footer</p>
</nve-dropdown-footer>
</nve-dropdown>
<nve-button id="btn">button</nve-button>
Edit Example Dropdown with structured content using header and footer sections. Perfect for complex dropdown content that needs clear visual hierarchy.
Multiple Triggers
test-case
<div nve-layout="row gap:sm align:center">
<nve-button popovertarget="dropdown">button</nve-button>
<nve-button popovertarget="dropdown">button</nve-button>
<nve-button popovertarget="dropdown">button</nve-button>
<nve-dropdown id="dropdown">hello there</nve-dropdown>
</div>
Edit Example Dropdown with many triggers, showing how to use the popovertarget attribute to connect many triggers to the same dropdown.
<nve-dropdown anchor="card" position="top" alignment="center">
<h3 nve-text="label">Top</h3>
<p nve-text="body">dropdown positioned top</p>
</nve-dropdown>
<nve-dropdown anchor="card" position="right" alignment="center">
<h3 nve-text="label">Right</h3>
<p nve-text="body">dropdown positioned right</p>
</nve-dropdown>
<nve-dropdown anchor="card" position="bottom" alignment="center">
<h3 nve-text="label">Bottom</h3>
<p nve-text="body">dropdown positioned bottom</p>
</nve-dropdown>
<nve-dropdown anchor="card" position="left" alignment="center">
<h3 nve-text="label">Left</h3>
<p nve-text="body">dropdown positioned left</p>
</nve-dropdown>
<nve-card id="card" style="width: 250px; height: 200px"></nve-card>
Edit Example Determines the position of an element along both inline and block axis. MDN
Position Description center Centers the popover directly over the anchor element. top Positions the popover above the anchor element. bottom Positions the popover below the anchor element. left Positions the popover to the left side of the anchor element. right Positions the popover to the right side of the anchor element. <div nve-theme nve-layout="row align:center">
<nve-dropdown open anchor="card" position="top" alignment="start">top start</nve-dropdown>
<nve-dropdown open anchor="card" position="top" alignment="center">top center</nve-dropdown>
<nve-dropdown open anchor="card" position="top" alignment="end">top end</nve-dropdown>
<nve-dropdown open anchor="card" position="right" alignment="start">right start</nve-dropdown>
<nve-dropdown open anchor="card" position="right" alignment="center">right center</nve-dropdown>
<nve-dropdown open anchor="card" position="right" alignment="end">right end</nve-dropdown>
<nve-dropdown open anchor="card" position="bottom" alignment="start">bottom start</nve-dropdown>
<nve-dropdown open anchor="card" position="bottom" alignment="center">bottom center</nve-dropdown>
<nve-dropdown open anchor="card" position="bottom" alignment="end">bottom end</nve-dropdown>
<nve-dropdown open anchor="card" position="left" alignment="start">left start</nve-dropdown>
<nve-dropdown open anchor="card" position="left" alignment="center">left center</nve-dropdown>
<nve-dropdown open anchor="card" position="left" alignment="end">left end</nve-dropdown>
<nve-card id="card" style="width: 450px; height: 300px; margin-top: 50px"></nve-card>
</div>
Edit Example Determines the alignment of the popover relative to the provided anchor element.
Alignment Description start Aligns the popover to the beginning edge of the anchor for left or top alignment. end Aligns the popover to the ending edge of the anchor for right or bottom alignment. center Centers the popover along the anchor's edge for balanced positioning. <nve-dropdown anchor="btn">
<nve-radio-group style="width: 250px">
<label>Sort By</label>
<nve-radio>
<label>Completed</label>
<input type="radio" checked />
<nve-control-message>latest completed tasks</nve-control-message>
</nve-radio>
<nve-radio>
<label>Failing</label>
<input type="radio" />
<nve-control-message>latest failing tasks</nve-control-message>
</nve-radio>
<nve-radio>
<label>Status</label>
<input type="radio" />
<nve-control-message>task status priority</nve-control-message>
</nve-radio>
</nve-radio-group>
</nve-dropdown>
<nve-button id="btn" nve-control>completed <nve-icon name="caret" direction="down" size="sm"></nve-icon></nve-button>
Edit Example Dropdown containing a radio group for single-selection options. Perfect for sort controls, filter selections, or preference settings.
<nve-dropdown anchor="btn">
<nve-checkbox-group style="width: 250px">
<label>Test Suites</label>
<nve-checkbox>
<label>Local</label>
<input type="checkbox" />
</nve-checkbox>
<nve-checkbox>
<label>Nightly</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>Remote</label>
<input type="checkbox" />
</nve-checkbox>
</nve-checkbox-group>
</nve-dropdown>
<nve-button id="btn" nve-control>test suites <nve-icon name="caret" direction="down" size="sm"></nve-icon></nve-button>
Edit Example Dropdown containing a checkbox group for multi-selection options. Ideal for filter controls, feature toggles, or bulk action selections.
Legacy Behavior Trigger
test-case
<nve-button id="dropdown-btn">open</nve-button>
<nve-dropdown anchor="dropdown-btn" trigger="dropdown-btn" behavior-trigger hidden>
<p nve-text="body">hello there</p>
</nve-dropdown>
Edit Example Legacy behavior trigger for dropdown, using the behavior-trigger attribute to open the dropdown on button click.
<nve-dropdown id="dropdown"> dropdown content </nve-dropdown>
<nve-tooltip id="tooltip" hidden behavior-trigger trigger="btn">dropdown content</nve-tooltip>
<nve-icon-button id="btn" popovertarget="dropdown" icon-name="gear" aria-label="settings"></nve-icon-button>
Edit Example Dropdown hint, using the tooltip element to display a hint when the dropdown opens.
Position Fallback
test-case
<style>
body {
align-items: start !important;
margin: 0;
padding: 0 !important;
}
</style>
<nve-dropdown anchor="btn" position="bottom" alignment="center"> dropdown content </nve-dropdown>
<nve-dropdown anchor="btn" position="right" alignment="center"> dropdown content </nve-dropdown>
<nve-icon-button id="btn" icon-name="gear" aria-label="settings"></nve-icon-button>
Edit Example Dropdown position fallback, using the position and alignment attributes to reposition the dropdown when the trigger is not visible.