Advertisement
  1. Web Design
  2. Bootstrap 4
Webdesign

How to Add Deep Linking to the Bootstrap 4 Tabs Component

by
Difficulty:IntermediateLength:ShortLanguages:

Today we’ll learn how to add “deep linking” to the Bootstrap 4 tabs. To better understand what we’re working towards, check out the demo page and pay attention to two things:

  1. How the URL changes as you click on the tabs.
  2. By giving each of the tabs its own URL, the content becomes shareable. If you grab the URL of a tab and open it in another browser/window the corresponding tab will be visible.


Note that the URL reflects the selected tab

We’ll outline three main steps; the HTML, the CSS, and the JavaScript. A certain level of competency for all three of these is assumed. Excited to see how we’ll build this? If the answer is yes, let’s get started!

1. Building the Tabs

We’ll kick things off with a starter template taken from Bootstrap’s documentation.

To create the tabs, we’ll take advantage of example code for the tab component that Bootstrap provides: 

2. The CSS

Next we specify a few CSS rules for our component. Nothing too fancy, just some basic styles. It’s worth mentioning that in a previous tutorial, we used similar styles to build a custom tab component.

Here are the initial styles:

3. The JavaScript

With the HTML and CSS in place, it’s time to look at the required JavaScript code (this is the important bit).

First, when the DOM is ready, we retrieve the page URL and use a regular expression to remove its trailing slash. For instance, if the original URL is something/, the modified URL will be something.

Next, we check to see if the URL contains a hash. If that is the case, it means we want to display the contents of the second or third tab (in our example). To do so, we carry out the following:

  1. Retrieve the name of the target tab and activate it by using Bootstrap’s tab method.
  2. Use a regular expression to generate the desired URL format.
  3. Update the page URL without forcing a page reload by taking advantage of the replaceState method.
  4. Optionally, force the page scroll to start from the top of the page.

Each time we click on a tab we do the following:

  1. Retrieve the href attribute value of this tab. In our case, the possible values are #home, #history, #city-attractions.
  2. Check the attribute value and, depending on that, build the desired URL format. 
  3. Update the page URL without forcing a page reload by taking advantage of the replaceState method.

Here’s the JavaScript which takes care of all that:

4. Browser Support

The demo should work well in all recent browsers. For simplicity, I haven’t used a JavaScript compiler (e.g. Babel), but in your own code you might have to.

Conclusion

In this tutorial, we managed to customize the behavior of the Bootstrap 4 tabs, by giving each tab an identifiable URL, making their content more navigable and shareable. Keep in mind that the process implemented here can also be applied to any other framework or even a custom tab component.

If there’s anything you didn’t understand, or anything seems unclear to you, let me know in the comments below!

Further Reading


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.