Free
Pro

Navigation menu

Ply navigation-menu is a horizontal site nav: links plus optional dropdown items on CDK Overlay. Copy it in for marketing headers. It is not an application menubar, a mega-menu panel, a priority+ bar, or a docs rail.

When to use

  • Product marketing headers with a few links and one or two dropdowns.
  • When the nav should stay a landmark (role=navigation) at the top of the page.

When not to use

  • In-app File/Edit menus — use menubar.
  • A full-width promo panel — use mega-menu.
  • Links that overflow into More — use responsive-nav.
  • A docs or settings rail — use sidenav or shell.

Install with npx ply-ui-cli add navigation-menu.

free

View source

Links and a dropdown

HomeDocs

Installation

bash

npx ply-ui-cli add navigation-menu

API Reference

For AI agents

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

bash

npx -y ply-ui-mcp

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

typescript (Example)

// Install: npx ply-ui-cli add navigation-menu
// Paths are relative to aliases.components (default: src/app/components)
import { NavigationMenuItemComponent } from './navigation-menu/navigation-menu-item.component';
import { NavigationMenuLinkDirective } from './navigation-menu/navigation-menu-link.directive';
import { NavigationMenuComponent } from './navigation-menu/navigation-menu.component';

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

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

API reference for navigation-menu
APIMemberTypeDefaultDescription
ply-navigation-menuclassstring''Additional host CSS classes (merged via cn()).
ply-navigation-menuariaLabelunknown'Main'—
ply-navigation-menu-itemclassstring''Additional host CSS classes (merged via cn()).
ply-navigation-menu-itemlabelstring — —
[ply-navigation-menu-link]—— — Styled link inside `ply-navigation-menu`.