React components
Nav mobile
A mobile navigation component with a hamburger menu and slide-out drawer.
Overview
The NavMobile component renders a hamburger button that opens a full-screen navigation menu on mobile devices. It manages the body scroll lock when open and supports nested submenus.
Usage
import { NavMobile } from '@/components/core/nav-mobile';
function Header() {
const currentUrl = new URL(window.location.href);
return (
<header className="flex justify-between p-4">
<Logo />
<NavMobile currentUrl={currentUrl} />
</header>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
currentUrl | URL | Required | Current URL object for highlighting active links. |
className? | string | - | Optional CSS class names for the navigation drawer. |
Notes
- This component is designed to be visible only on mobile breakpoints (usually hidden on
mdand up via CSS classes). - It relies on the global
MENUconstant for navigation items.