Scroll spy

Open fullscreen

<ol class="mp c-scroll-spy u-flow--xs ">
  <li><a href="#features-and-benefits">Features and benefits</a></li>
  <li><a href="#key-components">Key components</a></li>
  <li><a href="#use-cases">Use cases</a></li>
  <li><a href="#specifications">Specifications</a></li>
  <li><a href="#accessories">Accessories</a></li>
  <li><a href="#support">Support</a></li>
</ol>

{
  "links": [
    {
      "link": "#features-and-benefits",
      "label": "Features and benefits"
    },
    {
      "link": "#key-components",
      "label": "Key components"
    },
    {
      "link": "#use-cases",
      "label": "Use cases"
    },
    {
      "link": "#specifications",
      "label": "Specifications"
    },
    {
      "link": "#accessories",
      "label": "Accessories"
    },
    {
      "link": "#support",
      "label": "Support"
    }
  ]
}

The scroll spy component takes a list of in-page anchor links and searches for their corresponding headings on the page. It is set to be position: sticky and follow you down the page, allowing you to traverse the content with a persistent navigation.

There is a small 'nubbin' that appears to the left of the current 'active' item.

Props

Name	Type	Description
links	link[]	"link" and "label" objects

Scroll spy