Back to Bootstrap HubPractice BootstrapInterview Bootstrap

Nearby lessons

28 of 39
BS5 PopoverBS5 ToastBS5 ScrollspyBS5 OffcanvasBS5 Utilities

🧭 BS5 Scrollspy

📌 What Is Bootstrap 5 Scrollspy?

Scrollspy highlights the nav link for the section currently in view. Put data-bs-spy="scroll" on the scrollable element (e.g. body or a div), data-bs-target="#navId" (the nav’s id), and ensure nav links use href="#sectionId" matching section ids. Requires Bootstrap’s JavaScript.

🧭 Enabling Scrollspy (data-bs-spy, data-bs-target)

data-bs-spy="scroll" – enables scrollspy on the element that scrolls. data-bs-target="#navId" – CSS selector of the nav (the nav must have that id). data-bs-offset – optional pixel offset for when the active state triggers. Nav links must be .nav-link with href="#sectionId"; sections need matching ids.

🅱️

bootstrap Designer

Live Component Playground

html Source
Loading...
Built with Bootstrap 5.3 • Enterprise Ready

✅ Scrollspy Best Practices

  • The spied element must be scrollable (e.g. overflow-y: auto and a fixed height).
  • Nav links use href="#sectionId" and sections use matching ids.
  • Use data-bs-offset if you have a fixed header so active state aligns correctly.

🧠 Test Your Knowledge

3 Questions

Progress: 0 / 3
Keep Going!BS5 Offcanvas