Scrollspy

Highlights navigation links based on scroll position using IntersectionObserver. Ideal for table of contents sidebars.

Basic Usage

Add data-ug-scrollspy to a nav element containing links that point to section IDs. The scrollspy script automatically highlights the current section.

Scrollspy navigation

...

<nav class="ug-scrollspy" data-ug-scrollspy>
  <div class="ug-scrollspy__nav">
    <a class="ug-scrollspy__link" href="#overview">Overview</a>
    <a class="ug-scrollspy__link" href="#features">Features</a>
    <a class="ug-scrollspy__link" href="#install">Installation</a>
  </div>
</nav>

<!-- Sections with matching IDs -->
<section id="overview">...</section>
<section id="features">...</section>
<section id="install">...</section>

With Nested Links

Use --nested for indented sub-section links.

Nested scrollspy

<nav class="ug-scrollspy" data-ug-scrollspy>
  <div class="ug-scrollspy__nav">
    <a class="ug-scrollspy__link" href="#getting-started">Getting Started</a>
    <a class="ug-scrollspy__link ug-scrollspy__link--nested" href="#installation">Installation</a>
    <a class="ug-scrollspy__link ug-scrollspy__link--nested" href="#configuration">Configuration</a>
    <a class="ug-scrollspy__link" href="#components">Components</a>
    <a class="ug-scrollspy__link ug-scrollspy__link--nested" href="#buttons">Buttons</a>
    <a class="ug-scrollspy__link ug-scrollspy__link--nested" href="#cards">Cards</a>
  </div>
</nav>

Active State

Active link styling

<nav class="ug-scrollspy">
  <div class="ug-scrollspy__nav">
    <a class="ug-scrollspy__link" href="#">Inactive link</a>
    <a class="ug-scrollspy__link ug-scrollspy__link--active" href="#">Active link</a>
    <a class="ug-scrollspy__link" href="#">Inactive link</a>
  </div>
</nav>

JavaScript

Include the scrollspy script (part of unigrid.min.js bundle or load individually):

<!-- Bundled (includes dropdown + tabs + scrollspy) -->
<script src="dist/unigrid.min.js"></script>

<!-- Or individual -->
<script src="dist/scrollspy.js"></script>

Options

Configure via data attributes on the data-ug-scrollspy element:

Attribute	Default	Description
`data-ug-scrollspy-offset`	100	Top offset in pixels before a section is considered active
`data-ug-scrollspy-class`	ug-scrollspy__link--active	CSS class to add to the active link

Sidebar Example

Combine with .ug-sidebar-layout--sticky for a sticky table of contents:

<div class="ug-sidebar-layout ug-sidebar-layout--right ug-sidebar-layout--sticky">
  <aside class="ug-sidebar-layout__sidebar">
    <nav class="ug-scrollspy" data-ug-scrollspy>
      <div class="ug-scrollspy__nav">
        <a class="ug-scrollspy__link" href="#section1">Section 1</a>
        <a class="ug-scrollspy__link" href="#section2">Section 2</a>
      </div>
    </nav>
  </aside>
  <main class="ug-sidebar-layout__main">
    <section id="section1">...</section>
    <section id="section2">...</section>
  </main>
</div>

Class Reference

Class	Description
`.ug-scrollspy`	Scrollspy wrapper (sticky positioning)
`.ug-scrollspy__nav`	Navigation list with left border
`.ug-scrollspy__link`	Navigation link
`.ug-scrollspy__link--active`	Active state (bold, black left border)
`.ug-scrollspy__link--nested`	Indented sub-section link
`data-ug-scrollspy`	Attribute to initialize scrollspy JS
`data-ug-scrollspy-offset`	Top offset in px (default: 100)
`data-ug-scrollspy-class`	Custom active class name