Free
Pro

Scroll Nav

<ply-scroll-nav> synchronizes a sidebar TOC with page content. Mark sections with id attributes and link them with [ply-scroll-nav-item]="'section-id'". The host scrolls as one pane; the sidebar sticks to the top while the active item updates as you scroll.

freeshell Powers every Base Elements docs page (including this one).

View source

Basic composition

Put long content in <ply-scroll-nav-content> and the TOC in <ply-scroll-nav-sidebar>. Section ids must match the directive values.

HTML
<ply-scroll-nav>
  <ply-scroll-nav-content>
    <h3 id="intro">Intro</h3>
    <p>...</p>
    <h3 id="api">API</h3>
    <p>...</p>
  </ply-scroll-nav-content>
  <ply-scroll-nav-sidebar>
    <ply-nav-list>
      <button ply-list-item [ply-scroll-nav-item]="'intro'">Intro</button>
      <button ply-list-item [ply-scroll-nav-item]="'api'">API</button>
    </ply-nav-list>
  </ply-scroll-nav-sidebar>
</ply-scroll-nav>

TypeScript

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

// Install: npx ply-ui-cli add scroll-nav
// Paths are relative to aliases.components (default: src/app/components)
import { ScrollNavContentComponent } from './scroll-nav/scroll-nav-content/scroll-nav-content.component';
import { ScrollNavItemDirective } from './scroll-nav/scroll-nav-item.directive';
import { ScrollNavItemComponent } from './scroll-nav/scroll-nav-item/scroll-nav-item.component';
import { ScrollNavSidebarComponent } from './scroll-nav/scroll-nav-sidebar/scroll-nav-sidebar.component';
import { ScrollNavComponent } from './scroll-nav/scroll-nav.component';

@Component({
  selector: 'app-scroll-nav-example',
  imports: [
    ScrollNavComponent,
    ScrollNavContentComponent,
    ScrollNavItemComponent,
    ScrollNavItemDirective,
    ScrollNavSidebarComponent
  ],
  template: `...`
})
export class ScrollNavExampleComponent {}

Install

bash
npx ply-ui-cli add scroll-nav

When to use

  • Long documentation or marketing pages with an on-this-page outline.
  • Component API pages (every Base Elements demo already uses this shell).
  • Prefer <ply-sidenav> when navigation switches routes, not scroll sections.

Installation

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

bash
npx ply-ui-cli add scroll-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 scroll-nav
// Paths are relative to aliases.components (default: src/app/components)
import { ScrollNavContentComponent } from './scroll-nav/scroll-nav-content/scroll-nav-content.component';
import { ScrollNavItemDirective } from './scroll-nav/scroll-nav-item.directive';
import { ScrollNavItemComponent } from './scroll-nav/scroll-nav-item/scroll-nav-item.component';
import { ScrollNavSidebarComponent } from './scroll-nav/scroll-nav-sidebar/scroll-nav-sidebar.component';
import { ScrollNavComponent } from './scroll-nav/scroll-nav.component';

@Component({
  selector: 'app-your-component',
  imports: [
    ScrollNavComponent,
    ScrollNavContentComponent,
    ScrollNavItemComponent,
    ScrollNavItemDirective,
    ScrollNavSidebarComponent
  ],
  template: `...`
})
export class YourComponent {}

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

API reference for scroll-nav
APIMemberTypeDefaultDescription
ply-scroll-nav—— — Docs/layout shell: one scrollport with a sticky TOC sidebar. Scroll lives on this host; `ply-scroll-nav-sidebar` sticks to the top.
ply-scroll-navclassstring''Additional host CSS classes (merged via cn()).
ply-scroll-nav-content—— — Main content column for `ply-scroll-nav`. Grows with its children; scrolling is handled by the parent `ply-scroll-nav` host (not this element).
ply-scroll-nav-contentclassstring''Additional host CSS classes (merged via cn()).
ply-scroll-nav-item—— — A section within a scroll-nav component that is linked to a sidebar item.
ply-scroll-nav-itemclassstring''Additional host CSS classes (merged via cn()).
ply-scroll-nav-sidebar—— — Sticky TOC sidebar for `ply-scroll-nav`. Sticks to the top of the parent scrollport; it does not scroll independently.
ply-scroll-nav-sidebarclassstring''Additional host CSS classes (merged via cn()).
[ply-scroll-nav-item]ply-scroll-nav-itemstring''—
[ply-scroll-nav-item](clicked)ScrollNavItemDirective — The clicked output property.