Lumeo
Package LumeoA11yfocus-managedkeyboardmenuDepends onsheetTested Tier 3 · 45 testsView source ↗

Navigation Menu

A collection of links for navigating websites, with support for flyout content panels.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<NavigationMenu />
Tested Tier 3 · A11y + behavior
all components →
Render Behavior A11y Keyboard Scale E2E

45 tests across 11 files. Auto-generated from the test suite.

When to Use

  • Site-wide navigation in headers with links and flyout panels
  • Header navigation bars with grouped link categories
  • Mega menus displaying rich content like descriptions, badges, and icons

Open panel: none

Bind Value (matching each NavigationMenuItem's Value) to drive which panel is open from outside. DelayDuration tunes the hover-forgiveness window in milliseconds; DefaultValue opens one panel on first render in uncontrolled mode.

API Reference

NavigationMenu

Prop Type Default Description
ChildContent RenderFragment? — The NavigationMenuList (and typically a NavigationMenuViewport) that make up the menu.
Label string "Main" Accessible name for the <nav> landmark. Defaults to "Main".
Value string? — Controlled value of the currently-open item. Bind with @bind-Value/ValueChanged. The value matches the open Value (or its auto id when none is set); null means no submenu is open. Leave unset for uncontrolled use.
DefaultValue string? — Initial open item for uncontrolled use (ignored once Value is bound). null (default) opens nothing.
DelayDuration int 150 Grace window in milliseconds before a hovered submenu closes after the pointer leaves it. Radix's forgiveness delay: moving between adjacent triggers, or briefly slipping off the panel, does not immediately dismiss. Defaults to 150ms.
Class string? — Additional CSS classes merged onto the root nav element.
AdditionalAttributes Dictionary<string, object>? — Unmatched attributes are splatted onto the root nav element.

Events

ValueChanged EventCallback<string?> Raised when the open item changes (user hover/click/keyboard, or an item close). Carries the new open item's value, or null when closed.

NavigationMenuList

Prop Type Default Description
ChildContent RenderFragment? — The NavigationMenuItem elements that make up the top-level menu.
Class string? — Additional CSS classes merged onto the root ul element.
AdditionalAttributes Dictionary<string, object>? — Unmatched attributes are splatted onto the root ul element.

NavigationMenuItem

Prop Type Default Description
ChildContent RenderFragment? — Typically a NavigationMenuTrigger plus NavigationMenuContent, or a plain NavigationMenuLink for a leaf item.
Value string? — Stable identity for this item, used by the controlled Value binding to say which item is open. When unset an auto id is used, so uncontrolled menus keep working unchanged.
Class string? — Additional CSS classes merged onto the root li element.
AdditionalAttributes Dictionary<string, object>? — Unmatched attributes are splatted onto the root li element.

NavigationMenuTrigger

Prop Type Default Description
ChildContent RenderFragment? — The trigger's label content, rendered before the chevron indicator.
Class string? — Additional CSS classes merged onto the root button element.
AdditionalAttributes Dictionary<string, object>? — Unmatched attributes are splatted onto the root button element.

NavigationMenuContent

Prop Type Default Description
ChildContent RenderFragment? — The submenu panel content shown when the owning NavigationMenuItem is open.
Class string? — Additional CSS classes merged onto the root panel element.
AdditionalAttributes Dictionary<string, object>? — Unmatched attributes are splatted onto the root panel element.

NavigationMenuLink

Prop Type Default Description
Href string? — The link's navigation target.
IsActive bool false When true, the link is the user's current location and is rendered with aria-current="page". Lets screen-reader users identify the active item in a nav landmark.
ChildContent RenderFragment? — The link's content.
Class string? — Additional CSS classes merged onto the root a element.
AdditionalAttributes Dictionary<string, object>? — Unmatched attributes are splatted onto the root a element.

NavigationMenuHamburger

Prop Type Default Description
Open bool false Whether the mobile menu this hamburger controls is open. Pair with OpenChanged for two-way binding.
IsOpen bool false Obsolete alias for Open.
Class string? — Additional CSS classes merged onto the root button element.
AdditionalAttributes Dictionary<string, object>? — Unmatched attributes are splatted onto the root button element.

Events

OpenChanged EventCallback<bool> Raised when the button is clicked and toggles Open.
IsOpenChanged EventCallback<bool> Obsolete alias for OpenChanged.

NavigationMenuMobile

Prop Type Default Description
ChildContent RenderFragment? — The menu content rendered inside the slide-out sheet.
Open bool false Whether the mobile menu sheet is open. Pair with OpenChanged for two-way binding.
IsOpen bool false Obsolete alias for Open.
Class string? — Additional CSS classes merged onto the sheet content panel.
AdditionalAttributes Dictionary<string, object>? — Unmatched attributes are splatted onto the inner content wrapper.

Events

OpenChanged EventCallback<bool> Raised when the sheet's open state changes (e.g. dismissed by outside click or Escape).
IsOpenChanged EventCallback<bool> Obsolete alias for OpenChanged.

NavigationMenuIndicator

Prop Type Default Description
ChildContent RenderFragment? — Reserved for a custom indicator visual; currently unused (the default arrow caret always renders).
Class string? — Additional CSS classes merged onto the root element.
AdditionalAttributes Dictionary<string, object>? — Unmatched attributes are splatted onto the root element.

NavigationMenuViewport

Prop Type Default Description
ChildContent RenderFragment? — Optional content rendered inside the viewport frame while any menu item is open.
Class string? — Additional CSS classes merged onto the outer positioning wrapper.
AdditionalAttributes Dictionary<string, object>? — Unmatched attributes are splatted onto the outer positioning wrapper.

Related Components

  • Menubar — For desktop-style application menu bars with keyboard shortcuts
  • Sidebar — For vertical side navigation with collapsible sections
  • Breadcrumb — For displaying the current page path within a navigation hierarchy

Cookies & consent

We use a minimal set of cookies to run the site and optionally measure anonymous usage to improve it. You choose what's on.Read the privacy policy.