Bootstrap 5 Anchor Navigation
Anchor navigation is a fixed or sticky set of links that jump users to named sections within the same page using href values that match element IDs. It is commonly implemented with Bootstrap 5's nav component combined with ScrollSpy to highlight the active section as the user scrolls. Use it on long-form pages where content is divided into clearly labelled sections, such as documentation, product pages, or landing pages with multiple feature blocks.
Bootstrap class
No dedicated Bootstrap class
Common use cases
- A SaaS pricing page with sections for Features, Pricing tiers, FAQs, and Testimonials, letting users skip directly to the section they care about without endless scrolling
- Technical documentation pages where each heading (Installation, Configuration, API Reference, Changelog) needs a persistent sidebar nav that tracks the reader's position
- A single-page portfolio with sections for About, Work, Services, and Contact, giving recruiters a fast way to jump between content without leaving the page
- A long-form product landing page where separate sections cover specifications, size guides, customer reviews, and shipping policies, reducing bounce rate by surfacing the right content immediately
Variants and classes
| Variant | Description and classes |
|---|---|
| Pill links | Links to section ids on the same page.nav nav-pills + nav-link |
| Scrollspy highlight | The link for the section in view becomes active.data-bs-spy="scroll" + data-bs-target |
| Sticky bar | Stays visible while the sections scroll.sticky-top bg-body border-bottom |
| Smooth scrolling | Animated jump to each section.data-bs-smooth-scroll="true" |
Code example
<nav id="page-nav" class="navbar navbar-light bg-light px-3 sticky-top border-bottom">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#faq">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
<div
data-bs-spy="scroll"
data-bs-target="#page-nav"
data-bs-smooth-scroll="true"
data-bs-offset="70"
tabindex="0"
>
<section id="features" class="py-5">
<h2>Features</h2>
<p>Everything you need to build faster, ship sooner, and scale confidently.</p>
</section>
<section id="pricing" class="py-5 bg-light">
<h2>Pricing</h2>
<p>Simple, transparent plans with no hidden fees.</p>
</section>
<section id="faq" class="py-5">
<h2>Frequently Asked Questions</h2>
<p>Answers to the questions our customers ask most often.</p>
</section>
<section id="contact" class="py-5 bg-light">
<h2>Contact</h2>
<p>Reach our support team any time, seven days a week.</p>
</section>
</div>Live examples
Basic Anchor Navigation
Scrollspy anchor navigation inside a scrolling panel: click a pill to jump to its section, or scroll and watch the active pill follow.
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- Canvas Builder generated anchor navigation with custom colours
- Anchor Navigation with interactive states
- Responsive anchor navigation for all screen sizes
Best practices
Match data-bs-offset to your navbar height
Set data-bs-offset on the scrollspy container to the pixel height of your sticky nav (commonly 56px to 80px) so ScrollSpy activates the correct link before the section heading disappears behind the bar.
Use scroll-margin-top on target sections
Add a CSS rule like #features, #pricing, #faq, #contact { scroll-margin-top: 70px; } so that anchor clicks land with breathing room above the heading rather than tucking it directly under the sticky nav.
Keep anchor IDs lowercase and hyphenated
IDs like #getting-started are safer than #GettingStarted across all browsers and avoid broken fragment links when URLs are shared or bookmarked.
Collapse anchor nav into a dropdown on mobile
On small screens, a row of five or more nav pills overflows horizontally; wrap them in a Bootstrap collapse toggler or switch to a select element driven by a short JavaScript change handler to keep the nav usable on phones.
FAQ
How does Bootstrap 5 ScrollSpy know which nav link to mark active?
How can I style the active anchor link with a custom brand colour instead of Bootstrap's default blue?
.nav-pills .nav-link.active { background-color: #your-brand-hex; color: #fff; }. For non-pill styles using just an underline, target .nav-link.active { color: #your-brand-hex; border-bottom: 2px solid #your-brand-hex; background: transparent; }. Both approaches work without touching Bootstrap source files.