Sidenav

<ply-sidenav> is a free layout shell for section navigation: a left rail (<ply-sidenav-nav>) and a scrollable body (<ply-sidenav-body>). On small screens a hamburger toggles the nav; the mobile breadcrumb label follows the active routerLinkActive item.

freeshell Used by Base Elements, Blocks, and Layouts hubs — install with the CLI.

Basic composition

Project nav items with routerLink / routerLinkActive="!text-blue-600" (the active class is how the shell picks the mobile label). Put page content or a <router-outlet> in the body.

<!-- Force mobile chrome (e.g. in a 375px preview frame) -->
<ply-sidenav layout="mobile">...</ply-sidenav>

<!-- Force desktop chrome -->
<ply-sidenav layout="desktop">...</ply-sidenav>

<!-- Default: follow the viewport lg breakpoint -->
<ply-sidenav>
  <ply-sidenav-nav>
    <ply-nav-list>
      <button ply-list-item routerLink="overview" routerLinkActive="text-blue-600! dark:text-blue-400!">Overview</button>
      <button ply-list-item routerLink="settings" routerLinkActive="text-blue-600! dark:text-blue-400!">Settings</button>
    </ply-nav-list>
  </ply-sidenav-nav>
  <ply-sidenav-body>
    <router-outlet></router-outlet>
  </ply-sidenav-body>
</ply-sidenav>

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

// Install: npx ply-ui-cli add sidenav
// Paths are relative to aliases.components (default: src/app/components)
import { SidenavBodyComponent } from './sidenav/sidenav-body/sidenav-body.component';
import { SidenavNavComponent } from './sidenav/sidenav-nav/sidenav-nav.component';
import { SidenavComponent } from './sidenav/sidenav.component';

@Component({
  selector: 'app-sidenav-example',
  imports: [
    SidenavBodyComponent,
    SidenavComponent,
    SidenavNavComponent
  ],
  template: `...`
})
export class SidenavExampleComponent {}

npx ply-ui-cli add sidenav

When to use

• Docs / catalog hubs with nested routes (Base Elements, Blocks, Layouts).
• App section chrome (settings, admin) where the left rail switches views.
• Prefer <ply-scroll-nav> for in-page section TOCs on a single long page.

Installation

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

npx ply-ui-cli add sidenav

npx -y ply-ui-mcp

// Install: npx ply-ui-cli add sidenav
// Paths are relative to aliases.components (default: src/app/components)
import { SidenavBodyComponent } from './sidenav/sidenav-body/sidenav-body.component';
import { SidenavNavComponent } from './sidenav/sidenav-nav/sidenav-nav.component';
import { SidenavComponent } from './sidenav/sidenav.component';

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