MobileNav

organisms

Mobile drawer — full-height slide-in from left. Logo + nav links + user section. Backdrop closes drawer. Focus trap.

ARIA Role: dialog

Demo

Demo for MobileNav (organisms)

Mobile drawer — full-height slide-in from left. Logo + nav links + user section. Backdrop closes drawer. Focus trap.

Props

Prop	Type	Required	Default	Description
`open`	`boolean`	Yes	`—`
`onClose`	`() => void`	Yes	`—`
`links`	`NavLink[]`	Yes	`—`	2-6 links

TypeScript Interface

interface MobileNavProps {
  open: boolean;
  onClose: () => void;
  links: { label: string; href: string; active?: boolean }[];
  user?: { name: string; initials: string; href: string } | null;
}

Assertions (NASA Rule 5)

[type]open and onClose required (controlled)(NASA Rule 5)
[aria]role='dialog' aria-modal='true'; Escape closes; focus trap(WAI-ARIA Dialog Pattern)

Usage

Import

import { Mobilenav } from '@epasslive/design-system'

Basic

<Mobilenav />

With Variants

<Mobilenav variant="primary" size="md" />