Scrollspy Bootstrap v5.0

Search docs... Ctrl + / v5.
View on GitHub
Scrollspy
Automatically update Bootstrap navigation or list group components
based on scroll position to indicate which link is currently active in the
viewport.
Limited time offer: Get 10 free Adobe

Stock images.
ads via Carbon
On this page
How it works
Example in navbar
Example with nested nav
Example with list-group
Usage
Via data attributes
Via JavaScript
Methods
refresh
dispose
getInstance
Options
Events
How it works
Scrollspy has a few requirements to function properly:
It must be used on a Bootstrap nav component or list group.

Scrollspy requires position: relative; on the element you’re spying on, usually the <body>.
Anchors (<a>) are required and must point to an element with that id.
When successfully implemented, your nav or list group will update accordingly, moving the .active
class from one item to the next based on their associated targets.
Scrollable containers and keyboard access

If you’re making a scrollable container (other than the <body>), be sure to have a height set
and overflow-y: scroll; applied to it—alongside a tabindex="0" to ensure keyboard
access.
Example in navbar
Scroll the area below the navbar and watch the active class change. The dropdown items will be
highlighted as well.
Navbar @fat @mdo Dropdown
three
Placeholder content for the scrollspy example. If you wanna dance, if you want it all, you know that
I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday
suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna
stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye
poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.
And some more placeholder content, for good measure.
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">

<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="bu
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#one">one</a></li>
<li><a class="dropdown-item" href="#two">two</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#three">three</a></li>
</ul>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabind
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
<h4 id="one">one</h4>
<p>...</p>
<h4 id="two">two</h4>
<p>...</p>
<h4 id="three">three</h4>
<p>...</p>
</div>
Example with nested nav

Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be .active.
Scroll the area next to the navbar and watch the active class change.
Placeholder content for the scrollspy example. This one relates

Navbar to item 3-1. Baby do you dare to do this? This is no big deal. Yeah,
you're lucky if you're on her plane. Just own the night like the 4th
Item 1
of July! Standing on the frontline when the bombs start to fall. So
Item 1-1 just be sure before you give it all to me.
Item 3-2
Item 1-2
Placeholder content for the scrollspy example. This one relates
Item 2 to item 3-2. You're original, cannot be replaced. All night they're
playing, your song. California girls we're undeniable. Like a bird
Item 3 without a cage. There is no fear now, let go and just be free, I will
love you unconditionally. I can see the writing on the wall. You
Item 3-1
could travel the world but nothing comes close to the golden
coast.
Item 3-2
<nav id="navbar-example3" class="navbar navbar-light bg-light">

<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
</nav>
</nav>
</nav>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabind

<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>...</p>
<p>...</p>
<p>...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
Example with list-group

Scrollspy also works with .list-groups. Scroll the area next to the list group and watch the active
class change.
paper thin. I see it all, I see it now.

Item 1
Item 2
Item 4
Placeholder content for the scrollspy list-group example. This
Item 3 one relates to item 4. Summer after high school when we first
met. There is no fear now, let go and just be free, I will love you
Item 4
unconditionally. Sun-kissed skin so hot we'll melt your popsicle.
This love will make you levitate.
<div id="list-example" class="list-group">

<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
</div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="sc
<h4 id="list-item-1">Item 1</h4>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
Usage
Via data attributes

To easily add scrollspy behavior to your topbar navigation, add data-bs-spy="scroll" to the
element you want to spy on (most typically this would be the <body>). Then add the data-bs-target
attribute with the ID or class of the parent element of any Bootstrap .nav component.
body {
position: relative;
}
<body data-bs-spy="scroll" data-bs-target="#navbar-example">

...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Via JavaScript
After adding position: relative; in your CSS, call the scrollspy via JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {

target: '#navbar-example'
})
Resolvable ID targets required

Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must
correspond to something in the DOM like <div id="home"></div>.
Non-visible target elements ignored

Target elements that are not visible will be ignored and their corresponding nav items will
never be highlighted.
Methods
refresh
When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need
to call the refresh method like so:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))

dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
dispose
Destroys an element’s scrollspy. (Removes stored data on the DOM element)
getInstance
Static method which allows you to get the scrollspy instance associated with a DOM element
var scrollSpyContentEl = document.getElementById('content')

var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Boot
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name
to data-bs-, as in data-bs-offset="".
Name Type Default Description
offset number 10 Pixels to offset from top when calculating position of scroll.
method string auto Finds which section the spied element is in. auto will choose the
best method to get scroll coordinates. offset will use the
Element.getBoundingClientRect() method to get scroll
coordinates. position will use the HTMLElement.offsetTop and
HTMLElement.offsetLeft properties to get scroll coordinates.
target string | Specifies element to apply Scrollspy plugin.

jQuery
object |
DOM
element
Events
Event type Description
activate.bs.scrollspy This event fires on the scroll element whenever a new item becomes activated by
the scrollspy.
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')

firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})
GitHub Twitter Examples About
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Currently v5.0.0-beta3. Code licensed MIT, docs CC BY 3.0.

Scrollspy Bootstrap v5.0

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Scrollspy Bootstrap v5.0

Uploaded by

Copyright:

Available Formats

Search docs... Ctrl + / v5.

Limited time offer: Get 10 free Adobe

ads via Carbon

It must be used on a Bootstrap nav component or list group.

Scrollable containers and keyboard access

Navbar @fat @mdo Dropdown

And some more placeholder content, for good measure.

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">

Example with nested nav

Placeholder content for the scrollspy example. This one relates

<nav id="navbar-example3" class="navbar navbar-light bg-light">

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabind

Example with list-group

paper thin. I see it all, I see it now.

<div id="list-example" class="list-group">

Via data attributes

<body data-bs-spy="scroll" data-bs-target="#navbar-example">

var scrollSpy = new bootstrap.ScrollSpy(document.body, {

Resolvable ID targets required

Non-visible target elements ignored

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))

var scrollSpyContentEl = document.getElementById('content')

Name Type Default Description

target string | Speciﬁes element to apply Scrollspy plugin.

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')

GitHub Twitter Examples About

You might also like