--- title: Navigation Menu description: Accessible navigation menu with mega-menu support visibility: guest draft: false --- # Navigation Menu The `` component creates a top-level navigation with flyout panels (mega menus). It combines simple links with rich dropdown panels triggered by hover or click, following the [WAI-ARIA Disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/). ## Usage :::preview{title="Navigation Menu with Flyout Panels"} WireKit — UI component library for Laravel Livewire Starter Kits — Pre-built Laravel application templates Pricing Blog ::: ## Simple Links vs Flyout Triggers Items come in two modes: - **Simple link:** pass `href` -- renders a plain navigation link - **Flyout trigger:** pass `trigger` -- renders a disclosure button that opens a panel on hover or click ```blade {{-- Simple link -- navigates directly --}} Pricing {{-- Flyout trigger -- opens a panel --}}
Panel content here
 ``` ## Active State Mark the currently active item with the `active` prop on links inside panels: :::preview{title="Active Link in Flyout Panel"} Documentation Blog Changelog Pricing ::: In a real Laravel app, pair the `active` prop with `request()->is('…')` (or `request()->routeIs('…')`) so the current page is highlighted automatically — e.g. `:active="request()->is('docs*')"`. Active links receive an accent underline and use `aria-current="page"`. ## Mega Menu Layout For complex navigation with multiple columns, use CSS Grid inside the panel: :::preview{title="Mega Menu with Columns"}

By Industry

SaaS E-Commerce Fintech

By Team Size

Startup Scale-up Enterprise

Resources

Case Studies Webinars White Papers
Pricing ::: ## Behavior - **Hover-to-open** with configurable delay prevents accidental panel triggers - **Bridge gap** keeps the panel open while the cursor travels from trigger to panel - **[Floating UI](https://floating-ui.com/)** (bundled ~3.5 KB) positions panels below their triggers with flip and shift - **Click outside** closes any open panel - **Livewire SPA** navigation (`wire:navigate`) automatically closes open panels - **Transitions** use opacity + slide for smooth panel reveal ## Props ### `` | Prop | Type | Default | Description | | --- | --- | --- | --- | | `scope` | `string\|null` | `null` | Scoped personalization key | ### `` | Prop | Type | Default | Description | | --- | --- | --- | --- | | `trigger` | `string\|null` | `null` | Label text for flyout trigger (enables panel mode) | | `href` | `string\|null` | `null` | URL for simple link mode (no panel) | | `scope` | `string\|null` | `null` | Scoped personalization key | ### `` | Prop | Type | Default | Description | | --- | --- | --- | --- | | `href` | `string` | `'#'` | Link destination | | `active` | `bool` | `false` | Highlights as current page (sets `aria-current="page"`) | | `scope` | `string\|null` | `null` | Scoped personalization key | ## Sub-Components | Component | Purpose | | --- | --- | | `navigation-menu.item` | Top-level trigger (flyout) or simple link | | `navigation-menu.link` | Navigation link inside a flyout panel | ## Accessibility - Navigation wrapper: `