Responsive Navigation
A responsive navigation wrapper that shows a hamburger menu on mobile and full navigation on desktop.
Basic Example
Resize the browser window to see the navigation switch between desktop and mobile modes. On mobile (below 768px), a hamburger icon appears and the navigation moves to a slide-out sheet.
With Header and Footer
The mobile sheet can include optional header and footer sections.
Usage Notes
Structure: ResponsiveNavProvider wraps your header and provides context for responsive behavior.
Desktop navigation: Use the standard NavigationMenu with Class="hidden md:flex" to hide on mobile.
Mobile trigger: ResponsiveNavTrigger automatically shows only on mobile (below 768px).
Mobile content: ResponsiveNavContent renders a Sheet with your mobile navigation. Define your own layout inside.
Auto-close: The mobile sheet automatically closes when navigation occurs.
ResponsiveNavTrigger API Reference
Parameters for the ResponsiveNavTrigger component.
| Prop | Type | Default | Description |
|---|---|---|---|
| Class | string? | — | Additional CSS classes for the hamburger trigger button. |
ResponsiveNavContent API Reference
Parameters for the ResponsiveNavContent component.
| Prop | Type | Default | Description |
|---|---|---|---|
| Side | SheetSide | Left | The side from which the mobile sheet slides in. |
| ShowClose | bool | true | Whether to show the close button in the sheet. |
| ContentClass | string? | — | Additional CSS classes for the sheet content area. |
| CloseOnNavigate | bool | true | Whether to close the mobile menu when navigation occurs. |
| Header | RenderFragment? | — | Optional header content rendered above the main content. |
| Footer | RenderFragment? | — | Optional footer content rendered below the main content. |
| ChildContent | RenderFragment? | — | The main navigation content inside the sheet. |