Hit enter after type your search item

Bootstrap 5 Scrollspy – 2 Examples with navbar and List Group

Scrollspy in Bootstrap 5

As the user scrolls through your website, scrollspy component automatically updates the links in the navigation list.

This might particularly be useful for long pages with different sections. For example, your website has header navigation with the following links:

Home, Offers, Price, Contact, About

Your home page contains all this information on a single page.

Users may click on any link to directly navigate to that particular section. Alternatively, as they scroll down and reach to particular section – e.g. Offers to Contact section – in that case, the scrollspy component makes the Contact link active on header navigation.

You can see a demo here:

Scrollspy Demo

An example of Scrollspy using Bootstrap 5

In this example, we have a top-right menu that is fixed. As you scroll down, you can see the active content’s link is highlighted.

Have a look at the output below along with the code and it is explained after how it worked:

See online demo and code

Bootstrap5-scrollspy


How does it work?
  • You may use scrollspy component with the nav or list group.
  • In the example above and below, notice the <style> section under the <head> tag. There, position: relative; is used, which is required. We used it at <body> level.
  • <a> tags are used in both examples, which are also required. They point to an element by id.

The example of using List group

Scrollspy component can also be used with the list group to show which content part the user is on.

In the example below, we have six list items. Scroll down the page and you will see list group items highlight:

See online demo and code

BS5-scrollspy-listgrou


 

Reference: https://getbootstrap.com/docs/5.0/components/scrollspy/

This div height required for enabling the sticky sidebar