Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls.
<nve-button popovertarget="dropdown">button</nve-button>
<nve-dropdown id="dropdown">dropdown content</nve-dropdown>
<nve-button popovertarget="dropdown">button</nve-button>
<nve-dropdown id="dropdown">dropdown content</nve-dropdown>
button dropdown content
Installation
Learn more about native Popover APIs.
<script type="module">
import '@nvidia-elements/core/dropdown/define.js';
</script>
<nve-button popovertarget="dropdown">button</nve-button>
<nve-dropdown id="dropdown">dropdown content</nve-dropdown>
<script type="module">
import '@nvidia-elements/core/dropdown/define.js';
</script>
<nve-button popovertarget="dropdown">button</nve-button>
<nve-dropdown id="dropdown">dropdown content</nve-dropdown>
nve api.get nve-dropdown
nve api.get nve-dropdown
Visual
Dropdown using anchor attribute to reference trigger element by ID. Alternative approach for connecting dropdowns to their triggers.
<nve-dropdown anchor="btn">dropdown content</nve-dropdown>
<nve-button id="btn">button</nve-button>
<nve-dropdown anchor="btn">dropdown content</nve-dropdown>
<nve-button id="btn">button</nve-button>
Closable
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. Dropdown with closable attribute that allows users to dismiss the dropdown by clicking close button.
<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>
<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>
Events
Event Description close Dispatched when the dropdown closes.
Dispatched when the dropdown opens.
Dispatched on a popover element just after showing or hiding.
Dispatched on a popover just before showing or hiding.
\n"}
Event handling for dropdown open and close events. Useful for adding custom behavior when dropdown state changes.
<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>
<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>
Position
Sets the side position of the popover relative to the provided anchor element.
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. Dropdown position, with the position attribute controlling placement when the trigger is not visible.
<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>
<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>
Alignment
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. Dropdown alignment, with the alignment attribute controlling horizontal placement relative to the trigger.
<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>
<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>
Layout
Dropdown with structured content using header and footer sections. Perfect for complex dropdown content that needs clear visual hierarchy.
<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>
<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>
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-button popovertarget="dropdown-menu">dropdown</nve-button>
<nve-dropdown id="dropdown-menu">
<nve-menu>
<nve-menu-item><nve-icon name="person"></nve-icon> profile</nve-menu-item>
<nve-menu-item><nve-icon name="gear"></nve-icon> settings</nve-menu-item>
<nve-menu-item><nve-icon name="star"></nve-icon> favorites</nve-menu-item>
<nve-divider></nve-divider>
<nve-menu-item><nve-icon name="logout"></nve-icon> logout</nve-menu-item>
</nve-menu>
</nve-dropdown>
Radio Group Pattern
Dropdown containing a radio group for single-selection options. Perfect for sort controls, filter selections, or preference settings.
<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>
<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>
Checkbox Group Pattern
Dropdown containing a checkbox group for multi-selection options. Ideal for filter controls, feature toggles, or bulk action selections.
<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>
<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>
Many Triggers
Dropdown with many triggers, showing how to use the popovertarget attribute to connect many triggers to the same dropdown.
<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>
<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>
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release Docs Preview API Documentation Fully Themeable
beta Robust unit test coverages Passed API Review Passed Designer VQA Review Included in library package stable No known outstanding AA WCAG issues No known outstanding performance issues Adapts to different screen/container sizes No breaking API changes for at least 90 days