Mega Menu

A full-width dropdown menu panel used for top-level site navigation. The panel automatically positions itself beneath the trigger and spans the full width of the screen.

Pro

Mega Menu — part of Base UI Pro

Unlock it plus 89 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.

Unlock Pro

Basic Mega Menu

Wrap your trigger element with [mega-menu-trigger] inside the <base-mega-menu> component.

Brand

HTML

Rich Content

You can embed any content inside a Mega Menu, including images, cards, and promotional banners.

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add mega-menu

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add mega-menu
// Paths are relative to aliases.components (default: src/app/components)
import { MegaMenuComponent } from './mega-menu/mega-menu.component';

@Component({
  selector: 'app-your-component',
  imports: [
    MegaMenuComponent
  ],
  template: `...`
})
export class YourComponent {}

API for mega-menu — generated from JSDoc in the library source.

API reference for mega-menu
API	Member	Type	Default	Description
`base-mega-menu`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`base-mega-menu`	`menuLabel`	`unknown`	`'Mega menu'`	—