Laioutr
Surfaces

Navigation Menu

Compound navigation primitive with text-link triggers, content columns, headlines, separators, and an optional logo or icon item.

Overview

NavigationMenu is the Reka-UI-backed primitive for header-style nav with text-link triggers and content panels. It is a compound:

  • NavigationMenu is the root.
  • NavigationMenuTextItem (and NavigationMenuTextItemWrapper) render top-level text links.
  • NavigationMenuIconItem renders icon-only top-level items.
  • NavigationMenuContentColumn, ContentList, ContentLink, ContentHeadline, and ContentSeparator compose the panel.

It is typically used inside HeaderBasic's desktop slot. The hover panel anchors to the trigger <li> with top: 100%; left: 0; z-index: var(--z-index-popover) so it sits naturally below the header rather than at a fixed pixel offset. Text-item surface tones are restricted to Exclude<SurfaceTone, 'bright'> because the triggers live on neutral header chrome.

Reach for NavigationMenu when the header needs simple text links with optional flyouts. For catalog-driven mega menus, use the dedicated MegaMenu compound instead.

Key Business & UX Benefits

  • Compound parts (text items, icon items, content columns, headlines, separators) give marketing a kit to build editorial flyouts without bespoke header code per campaign.
  • Hover panels anchor to the trigger position rather than fixed pixel offsets, so the menu still lines up when the header height or branding changes.
  • Surface-tone constraints keep text triggers legible on every header treatment, protecting brand consistency on international and seasonal skins.
  • Pairs cleanly with MegaMenu for catalog-driven flows, so teams can grow from a simple link header to a full mega menu without swapping components mid-project.

Usage

LNavigationMenu

Feature List

  • Compound primitive: root plus `NavigationMenuTextItem`, `IconItem`, `ContentColumn`, `ContentList`, `ContentLink`, `ContentHeadline`, and `ContentSeparator`
  • Hover panels anchor to the trigger `<li>` with `top: 100%; left: 0; z-index: var(--z-index-popover)`, so flyouts line up when header height changes
  • Text-item `surfaceTone` typed as `Exclude<SurfaceTone, 'bright'>`, restricting triggers to the neutral header chrome they're designed for
  • Typically used inside `HeaderBasic`'s desktop slot, so the same primitive backs every basic header
  • Pairs with `MegaMenu` for catalog-driven flyouts, so teams can grow from simple links to a full mega menu without swapping components
  • Built on reka-ui, so keyboard navigation, focus management, and ARIA semantics ship out of the box

API Reference

LNavigationMenu

PropDefaultType
asstring
surfaceTonelight
valuestring
SlotType
default{}
EventType
select(event: "select", value: string): void
update:value(event: "update:value", value: string): void

LNavigationMenuContentColumn

PropDefaultType
width243pxstring
SlotType
default{}

LNavigationMenuContentHeadline

SlotType
default{}

LNavigationMenuContentLink

PropDefaultType
hrefrequiredstring
targetstring
SlotType
default{}

LNavigationMenuContentList

SlotType
default{}

LNavigationMenuContentSeparator

LNavigationMenuIconItem

PropDefaultType
labelrequiredstring
activeboolean
disabledboolean
countstring
hrefstring
orientationvertical"vertical" | "horizontal"
SlotType
default{}
content{}

LNavigationMenuTextItem

PropDefaultType
asstring
hrefrequiredstring
activeboolean
disabledboolean
inTopbarboolean
surfaceTone"dark" | "light"
orientationvertical"vertical" | "horizontal"
variantstring
SlotType
default{}
content{}

LNavigationMenuTextItemWrapper

PropDefaultType
asdiv"button" | "a" | "div"

Element to render the wrapper as. Defaults to 'div' for backwards compatibility with the legacy nested-button pattern. Set to 'button' or 'a' when the wrapper itself should be the interactive element — required for reka-ui as-child prop merging (e.g. as a direct child of <DropdownMenuTrigger as-child>).

surfaceTone"dark" | "light"
borderbottom"bottom" | "full"
inTopbarboolean
variantstring
SlotType
default{}

Context Menu

Reka-UI-backed primitive for right-click and long-press menus.

Button

Themed call-to-action control with size, variant, icon, link, and loading state support.

Copyright © 2026 Laioutr GmbH