Sidenav

Ply sidenav is a free docs/section shell: a left rail and a scrollable body, with a hamburger on small screens. Copy sidenav in. It is not the Pro application shell, and it is not SidebarService (a leftover open/close boolean used by the marketing site rail).

When to use

Component docs, settings groups, and hubs that need a section list beside content.
When you want a free layout rail without dashboard chrome.

When not to use

Product chrome with page/dashboard modes, mini rail, and footer — use shell (Pro) and ShellService.
Toggling a one-off sidebar boolean — SidebarService is that leftover, not this layout.

Install with npx ply-ui-cli add sidenav.

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

View source

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.

Overview

Body content scrolls independently of the nav rail. Use the links on the left to switch panels.

HTML

<!-- 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>

TypeScript

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 {}

Install

bash

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:

bash

npx ply-ui-cli add sidenav

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 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 {}

API for sidenav — generated from JSDoc in the library source.

API reference for sidenav
API	Member	Type	Default	Description
`ply-sidenav`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-sidenav`	`color`	`IconStrokedButtonColor \| undefined`	`undefined`	Color for the mobile nav toggle button.
`ply-sidenav`	`layout`	`SidenavLayoutMode`	`'auto'`	Layout chrome mode. `auto` follows the viewport `lg` breakpoint; `mobile` / `desktop` force that chrome (useful for narrow demos).
`ply-sidenav-body`	`—`	`—`	—	Main content slot for `ply-sidenav` (typically hosts a router outlet).
`ply-sidenav-body`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-sidenav-nav`	`—`	`—`	—	Left navigation slot for `ply-sidenav`.
`ply-sidenav-nav`	`class`	`string`	`''`	Extra host classes merged via `cn()`.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 218 components and blocks (128 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).