Responsive Nav

<base-responsive-nav> is a progressive (priority+) navigation bar. Project <base-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.

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.

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 <base-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:

npx base-ui-cli add responsive-nav

import { ResponsiveNavComponent, ResponsiveNavItemComponent } from '@lussos/base-ui';

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