Mobile Nav · astryx-svelte

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 AppShell, use MobileNavToggle as the trigger; it reads state from context automatically.

ts
 
import { MobileNav } from '@astryx-svelte/core';

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 AppShell, use MobileNavToggle 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