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.
Unlock it plus 90 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.
Wrap your trigger element with [mega-menu-trigger] inside the <ply-mega-menu> component.
<ply-mega-menu>
<button mega-menu-trigger ply-button color="transparent">
Products
</button>
<div class="max-w-7xl mx-auto p-6 grid grid-cols-3">
<!-- Columns of links -->
</div>
</ply-mega-menu>TypeScript
import { Component } from '@angular/core';
// Install: npx ply-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-mega-menu-example',
imports: [
MegaMenuComponent
],
template: `...`
})
export class MegaMenuExampleComponent {}Install
npx ply-ui-cli add mega-menu
You can embed any content inside a Mega Menu, including images, cards, and promotional banners.
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-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-mega-menu-example',
imports: [
MegaMenuComponent
],
template: `...`
})
export class MegaMenuExampleComponent {}Install
npx ply-ui-cli add mega-menu
Run the following command to add this component to your project:
npx ply-ui-cli add mega-menu
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-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 | Member | Type | Default | Description |
|---|---|---|---|---|
ply-mega-menu | class | string | '' | Additional host CSS classes (merged via cn()). |
ply-mega-menu | menuLabel | unknown | 'Mega menu' | — |
Content