A drawer displays content separate from the rest of the page, such as notifications, navigation, and settings.
<nve-drawer id="drawer" closable modal>
<nve-drawer-header>
<h3 nve-text="heading semibold sm">Drawer Header</h3>
</nve-drawer-header>
<nve-drawer-content>
<p nve-text="body">drawer content</p>
</nve-drawer-content>
<nve-drawer-footer>
<p nve-text="body">drawer footer</p>
</nve-drawer-footer>
</nve-drawer>
<nve-button popovertarget="drawer">button</nve-button>
drawer content
drawer footer
button Installation
Learn more about native Popover APIs.
<script type="module">
import '@nvidia-elements/core/drawer/define.js';
</script>
<nve-drawer id="drawer" closable modal>
<nve-drawer-header>
<h3 nve-text="heading semibold sm">Drawer Header</h3>
</nve-drawer-header>
<nve-drawer-content>
<p nve-text="body">drawer content</p>
</nve-drawer-content>
<nve-drawer-footer>
<p nve-text="body">drawer footer</p>
</nve-drawer-footer>
</nve-drawer>
<nve-button popovertarget="drawer">button</nve-button>
Visual
Complete drawer layout pattern with header, scrollable content, and footer sections for consistent drawer structure.
<nve-drawer closable>
<nve-drawer-header>
<h3 nve-text="heading semibold sm">Drawer Header</h3>
</nve-drawer-header>
<nve-drawer-content>
<p nve-text="body">drawer content</p>
</nve-drawer-content>
<nve-drawer-footer>
<p nve-text="body">drawer footer</p>
</nve-drawer-footer>
</nve-drawer>
Events
EventDescription beforetoggle Dispatched on a popover just before showing or hiding. MDN
Dispatched when the drawer closes.
Dispatched when the drawer opens.
Dispatched on a popover element just after showing or hiding. MDN
Event handling for drawer open, close, and toggle events. Useful for adding custom behavior when drawer state changes.
<nve-drawer id="drawer" closable modal position="right">
<nve-drawer-header>
<h3 nve-text="heading">Drawer Header</h3>
</nve-drawer-header>
<nve-drawer-content>
<p nve-text="body">drawer content</p>
</nve-drawer-content>
</nve-drawer>
<nve-button popovertarget="drawer">open</nve-button>
<script type="module">
const drawer = document.querySelector("nve-drawer");
drawer.addEventListener("beforetoggle", () => console.log("beforetoggle"));
drawer.addEventListener("toggle", () => console.log("toggle"));
drawer.addEventListener("open", () => console.log("open"));
drawer.addEventListener("close", () => console.log("close"));
</script>
Size
Controls the visual scale of an element to match its importance and available space.
Size Description sm Compact size for dense layouts or secondary elements with less visual prominence. md Standard size that works well in most contexts and provides balanced visibility. lg Larger size for emphasizing important elements or improving touch targets in spacious layouts. Small
Small drawer size for compact side panels and quick actions. Ideal for navigation menus, filters, or supplementary information that shouldn't dominate the screen.
<nve-drawer size="sm" closable>
<nve-drawer-header>
<h3 nve-text="heading semibold sm">Drawer Header</h3>
</nve-drawer-header>
<nve-drawer-content>
<p nve-text="body">drawer content</p>
</nve-drawer-content>
<nve-drawer-footer>
<p nve-text="body">drawer footer</p>
</nve-drawer-footer>
</nve-drawer>
Large
Large drawer size for comprehensive content like detailed forms or settings panels. Use when users need significant screen space for complex tasks without leaving the current page context.
<nve-drawer size="lg" closable>
<nve-drawer-header>
<h3 nve-text="heading semibold sm">Drawer Header</h3>
</nve-drawer-header>
<nve-drawer-content>
<p nve-text="body">drawer content</p>
</nve-drawer-content>
<nve-drawer-footer>
<p nve-text="body">drawer footer</p>
</nve-drawer-footer>
</nve-drawer>
Drawer with scrollable content for overflow behavior. Use when drawer content exceeds viewport height, ensuring header and footer remain fixed while content scrolls independently.
<nve-drawer closable>
<nve-drawer-header>
<h3 nve-text="heading semibold sm">Drawer Header</h3>
</nve-drawer-header>
<nve-drawer-content>
<p nve-text="body" style="height: 2500px">drawer content</p>
</nve-drawer-content>
<nve-drawer-footer>
<p nve-text="body">drawer footer</p>
</nve-drawer-footer>
</nve-drawer>
Position
Sets the side position of the popover relative to the provided anchor element.For drawer the anchor defaults to the document body.
Position Description left right bottom top Drawer positioning from all four screen edges. Use position based on content type and user workflow: right for details/settings, left for navigation, top/bottom for notifications or quick actions that span the width.
<div nve-layout="row align:center gap:md">
<nve-button popovertarget="popover-top">open top</nve-button>
<nve-button popovertarget="popover-left">open left</nve-button>
<nve-button popovertarget="popover-right">open right</nve-button>
<nve-button popovertarget="popover-bottom">open bottom</nve-button>
</div>
<nve-drawer id="popover-top" closable modal position="top">
<nve-drawer-header>
<h3 nve-text="heading">Drawer Header Top</h3>
</nve-drawer-header>
<nve-drawer-content>
<p nve-text="body" style="height: 200px">some text content in a top closable drawer</p>
</nve-drawer-content>
<nve-drawer-footer>
<p nve-text="body">some text footer content</p>
</nve-drawer-footer>
</nve-drawer>
<nve-drawer id="popover-left" closable modal position="left">
<nve-drawer-header>
<h3 nve-text="heading">Drawer Header Left</h3>
</nve-drawer-header>
<nve-drawer-content>
<p nve-text="body">drawer content</p>
</nve-drawer-content>
<nve-drawer-footer>
<p nve-text="body">drawer footer</p>
</nve-drawer-footer>
</nve-drawer>
<nve-drawer id="popover-right" closable modal position="right">
<nve-drawer-header>
<h3 nve-text="heading">Drawer Header Right</h3>
</nve-drawer-header>
<nve-drawer-content>
<p nve-text="body">some text content in a right closable drawer</p>
</nve-drawer-content>
<nve-drawer-footer>
<p nve-text="body">some text footer content</p>
</nve-drawer-footer>
</nve-drawer>
<nve-drawer id="popover-bottom" closable modal position="bottom">
<nve-drawer-header>
<h3 nve-text="heading">Drawer Header Bottom</h3>
</nve-drawer-header>
<nve-drawer-content>
<p nve-text="body" style="height: 200px">some text content in a bottom closable drawer</p>
</nve-drawer-content>
<nve-drawer-footer>
<p nve-text="body">some text footer content</p>
</nve-drawer-footer>
</nve-drawer>
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