Sticky Navbar with Scrollspy Links

Bootstrap 6 sticky navbar whose pill links highlight the section in view with ScrollSpy, with smooth scrolling, a reading progress line and a swipeable link row on mobile.

Also known as: scrollspy navigation bar, one page sticky navbar, navbar highlight active section, smooth scroll navigation

Bootstrap 6 Navbars Responsive #navbar #navigation #responsive #scrollspy #sticky

Sticky Navbar with Scrollspy Links live demo

Open in new tab

Bootstrap 6 code (HTML, CSS, JS)

Beautify

A sticky Bootstrap 6 navbar for one-page sites and long product pages. Its pill links highlight the section currently in view with the Bootstrap 6 ScrollSpy plugin, scroll smoothly to a section on click and show a thin reading progress line. The demo sits inside a browser-style frame so the sticky behavior works inside the preview.

How it works

.ssn-frame is the scroll container. It carries data-bs-spy="scroll", data-bs-target="#ssn-links", data-bs-top-margin="96px" and data-bs-smooth-scroll="true". The Bootstrap 6 bundle initialises ScrollSpy from these attributes with no extra code. ScrollSpy uses an IntersectionObserver with an activation line 96px below the top of the frame, just under the navbar. It adds .active to the link whose section has crossed that line. At the very top the first link stays active, and at the bottom the last one is activated.

The .navbar.sticky-top sits inside the frame, so it stays pinned while the sections scroll beneath it. Links are a .nav.nav-pills list. Each href points to a section id, such as #ssn-pricing.

script.js listens for activate.bs.scrollspy and moves aria-current to the newly active link. On narrow screens it scrolls that link into view, because the link row becomes a horizontally scrollable strip. A passive scroll listener writes --ssn-progress on .ssn-root, which scales .ssn-progress-bar.

Customization

--ssn-accent on .ssn-root: changes the active pill, the progress line, the brand mark and the section labels.
data-bs-top-margin on .ssn-frame: moves the activation line, for example 120px for a taller navbar.
--ssn-frame-height on .ssn-root: sets the height of the demo frame.
To spy on the whole page, delete the .ssn-chrome bar and move data-bs-spy, data-bs-target and the other data-bs-* options from .ssn-frame to <body>. Then remove the height and overflow-y rules of .ssn-frame.
Swap nav-pills on .ssn-links for nav-underline to get an underlined active link instead of a filled pill.
@container ssn (width >= 760px) in style.css: changes the width at which the links move between the brand and the button.
Delete .ssn-progress from the navbar and the scroll listener in script.js if you do not want the progress line.

Use cases

One-page sites: pill links highlight the section currently in view and scroll smoothly on click
Long product pages: a thin progress line shows how far the visitor has read
Mobile readers: the link row becomes a swipeable strip that keeps the active link in view
Documentation-style pages: the sticky bar stays pinned while sections scroll beneath it

Accessibility

The navbar is a <nav> labelled "Page sections". The active link gets aria-current="true". The frame is focusable (tabindex="0") with a visible focus outline, so keyboard users can scroll it with the arrow keys. Every section is labelled by its heading. The FAQ uses native <details> elements, which work without JavaScript. Smooth scrolling is turned off under prefers-reduced-motion: reduce.

Bootstrap 6 notes

ScrollSpy keeps the BS5 data-bs-spy="scroll" API, but now sets its activation line with data-bs-top-margin, and rootMargin is an advanced override. .nav-pills gains --bs-nav-pills-* variables. The badge uses .badge-subtle.theme-success instead of text-bg-*, and the FAQ is the new <details class="accordion-item"> accordion. Built on Bootstrap 6.0.0-alpha.1, so APIs may still change. Icons come from Bootstrap Icons.

Sticky Navbar with Scrollspy Links at a glance

Framework: Bootstrap 6
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 6, Bootstrap Icons
Layout: Responsive, works on mobile
Category: Navbars
License: Free for personal and commercial use

Questions about this template

Can I use the Sticky Navbar with Scrollspy Links code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 6 and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's JavaScript load with type="module". Alpha releases can still change before the stable version.