Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

How to Integrate Tabs into Your Content with a Page Navigation Toolbar

You may find that you have too much page content to ideally fit a single page. Rather than creating a series of child pages, however, you can include a Page Navigation Toolbar that allows you to tab between content on a single page.

When you have a lot of content on a single webpage, it is a good idea to divide them into separate tabs. Tabs are very intuitive for the users since people are accustomed to using real-life tabs to organize their files and folders. Digital tabs follow the same structure. In this tutorial, we'll build modular tabs that divide sections within a single web page as opposed to navigational tabs which lead the users to different webpages on the site.

There are two important things to pay attention to when integrating modular tabs:

The information that is divided into tabs needs to be categorically similar. If you feel like the sections you put inside the tabs don't belong on the same web page, put those sections on another page.
Pay attention to the page's size. Pages with a lot of content get loaded slowly especially on mobile devices. Since the content gets divided into tabs, it is easy to get carried away and put a lot of content inside each tab but don't forget that whether you have a page without tabs or many tabs, the time to load the content will be the same.

Now that we talked about the function of tabs and how to use them, let's get to how we can build them. Bootstrap makes it very easy to build tabs. All you need to do is put the below CDN links inside the head section of your HTML file:

The Bootstrap CSS and JS files will provide you with all the technical foundation to build tabs. In Bootstrap tabbed navigation, the basic structure is simple. It is composed of two main elements: The nav component for the tab label list and the tab-content component for the tab content list. The .nav component is used to build all kinds of navigational elements and inside the .nav component, there are .nav-items to name the tab label items. To contain all the tab contents, the .tab-content class is used and for each individual tab .tab-item class is used. Basically, the structure goes like this:

<ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> </div>

Here's our full HTML code for the tabbed list we built:

<div class="border-bottom py-3">
  <div class="container">
    <div class="row align-items-center justify-content-between">
      <div class="col-md-9 col-lg-10">
        <ul class="nav nav-underline border-0 justify-content-between justify-content-md-start">
          <li class="nav-item mr-md-4"><a data-toggle="tab" class="text-graphite active" href="#locations" aria-selected="true">Locations</a>
          </li>
          <li class="nav-item mr-md-4"><a data-toggle="tab" class="text-graphite" href="#explore" aria-selected="false">Explore</a>
          </li>
          <li class="nav-item mr-md-4"><a data-toggle="tab" class="text-graphite" href="#mission" aria-selected="false">Mission</a>
          </li>
        </ul>
      </div>
    </div>
  </div><!-- container -->
</div>
<div class="container">
  <div class="tab-content mt-md-6 mt-4">
    <div id="locations" class="tab-pane show active" role="tabpanel">
      <h2 class="text-center p-3">Locations</h2>
      <div class="row align-items-center">
        <div class="col-md-8 mx-auto text-md-center">
          <p class="mb-4">The dream of colonizing the moon, Mars, and beyond requires space travel and long-term habitation. LunarXP has pioneered new technologies and environments that make space flight and colony living not just safe – but unexpectedly comfortable. From our surface stations to our orbital platform, learn more about the different colonial posts in the LunarXP community.</p>
        </div>
      </div>
      <div class="row mt-6">
        <div class="col-md-12">
          <div class="row text-center">
            <div class="col-md-4 px-3">
              <img alt="XP-1" class="img-fluid border" src="https://raw.githubusercontent.com/solodev/page-navigation-toolbar/master/images/xp-1.jpg">
              <h3 class="text-orange mt-4">XP-1</h3>
              <p class="mt-4">Live and work in the first sustainable settlement on another planet.</p>
            </div>
            <div class="col-md-4 px-3">
              <img alt="HAB-1" class="img-fluid border" src="https://raw.githubusercontent.com/solodev/page-navigation-toolbar/master/images/hab-1.jpg">
              <h3 class="text-orange mt-4">HAB-1</h3>
              <p class="mt-4">Tour your “home away from home” on the surface of the moon.</p>
            </div>
            <div class="col-md-4 px-3">
              <img alt="Orbiter-1" class="img-fluid border" src="https://raw.githubusercontent.com/solodev/page-navigation-toolbar/master/images/orbiter-1.jpg">
              <h3 class="text-orange mt-4">Orbiter-1</h3>
              <p class="mt-4">Be part of the crew on the most advanced space station ever built.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="explore" class="tab-pane fade text-center" role="tabpanel">
      <h2 class="p-3">Explore</h2>
      <div class="container py-2 text-left">
        <div class="row py-3">
          <div class="col-md-5">
            <h1 class="h3">Watch Our Latest Video, "From the Moon to Mars"</h1>
            <p class="my-4">Since the dawn of time, mankind has looked to the stars with restless hearts and endless wonder. Not since the Apollo moon program have we endeavored to travel so far from Earth - and LunarXP is where it begins.
            </p>
            <p><strong>Are you ready to explore?</strong></p>
            <a href="#" class="mt-3 btn btn-secondary text-white">Watch the Video</a>
          </div>
          <div class="col-md-6 ml-auto mt-md-0 mt-5">
            <img class="w-100 img-fluid" alt="Lunar XP Video" src="https://raw.githubusercontent.com/solodev/page-navigation-toolbar/master/images/explore.jpg">
          </div>
        </div>
      </div>
    </div>
    <div id="mission" class="tab-pane fade text-center" role="tabpanel">
      <h2 class="p-3">Mission</h2>
      <p>At LunarXP, we’re dreamers and explorers.
        We’ve always looked up for purpose – and we’ve never looked back.
        As a company, we believe that the future of mankind lies beyond earth and in the stars.
        Together, we can make a better tomorrow for all of us. It starts with one small step.</p>
    </div>
  </div><!-- tab content -->
</div><!-- container -->

We didn't use any additional CSS as Bootstrap provided the basic CSS styling but if you would like to further style your navigation, you can create a CSS file to add your custom CSS.

There we go, our basic Bootstrap tabs to house our page's sections:

Download from Github

Share on Facebook Tweet It

Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev