ResponsiveNav

A responsive navigation with a hamburger menu on mobile viewports. The ResponsiveNavTrigger is automatically hidden on desktop via md:hidden, while the ResponsiveNavContent renders inside a slide-out Sheet from the left. On desktop, use hidden md:flex on inline navigation to show it only on larger screens.

Mobile menu with Header and Footer render fragments for branding and call-to-action buttons. The header appears at the top with a border separator, and the footer sticks to the bottom with a top border. This pattern is ideal for marketing sites that need prominent sign-in/sign-up buttons in the mobile menu.

Use custom content inside ResponsiveNavTrigger to replace the default hamburger icon with a branded button or custom icon. Set Side on ResponsiveNavContent to control which edge the sheet slides in from. Use the Class parameter on the trigger to style it with custom colors or backgrounds.

Use the Class parameter on ResponsiveNavTrigger and ContentClass on ResponsiveNavContent to apply custom styling. Here, the trigger uses a gradient background, and the sheet content uses a tinted background for a branded mobile menu experience.

Use ResponsiveNavItems to define navigation items once and have them automatically rendered as a desktop NavigationMenu and a mobile Sheet-based menu. Provide a list of NavItemDefinition objects with optional Children for dropdown groups. This eliminates duplicating navigation links for desktop and mobile layouts.

A real-world composition pattern for a complete responsive header with logo, desktop navigation, and mobile menu. This pattern pairs ResponsiveNavProvider with a full header layout including action buttons. The mobile sheet includes Header for branding, categorized navigation sections, and a Footer with call-to-action buttons.