Bootstrap 5Navigation

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.

Primary Class

.anchor-nav

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 & Classes

Variant	Description	Classes
Anchor Navigation Default	Standard anchor navigation with Bootstrap's default styling.	`anchor-nav`
Anchor Navigation Responsive	Responsive variant that adapts to different screen sizes.	`anchor-nav anchor-nav-responsive`

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

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓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?

ScrollSpy watches the scroll position of the element that carries data-bs-spy='scroll' and data-bs-target pointing to the nav's ID. As each section's top edge passes the offset threshold, Bootstrap adds the 'active' class to the matching anchor link inside the targeted nav. Every section ID must correspond exactly to a nav link's href fragment, including the hash character, for the mapping to work correctly.

How can I style the active anchor link with a custom brand colour instead of Bootstrap's default blue?

Override the .nav-link.active selector in your stylesheet: `.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.

How does Canvas Builder generate anchor navigation components?

When you describe a multi-section page in Canvas Builder, it identifies the section headings and automatically assigns matching IDs to each section block, then generates a sticky nav component with href values that reference those IDs. ScrollSpy attributes and the correct data-bs-offset value are written into the output based on the navbar height Canvas Builder detects in your layout. Brand colours from your project settings are applied to the active link state so the component is on-brand without any manual CSS editing.