Free
Pro

Scroll Nav

<base-scroll-nav> synchronizes a sidebar TOC with page content. Mark sections with id attributes and link them with [base-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 <base-scroll-nav-content> and the TOC in <base-scroll-nav-sidebar>. Section ids must match the directive values.

HTML

<base-scroll-nav>
  <base-scroll-nav-content>
    <h3 id="intro">Intro</h3>
    <p>...</p>
    <h3 id="api">API</h3>
    <p>...</p>
  </base-scroll-nav-content>
  <base-scroll-nav-sidebar>
    <base-nav-list>
      <button base-list-item [base-scroll-nav-item]="'intro'">Intro</button>
      <button base-list-item [base-scroll-nav-item]="'api'">API</button>
    </base-nav-list>
  </base-scroll-nav-sidebar>
</base-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 <base-sidenav> when navigation switches routes, not scroll sections.

Installation

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

bash

npx base-ui-cli add scroll-nav

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