Astryx Design System

Mobile Nav@xds/core v0.0.14 · XDSMobileNav

Usage

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. Inside XDSAppShell, use XDSMobileNavToggle as the trigger — it reads state from context automatically.

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 header when the drawer's purpose is not obvious from its content.
Do	Inside XDSAppShell, use XDSMobileNavToggle to open the drawer — it reads state from context. Do not pass isOpen/onOpenChange to the toggle.
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

MobileNav — Without Title

Mobile navigation drawer without a title header