Components / Navigation Menu
Navigation Menu
Mega-menu with hover-reveal panels, sectioned link groups, animated caret, optional icons per link, configurable column count, and keyboard navigation. Triggers have aria-controls linkage; Escape closes; focus rings on triggers and items.
navigation v0.8.0
Playground
Examples
Two-trigger mega-menu (default)
<cg-navigation-menu id="demo-nav-menu-basic" style="padding-bottom:340px;"></cg-navigation-menu>With icons per link
<cg-navigation-menu id="demo-nav-menu-icons" style="padding-bottom:380px;"></cg-navigation-menu>Single column (compact list)
<cg-navigation-menu id="demo-nav-menu-1col" columns="1" style="padding-bottom:280px;"></cg-navigation-menu>Three columns (wide panel)
<cg-navigation-menu id="demo-nav-menu-3col" columns="3" style="padding-bottom:340px;"></cg-navigation-menu>Three triggers, deep panels
<cg-navigation-menu id="demo-nav-menu-rich" style="padding-bottom:360px;"></cg-navigation-menu>Import
import { CgNavigationMenu } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-navigation-menu';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | NavMenuItem[] | [] | Top-level menu triggers, each with one or more sections of links |
columns | 1 | 2 | 3 | 4 | 2 | Panel grid column count |
openDelay | number | 80 | Hover open delay (ms) |
closeDelay | number | 120 | Hover close delay (ms) |
Events
| Event | Detail | Description |
|---|---|---|
cg-navigation-menu-select | {menu: string, link: string, href?: string} | A link inside a panel was activated |