Lumeo

Mega Menu

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

Installation

dotnet add package Lumeo

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

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

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

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 — Simpler navigation menu for standard site navigation
  • Menubar — Horizontal menu bar for application-style menus
  • DropdownMenu — Single-column dropdown for simpler menu needs