Responsive Nav

<ply-responsive-nav> is a progressive (priority+) navigation bar. Project <ply-responsive-nav-item> children with labels and optional icons. As many items as fit stay visible; the rest spill into a More dropdown from the right as the container shrinks. Leftmost items have the highest priority and remain visible longest.

freepriority+

Live demo — resize the box

Drag the right edge of the preview (or shrink the browser window). Links peel off from the right into the chevron menu.

Hint: grab the southeast corner of the dashed box and drag horizontally.

HTML

<ply-responsive-nav>
  <ply-responsive-nav-item routerLink="/base-elements">Components</ply-responsive-nav-item>
  <ply-responsive-nav-item routerLink="/blocks">Blocks</ply-responsive-nav-item>
  <ply-responsive-nav-item routerLink="/layouts">Layouts</ply-responsive-nav-item>
  <ply-responsive-nav-item routerLink="/templates">Templates</ply-responsive-nav-item>
  <ply-responsive-nav-item routerLink="/learn">Blog</ply-responsive-nav-item>
  <ply-responsive-nav-item routerLink="/pricing">Pricing</ply-responsive-nav-item>
</ply-responsive-nav>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add responsive-nav
// Paths are relative to aliases.components (default: src/app/components)
import { ResponsiveNavItemComponent } from './responsive-nav/responsive-nav-item.component';
import { ResponsiveNavConfig } from './responsive-nav/responsive-nav-tokens';
import { ResponsiveNavComponent } from './responsive-nav/responsive-nav.component';

@Component({
  selector: 'app-responsive-nav-example',
  imports: [
    ResponsiveNavComponent,
    ResponsiveNavItemComponent
  ],
  template: `...`
})
export class ResponsiveNavExampleComponent {}

Install

bash

npx ply-ui-cli add responsive-nav

Icons, router links, and external hrefs

Put any content inside an item — text, icons, or both. Prefer routerLink for in-app routes. Use href (and optional target) for external URLs. When both are set, routerLink wins. Use menuLabel when the overflow menu should show different text than the bar.

Overview

API

Docs

HTML

<ply-responsive-nav>
  <ply-responsive-nav-item routerLink="/base-elements/responsive-nav">
    <ply-icon name="book" class="h-4 w-4 stroke-slate-500 dark:stroke-slate-400"></ply-icon>
    Overview
  </ply-responsive-nav-item>
  <ply-responsive-nav-item href="#sect4">API</ply-responsive-nav-item>
  <ply-responsive-nav-item href="https://github.com/ply-ui-ng/ply" target="_blank">
    Docs
  </ply-responsive-nav-item>
</ply-responsive-nav>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add responsive-nav
// Paths are relative to aliases.components (default: src/app/components)
import { ResponsiveNavItemComponent } from './responsive-nav/responsive-nav-item.component';
import { ResponsiveNavConfig } from './responsive-nav/responsive-nav-tokens';
import { ResponsiveNavComponent } from './responsive-nav/responsive-nav.component';

@Component({
  selector: 'app-responsive-nav-example',
  imports: [
    ResponsiveNavComponent,
    ResponsiveNavItemComponent
  ],
  template: `...`
})
export class ResponsiveNavExampleComponent {}

Install

bash

npx ply-ui-cli add responsive-nav

When to use

Marketing headers and toolbars with more links than a narrow viewport can show.
Any horizontal nav that should degrade gracefully without wrapping to a second line.
Pair with a mobile drawer or <ply-shell> sidebar under ~991px when you hide the bar entirely on small screens.

Installation

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

bash

npx ply-ui-cli add responsive-nav

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 responsive-nav
// Paths are relative to aliases.components (default: src/app/components)
import { ResponsiveNavItemComponent } from './responsive-nav/responsive-nav-item.component';
import { ResponsiveNavConfig } from './responsive-nav/responsive-nav-tokens';
import { ResponsiveNavComponent } from './responsive-nav/responsive-nav.component';

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

API for responsive-nav — generated from JSDoc in the library source.

API reference for responsive-nav
API	Member	Type	Default	Description
`ResponsiveNavConfig`	`linkClass`	`Signal<string>`	—	—
`ply-responsive-nav`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-responsive-nav`	`linkClass`	`unknown`	`RESPONSIVE_NAV_DEFAULT_LINK_CLASS`	Tailwind classes applied to each item link.
`ply-responsive-nav`	`moreLabel`	`unknown`	`'More navigation links'`	Accessible label for the overflow "More" trigger button.
`ply-responsive-nav-item`	`class`	`string`	`''`	Extra classes merged onto the inner link/span.
`ply-responsive-nav-item`	`routerLink`	`string \| readonly (string \| number)[] \| undefined`	`undefined`	In-app route (`RouterLink`). Wins over `href` when both are set.
`ply-responsive-nav-item`	`href`	`string \| undefined`	`undefined`	Absolute or external URL when not using `routerLink`.
`ply-responsive-nav-item`	`target`	`string \| undefined`	`undefined`	Optional `target` for `href` links (e.g. `_blank`).
`ply-responsive-nav-item`	`menuLabel`	`string \| undefined`	`undefined`	Label used in the overflow "More" menu. Defaults to the projected text.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).