A slide-out drawer for mobile navigation. MobileNav is the mobile counterpart to SideNav and accepts the same children. Use it on narrow viewports where a persistent sidebar is not practical.
ts
import{XDSMobileNav}from'@xds/core/MobileNav'
Best practices
Guidance
Practices
Do
Share the same nav items between MobileNav and SideNav by extracting them into a variable.
Do
Provide a title when the drawer's purpose is not obvious from its content.
Don't
Use MobileNav on desktop — use a persistent SideNav instead.
Examples
Common configurations, variations, and states.
MobileNav — Basic Drawer
Mobile navigation drawer with sectioned nav items triggered by a menu button
MobileNav — End Side Drawer
Navigation drawer that slides in from the right side of the screen