# Navigation Menu

Source: https://lumeo.nativ.sh/components/navigation-menu

# Navigation Menu

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

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

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

Preview Code

Default

-   Getting Started
-   Components
-   [Documentation](#)

Preview Code

Simple Links

-   [Home](#)
-   [About](#)
-   [Blog](#)
-   [Contact](#)

Preview Code

With Badge

-   Products
-   [Pricing](#)

## 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.

## Related Components

-   [Menubar](/components/menubar) — For desktop-style application menu bars with keyboard shortcuts
-   [Sidebar](/components/sidebar) — For vertical side navigation with collapsible sections
-   [Breadcrumb](/components/breadcrumb) — For displaying the current page path within a navigation hierarchy