Const// Trigger a rerender after dynamically updating slot content
const drawer = document.querySelector('umd-element-nav-drawer');
drawer.addEventListener('component:layout-rerender', (e) => {
console.log('drawer rerendered', e.detail.previousSize, e.detail.currentSize);
});
drawer.setAttribute('data-layout-rerender', 'true');
<!-- Basic navigation drawer -->
<umd-element-nav-drawer>
<a slot="logo" href="/">
<img src="logo.svg" alt="Site Logo">
</a>
<nav slot="main-navigation">
<ul>
<li><a href="/about">About</a></li>
<li><a href="/programs">Programs</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</umd-element-nav-drawer>
<!-- Full navigation drawer -->
<umd-element-nav-drawer>
<a slot="logo" href="/">Maryland</a>
<nav slot="main-navigation">
<ul>
<li><a href="/academics">Academics</a></li>
<li><a href="/research">Research</a></li>
<li><a href="/campus">Campus Life</a></li>
</ul>
</nav>
<nav slot="utility-navigation">
<ul>
<li><a href="/apply">Apply</a></li>
<li><a href="/give">Give</a></li>
</ul>
</nav>
<nav slot="footer-navigation">
<ul>
<li><a href="/privacy">Privacy</a></li>
<li><a href="/accessibility">Accessibility</a></li>
</ul>
</nav>
</umd-element-nav-drawer>
Navigation Drawer
A mobile-friendly navigation drawer component that provides off-canvas navigation. Includes a menu button trigger and sliding drawer panel for responsive navigation menus.
Custom Element
<umd-element-nav-drawer>Slots
logo- Site logo/brandingmain-navigation- Primary navigation linksutility-navigation- Utility/secondary navigation linksfooter-navigation- Footer navigation linksObserved Attributes
data-layout-rerender- Set to"true"to rebuild the drawer after slot content changes. Dispatches acomponent:layout-rerenderCustomEvent on completion withdetail.previousSizeanddetail.currentSizeso consumers can react to layout shifts.