Lumeo

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 />

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

Default

Simple Links

With Badge

API Reference

NavigationMenu

Prop	Type	Default	Description
ChildContent	RenderFragment?	null	The navigation menu content.
Class	string?	null	Additional CSS classes.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

NavigationMenuList

Prop	Type	Default	Description
ChildContent	RenderFragment?	null	The list of navigation menu items.
Class	string?	null	Additional CSS classes.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

NavigationMenuItem

Prop	Type	Default	Description
ChildContent	RenderFragment?	null	The item content (trigger and/or content).
Class	string?	null	Additional CSS classes.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

NavigationMenuTrigger

Prop	Type	Default	Description
ChildContent	RenderFragment?	null	The trigger label content.
Class	string?	null	Additional CSS classes.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

NavigationMenuContent

Prop	Type	Default	Description
ChildContent	RenderFragment?	null	The dropdown panel content.
Class	string?	null	Additional CSS classes.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

NavigationMenuLink

Prop	Type	Default	Description
Href	string?	null	URL the navigation link points to.
ChildContent	RenderFragment?	null	The link content.
Class	string?	null	Additional CSS classes.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

NavigationMenuHamburger

Prop	Type	Default	Description
Open	bool	false	Whether the mobile menu is open.
OpenChanged	EventCallback<bool>	-	Callback when open state changes. Use with @bind-Open.
Class	string?	null	Additional CSS classes.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

NavigationMenuMobile

Prop	Type	Default	Description
ChildContent	RenderFragment?	null	Mobile menu content rendered inside a Sheet.
Open	bool	false	Whether the mobile menu is open.
OpenChanged	EventCallback<bool>	-	Callback when open state changes.
Class	string?	null	Additional CSS classes.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

NavigationMenuIndicator

Prop	Type	Default	Description
ChildContent	RenderFragment?	null	Custom indicator content.
Class	string?	null	Additional CSS classes.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

NavigationMenuViewport

Prop	Type	Default	Description
ChildContent	RenderFragment?	null	Viewport container content.
Class	string?	null	Additional CSS classes.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

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