Free
Pro

Sidenav

<base-sidenav> is a free layout shell for section navigation: a left rail (<base-sidenav-nav>) and a scrollable body (<base-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.

Demo

Overview

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


HTML

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 <base-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 base-ui-cli add sidenav

API Reference

For AI agents

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

bash

npx -y base-ui-mcp

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

typescript (Example)

// Install: npx base-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
APIMemberTypeDefaultDescription
base-sidenavclassstring''Extra host classes merged via `cn()`.
base-sidenavcolorIconStrokedButtonColor | undefinedundefinedColor for the mobile nav toggle button.
base-sidenavlayoutSidenavLayoutMode'auto'Layout chrome mode. `auto` follows the viewport `lg` breakpoint; `mobile` / `desktop` force that chrome (useful for narrow demos).
base-sidenav-body—— — Main content slot for `base-sidenav` (typically hosts a router outlet).
base-sidenav-bodyclassstring''Extra host classes merged via `cn()`.
base-sidenav-nav—— — Left navigation slot for `base-sidenav`.
base-sidenav-navclassstring''Extra host classes merged via `cn()`.