Mega Menu
ProMulti-column dropdown header navigation. Top-level items link directly or open a mega panel with columns of links (headings, descriptions, badges, icons) and an optional featured promo. Opens on hover or click, with a hover bridge, animated panel and keyboard support.
</>sv-mega-menu mega menunavigationheaderdropdownmenuecommerce
import { SvMegaMenuComponent } from '@styloviz-pro/mega-menu';Demo & usage
Basic usage
ProUsage example — open the gallery for the full interactive demo.
Pro
An interactive demo for this component lives in the gallery.
Open live demoMore examples
Click to open (touch-friendly)
ProCompact + active highlight
ProLet the browser navigate (the default)
ProWhen to use
- Job: destination links — renders real `<a href>` links to global destinations across the site (compare all seven in the “Choosing a navigation pattern” guide under Guides).
- A storefront / marketing header where a section fans out into many links across columns.
- You want a featured promo (image + CTA) alongside the link columns.
- For a simple single-column menu, use a Dropdown Menu instead; for in-page section switching, use Tabs.
Async states
None — this component has nothing to load, so it has no loading, empty or error state to drive.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| itemsrequired | readonly MegaMenuItem[] | — | Top-level navigation items. |
| trigger | MegaMenuTrigger | 'hover' | How panels open. |
| size | MegaMenuSize | 'md' | Nav item size. |
| activeId | string | '' | Id of the active item — highlights the matching trigger. |
| closeDelay | number | 150 | Delay (ms) before a hovered panel closes on mouse-leave. |
| openDelay | number | 100 | Delay (ms) before hovering an item opens its panel, when no panel is open yet. Switching between items while one is already open is always immediate. Set to `0` to open on the first pointer enter. |
| mobileBreakpoint | number | 768 | Viewport width below which the menu becomes a drawer instead of hover panels. Set to `0` to keep the desktop form at every size. |
| mobileMenuLabel | string | 'Menu' | Accessible label for the button that opens the mobile drawer. |
| navigation | MegaMenuNavigation | 'link' | Who navigates when an entry has an `href` — the browser (`'link'`) or your router, via the outputs (`'emit'`). An entry with no `href` always emits. |
Outputs
| Event | Payload type | Description |
|---|---|---|
| linkSelect | MegaMenuLink | Emitted when a panel link is activated. |
| itemSelect | MegaMenuItem | Emitted when a top-level (link) item is activated. |
| featuredSelect | MegaMenuFeatured | Emitted when the featured promo card is activated and this component cancelled the browser's navigation — same rule as the other two. It exists because the card had **no output at all**: a featured promo with no `href` swallowed the click and closed the menu, which is a dead control in the most prominent slot of the panel. |
Customization & theming
- Hover or click trigger, with a configurable close delay.
- Swaps to a Drawer below `mobileBreakpoint` — there is no small version of a multi-column panel, so it becomes a different control rather than a squeezed one.
- Columns with optional headings; per-link description, badge and leading icon.
- Optional featured promo panel with image, copy and CTA.
- Three sizes and active-item highlighting via `activeId`.
Best practices
- Do: Group links into columns with short `heading`s; keep each panel to 2–4 columns.
- Do: Use `trigger="click"` when touch users are a priority — hover panels are desktop-first.
- Do: Pass `activeId` so the current section stays highlighted as users navigate.
- Do: Routing through the router? Set `navigation="emit"`. The outputs fire only when the component cancelled the browser's own navigation, so `link` mode plus a `router.navigate` listener would navigate twice.
- Tip: Keep the `href` on every item even in `emit` mode — it is what makes middle-click, ⌘-click and "copy link address" work, and those are never intercepted.
- Do: It ships its own mobile form: below `mobileBreakpoint` (768 by default) it swaps to a Drawer. Set `mobileBreakpoint="0"` only if your shell already provides a mobile nav.
Accessibility
- Triggers expose `aria-haspopup` and `aria-expanded`; Escape closes the open panel.
- Panel links are real anchors and are only in the tab order while their panel is open.
- Chevron rotation and the featured image are decorative (aria-hidden); focus states are visible in light and dark mode.
Feedback on Mega Menu
Spotted a gap in this page, or something that didn't work as described? Comments are GitHub Discussions in the public styloviz/community repo, so posting needs a GitHub account.