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).

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.