Component

Mobile Nav

A compound navigation with a hamburger trigger and a collapsible panel of links. Supports controlled and uncontrolled open state with keyboard handling, backed by the headless @refraction-ui/mobile-nav core.

Basic

Compose MobileNavTrigger, MobileNavContent, and MobileNavLink inside the root MobileNav.

Installation

$pnpm add @refraction-ui/react-mobile-nav

Usage

tsx

import {
  MobileNav,
  MobileNavTrigger,
  MobileNavContent,
  MobileNavLink,
} from '@refraction-ui/react'

export function MyNav() {
  return (
    <MobileNav>
      <MobileNavTrigger />
      <MobileNavContent>
        <MobileNavLink href="#home">Home</MobileNavLink>
        <MobileNavLink href="#features">Features</MobileNavLink>
        <MobileNavLink href="#pricing">Pricing</MobileNavLink>
      </MobileNavContent>
    </MobileNav>
  )
}

Controlled

Drive the open state yourself with open and onOpenChange — e.g. to close the menu when a link is clicked.

Menu is closed

Props

Props for the root MobileNav. The compound parts (MobileNavTrigger, MobileNavContent, MobileNavLink) accept their native element attributes.

Prop	Type	Default	Description
`open`	`boolean`	--	Controlled open state. Pair with onOpenChange.
`onOpenChange`	`(open: boolean) => void`	--	Called when the open state should change (trigger click, Escape key).
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage.
`className`	`string`	--	Additional CSS classes applied to the root <nav>.