Anchor nav

An in-page table of contents (.casca-anchor-nav): a list of #anchor links for a long dashboard or document. The active item is marked with aria-current (which a screen reader also announces); pure CSS cannot derive the scrolled-to section as the link's own state, so the author or server sets it. It degrades to a plain link list everywhere.

Vertical (default)

<nav class="casca-anchor-nav" aria-label="On this page">
  <a class="casca-anchor-nav-link" href="#kpis" aria-current="true">KPIs</a>
  <a class="casca-anchor-nav-link" href="#channels">Channels</a>
</nav>

Horizontal (data-orientation="horizontal")

A top-bar table of contents. The active marker moves from a leading rail to an underline.

<nav class="casca-anchor-nav" data-orientation="horizontal"> ... </nav>

Sticky

Add data-sticky so a vertical nav follows the reader down a long page (this gallery uses a sticky horizontal nav at the top).

<nav class="casca-anchor-nav" data-sticky> ... </nav>

See it assembled →