# Mega Menu

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

# Mega Menu

A navigation bar with expandable mega panel dropdowns — supports multi-column layouts, grouped links, and horizontal or vertical orientations.

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

<MegaMenu />

## When to Use

-   Large navigation panels with grouped links for complex site structures
-   E-commerce category menus with multi-column product groupings
-   Feature-rich headers that need to display many links organized by section
-   Marketing sites or documentation portals with deep navigation hierarchies

Preview Code

Basic Mega Menu

-   Products
-   Solutions
-   [Pricing](#)
-   [Blog](#)

Preview Code

Single Column Panel

-   Company
-   [Docs](#)

Preview Code

Orientation — interactive

Pick a value to see it applied live. **Horizontal** arranges items in a row; **Vertical** stacks them in a column sidebar style.

HorizontalVertical

-   Products
-   [Docs](#)
-   [Blog](#)

## API Reference

### MegaMenu

Property

Type

Default

Description

Orientation

Lumeo.Orientation

Horizontal

Horizontal (row layout) or Vertical (column layout).

### MegaMenuItem

Property

Type

Default

Description

Label

string

""

The nav item label text.

Href

string?

—

When set, renders as a plain link instead of a dropdown trigger.

ChildContent

RenderFragment?

—

MegaMenuPanel to show when hovering this item.

Disabled

bool

false

Disable the menu item.

Icon

SvgIcon?

null

Optional Blazicons SVG rendered before the label.

### MegaMenuPanel

Property

Type

Default

Description

FullWidth

bool

true

Span the full width of the parent nav container.

Columns

int

4

Number of grid columns for the panel content.

### MegaMenuLink

Property

Type

Default

Description

Title

string

""

Bold link text.

Description

string?

—

Muted description text below the title.

Href

string

"#"

Navigation URL.

Disabled

bool

false

Disable this link.

## Related Components

-   [NavigationMenu](/components/navigation-menu) — Simpler navigation menu for standard site navigation
-   [Menubar](/components/menubar) — Horizontal menu bar for application-style menus
-   [DropdownMenu](/components/dropdown-menu) — Single-column dropdown for simpler menu needs