Bootstrap Menu
Navbar with scrollspy template

Free navbar with scrollspy template for your projects, built with the latest Bootstrap, HTML, CSS & JavaScript. MIT Licensed - free for personal & commercial use.

edit & download Live preview
  • License
    MIT License
  • Free for commercial use?
    Yes
  • Bootstrap version
    5.2.3+
  • NPM downloads
    npm
  • GitHub stars
    GitHub Repo stars

Bootstrap navbar with scrollspy


Get 700+ Material components for the latest Bootstrap 5 for free. This component is also available as ready-to-use solution in MDB UI Kit. Learn more about Bootstrap Dropdown here, or download MDB Free version with 700+ components here.

Bootstrap 5 gives you built-in scrollspy feature. When you scroll up or down it will add active class to .menu-item based on currently active viewport.

It does not mean that, if you click on certain menu the page will scroll. No, bootstrap's scrollspy just adds class according to your visible div or section. To make animated scroll effect on click (like landing page), we need to write our own script that forces page to scroll

This example also could be useful for landing page or any single page website

Steps to make scrollspy with smooth animation
  • Create navbar on top of page
  • Add few section on website and add unique ID for each of them
  • Add same ID of each section to you link's href attribute
  • Activate scrollspy function with data- attribute or via javascript
  • Add fixed-top class on navbar or make it fixed at the top with any other method
  • With javascript:
    var scrollSpy = new bootstrap.ScrollSpy(document.body, { target: '#navbarID' })
  • With data- attribute to body tag:
    data-bs-spy="scroll" data-offset="0" data-target="#navbar_ID"
Here are basic code snippets

Back to all examples

Get more free tools & themes

Join the newsletter to receive more free templates - including Instagram, Facebook or Amazon clone templates, as well as multiple free tools & resources.

    By subscribing you agree to receive the newsletter & commercial information from the data administrator StartupFlow s.c. Kijowska 7, Warsaw. Privacy Policy