Web Designer Wall

Snippets Animation

Bootstrap 5 Animated Menu with Sliding Indicator

A pill-shaped navigation bar with a highlight that slides to the active link, plus a content card that updates with each choice.

Bootstrap 5 No jQuery Mar 2020 3.4K views 

<section class="wdw-stage">
  <div class="container" style="max-width:820px">
    <div class="text-center mb-4">
      <span class="wdw-eyebrow">Navigation</span>
      <h2 class="wdw-heading display-6 mt-1 mb-2">Menu with a sliding indicator</h2>
      <p class="wdw-muted mb-0">The highlight glides to whichever tab you pick, with arrow-key support.</p>
    </div>

    <div class="d-flex justify-content-center">
      <div class="wdw-menu-wrap">
      <div class="nav nav-pills wdw-menu flex-nowrap" role="tablist" aria-label="Primary" id="wdwMenu">
        <span class="wdw-menu-pill" aria-hidden="true"></span>
        <button type="button" class="nav-link active" role="tab" id="wdwTab-home" aria-controls="wdwMenuPanel" aria-selected="true" tabindex="0" data-title="Welcome home" data-text="A clear starting point: headline, primary action and the three things visitors look for first." data-icon="M4 10.5 12 4l8 6.5V20H4z">Home</button>
        <button type="button" class="nav-link" role="tab" id="wdwTab-about" aria-controls="wdwMenuPanel" aria-selected="false" tabindex="-1" data-title="About the studio" data-text="Who we are, how we work and the principles behind every project we ship." data-icon="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21a8 8 0 0 1 16 0">About</button>
        <button type="button" class="nav-link" role="tab" id="wdwTab-testimonials" aria-controls="wdwMenuPanel" aria-selected="false" tabindex="-1" data-title="Kind words" data-text="Short, specific quotes from clients, each paired with the result they saw." data-icon="M4 5h16v11H9l-5 4z">Testimonials</button>
        <button type="button" class="nav-link" role="tab" id="wdwTab-blog" aria-controls="wdwMenuPanel" aria-selected="false" tabindex="-1" data-title="Notes from the blog" data-text="Practical write-ups on design systems, front-end craft and shipping faster." data-icon="M5 4h14v16H5zM8 9h8M8 13h8M8 17h5">Blog</button>
        <button type="button" class="nav-link" role="tab" id="wdwTab-contact" aria-controls="wdwMenuPanel" aria-selected="false" tabindex="-1" data-title="Let's talk" data-text="Tell us about your project and we will reply within one working day." data-icon="M3 6h18v12H3zM3 6l9 7 9-7">Contact</button>
      </div>
      </div>
    </div>

    <div class="wdw-card p-4 p-md-5 mt-4" role="tabpanel" id="wdwMenuPanel" aria-labelledby="wdwTab-home" tabindex="0">
      <div class="d-flex gap-4 align-items-start">
        <span class="wdw-icon" style="width:3.5rem;height:3.5rem">
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path id="wdwMenuIcon" d="M4 10.5 12 4l8 6.5V20H4z"/></svg>
        </span>
        <div class="flex-grow-1">
          <h3 class="h4 wdw-heading mb-2" id="wdwMenuTitle">Welcome home</h3>
          <p class="wdw-muted mb-0" id="wdwMenuText">A clear starting point: headline, primary action and the three things visitors look for first.</p>
        </div>
      </div>
      <div class="mt-4 d-grid gap-2" aria-hidden="true">
        <div class="wdw-skel" style="width:100%"></div>
        <div class="wdw-skel" style="width:86%"></div>
        <div class="wdw-skel" style="width:64%"></div>
      </div>
      <div class="d-flex flex-wrap gap-2 mt-4">
        <button type="button" class="btn btn-primary rounded-pill px-4">Explore</button>
        <button type="button" class="btn btn-outline-secondary rounded-pill px-4">Learn more</button>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More animation snippets