+
+ Navigation · NavigationMenu
+ NavigationMenu
+
+ Top-level site navigation with mega-menus — a horizontal bar of
+ Triggers, each potentially exposing a rich Content panel.
+ One submenu open at a time; hover or focus on a sibling Trigger
+ while another is open swaps Content without a close/re-open
+ cycle. Soma owns active-item state + hover delays
+ (openDelay / skipDelayDuration /
+ closeDelay) + the indicator rect CSS vars +
+ directional swap motion (data-motion).
+
+
+
+ parts{compiled.parts.order.length}
+
+
+ events{events.length}
+
+
+ sizes3
+
+
+ active {value ?? '—'}
+
+
+
+
+
+
+
+
+
+ Products
+
+
+
+
+
+
+ Solutions
+
+
+
+
+
+
+ Pricing
+
+
+
+ Docs
+
+
+
+
+
+
+ trace
+ {#if trace.length === 0}
+ hover or focus a trigger to open a mega-menu
+ {:else}
+ {#each trace.slice(0, 3) as entry (entry.at)}
+ {entry.event} · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}
+ {fmtTime(entry.at)}
+ {/each}
+ {/if}
+
+ value {value ?? '—'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if tab === 'live'}
+
+ {/if}
+
+ {#if tab === 'api'}
+
+ API reference
+ 7 parts: Provider, List, Item, Trigger, Content, Link, Indicator.
+
+ Provider
+
+
+ | Prop | Type | Default | Description |
|---|
+
+ | value bindable | string | null | null | Currently open item value. |
+ | orientation | 'horizontal' | 'vertical' | 'horizontal' | Bar layout axis. |
+ | openDelay | number | 200 | Hover-to-open delay (ms). |
+ | skipDelayDuration | number | 100 | Hover-swap delay between sibling triggers (ms). |
+ | closeDelay | number | 300 | Close delay after pointer exit (ms). |
+ | hoverEnabled | boolean | true | Disable to require click-only opening. |
+ | loop | boolean | true | Wrap arrow nav between triggers. |
+ | size eidos | 'sm' | 'md' | 'lg' | 'md' | Visual size — trigger padding + font. |
+
+
+
Item · Trigger · Content · Link · Indicator
+
+ Item is the wrapper around each trigger / content pair (gets value for routing in the bar's value binding). Trigger renders a native <button> with chevron affordance; Link renders <a> with aria-current support — both styled by the recipe with the same flat in-bar chrome, NOT routed through <Button>. Indicator is a 2px underline that slides between active triggers via CSS vars ({`--navigation-menu-indicator-{x,y,w,h}`}) written by soma.
+
+
+ {/if}
+
+ {#if tab === 'morfo'}
+
+
+ morfo
+ · declarative contract
+
+ Source: src/uix/morfo/components/navigation-menu.ts.
+
+
+
+ | Field | Value |
|---|
+
+ | name | "{navigationMenuMorfo.name}" |
+ | kebab | "{navigationMenuMorfo.kebab}" |
+ | parts.length | {navigationMenuMorfo.parts.length} |
+ | events.length | {events.length} |
+
+
+
Parts
+
+
+ | Part | Marker | Element | Role | Archetype | States | Optional |
|---|
+
+ {#each partsList as part (part.kebab)}
+
+ | {part.kebab} |
+ [{part.marker}] |
+ <{part.defaultElement}> |
+ {part.role ?? '—'} |
+ {part.archetype ?? '—'} |
+ {part.states.length ? part.states.join(' | ') : '—'} |
+ {part.optional ? 'yes' : 'no'} |
+
+ {/each}
+
+
+
Events declaration
+
+
+ | name | family | verb | sequence | intent | target |
|---|
+
+ {#each events as action (action.name)}
+ {@const sem = action.semantic}
+ {@const intentDecl = 'intent' in sem ? sem.intent : undefined}
+ {@const intentStr = typeof intentDecl === 'string' ? intentDecl : intentDecl ? `fromProp:${(intentDecl as { fromProp?: string }).fromProp ?? '?'}` : '—'}
+
+ | {action.name} |
+ {sem.family} |
+ {sem.verb ?? '—'} |
+ {sem.sequence ?? 'pre'} |
+ {intentStr} |
+ {action.target} |
+
+ {/each}
+
+
+
+ {/if}
+
+ {#if tab === 'sema'}
+
+
+ sema
+ · events
+
+
+
+
+ | Name | Family | Verb | Sequence | Intent | Play |
|---|
+
+ {#each events as action (action.name)}
+ {@const intentDecl = 'intent' in action.semantic ? action.semantic.intent : undefined}
+ {@const effectiveIntent = typeof intentDecl === 'string' ? intentDecl : undefined}
+
+ | {action.name} |
+ {action.semantic.family} |
+ {action.semantic.verb ?? '—'} |
+ {action.semantic.sequence ?? 'pre'} |
+ {effectiveIntent ?? '—'} |
+
+
+ |
+
+ {/each}
+
+
+
+ {/if}
+
+ {#if tab === 'recipe'}
+
+ Eidos recipe
+ Selectors at src/uix/eidos/components/navigation-menu/navigation-menu.css.
+
+
+ | Selector | Source | What it paints |
|---|
+
+ | [data-navigation-menu] | eidos | Root bar — inline-flex container with relative positioning. |
+ | [data-navigation-menu][data-size] | eidos | Size scale — trigger padding + font + list gap. |
+ | [data-navigation-menu-list] | morfo | Horizontal/vertical flex list of items. |
+ | [data-navigation-menu-trigger], [data-navigation-menu-link] | morfo | Flat in-bar chrome — transparent bg, hover tint, focus ring. |
+ | [data-navigation-menu-trigger][data-state='open'] | morfo | Open-state tint + chevron rotation. |
+ | [data-navigation-menu-link][aria-current='page'] | morfo | Active-page accent. |
+ | [data-navigation-menu-content] | morfo | Mega-menu panel chrome + entrance animation. |
+ | [data-navigation-menu-content][data-motion] | morfo | Directional slide on trigger swap (from-start/end + to-start/end). |
+ | [data-navigation-menu-indicator] | morfo | 2px underline that slides via CSS vars ({`--navigation-menu-indicator-{x,y,w,h}`}). |
+
+
+
+ {/if}
+
+ {#if tab === 'a11y'}
+
+ Accessibility
+
+ Root renders <nav> with translated aria-label
+ ("Main"). Each Trigger has aria-haspopup="menu",
+ aria-expanded and aria-controls; Content
+ is the labelled mega-menu region. Links use aria-current="page"
+ when the route matches.
+
+
+ Keyboard
+
+
+ | Key | Action |
|---|
+
+ | ArrowRight / ArrowLeft on Trigger | Move focus to next/previous Trigger (horizontal orientation; RTL inverts). |
+ | ArrowDown / ArrowUp on Trigger | Open the menu and move focus into the Content (vertical orientation: prev/next instead). |
+ | Enter / Space on Trigger | Toggle the menu open/close. |
+ | Escape | Close the menu, focus stays on Trigger. |
+ | Home / End | First / last Trigger. |
+ | Tab | Move focus into the Content if open; otherwise advance past the bar. |
+
+
+
ARIA contract
+
+
+ | Part | Attribute | Value |
|---|
+
+ | navigation-menu | aria-label | "Main" (translated) |
+ | list | role | "list" |
+ | trigger | aria-haspopup | "menu" |
+ | trigger | aria-expanded | "true" | "false" |
+ | trigger | data-state | "open" | "closed" |
+ | content | role | "menu" |
+ | content | data-motion | "from-start" | "from-end" | "to-start" | "to-end" |
+ | link | aria-current | "page" (active route only) |
+
+
+
+ {/if}
+