Previous and next navigation

Previous/next navigation within tabbed content

Bootstrap 5 tabbed navigation lets a user switch between sections by clicking on the tab headers. This works well when the tabs are short, but can be awkward when:

  • Each tab contains a lot of content, so the user must scroll back up to the tab bar, or
  • You want to guide the user through the tabs in order, like a simple wizard.

The nav-prev-next class extends a standard Bootstrap navigation block so that you can add Previous and Next buttons inside the tab content itself.

Basic structure

To use previous/next navigation, wrap your tab navigation and tab content in a container with the class nav-prev-next. Inside that container:

  • The tab headers should be standard Bootstrap navigation, usually ul.nav.nav-tabs with .nav-link buttons.
  • Your previous and next buttons should have classes nav-prev and nav-next respectively.

The script will:

  • Identify all .nav-link elements inside the container.
  • Use the Bootstrap tab API to activate the previous or next tab when a navigation button is pressed.
  • Scroll the page so that the tab navigation is visible after a tab change (see below).

Adding previous and next buttons

You can place previous/next buttons anywhere inside the .nav-prev-next container. A common pattern is to put them at the bottom of each tab pane so the user can move on after reading the content.

Use the following classes:

  • nav-next – moves to the next tab.
  • nav-prev – moves to the previous tab.

You can combine these with standard Bootstrap button classes to control appearance.

<div class="nav-prev-next">
  <ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button id="home-tab" class="nav-link active" role="tab" type="button"
              data-bs-toggle="tab" data-bs-target="#home">Home</button>
    </li>
    <li class="nav-item" role="presentation">
      <button id="profile-tab" class="nav-link" role="tab" type="button"
              data-bs-toggle="tab" data-bs-target="#profile">Profile</button>
    </li>
    <li class="nav-item" role="presentation">
      <button id="contact-tab" class="nav-link" role="tab" type="button"
              data-bs-toggle="tab" data-bs-target="#contact">Contact</button>
    </li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade show active p-3" role="tabpanel">
      <p>Home content</p>
      <div class="mt-3">
        <button class="btn btn-primary nav-next">Next</button>
      </div>
    </div>

    <div id="profile" class="tab-pane fade p-3" role="tabpanel">
      <p>Profile content</p>
      <div class="mt-3">
        <button class="btn btn-secondary nav-prev">Back</button>
        <button class="btn btn-primary nav-next">Next</button>
      </div>
    </div>

    <div id="contact" class="tab-pane fade p-3" role="tabpanel">
      <p>Contact content</p>
      <div class="mt-3">
        <button class="btn btn-secondary nav-prev">Back</button>
      </div>
    </div>
  </div>
</div>

Scrolling back to the navigation

When a previous or next button is clicked, the script activates the new tab and then checks whether the navigation bar (the .nav element) is visible in the current viewport.

  • If the top of the navigation bar is already on-screen, the page is not scrolled.
  • If the navigation bar is above or below the current viewport, the page scrolls so that the top of the navigation bar is at the top of the window.

This is useful when a tab contains a large amount of content. The user can read to the bottom, click Next, and automatically be taken to the top of the next tab’s content with the tab navigation visible.

Behaviour at the first and last tab

The previous and next buttons only work when there is a corresponding tab to move to.

  • If the user clicks Next on the last tab, nothing happens.
  • If the user clicks Back on the first tab, nothing happens.

To avoid confusing the user, you may want to hide or disable the previous button on the first tab and the next button on the last tab, using normal Bootstrap or custom classes.

Multiple nav-prev-next blocks

You can have several .nav-prev-next containers on the same page. Each container:

  • Only affects its own tab navigation and content.
  • Has its own previous and next buttons.

This allows you to build several independent tabbed wizards or sections within a single page.