A navigation component is crucial on a website because you want your users be able to easily navigate through your pages. You can find a navigation component even on single page websites that’ll allow you to jump to a certain section on the page. So as a developer, it is very useful to know how to build this kind of component.
In this article, I decided to build a Tab Bar Navigation, but you can build any kind of navigation you want.
The HTML structure is going to be simple. We’ll have a
.tabs within it:
As you can see, each
.tab has an icon (from FontAwesome), the corresponding text, and some extra classes that will be used to give each tab specific
color properties. Also the
.active class, which will be used to style the active tab. Pretty basic, right? 😃
First, let’s style the
Note: we have a
fixed width on the container as we don’t want it to change its size when we change the active
.tab since each tab might have a text that’s either longer or shorter in size (e.g. Home (4 letters) vs Profile (6 letters)).
We are using
flexbox to distribute the
.tabs evenly inside the container. Other than that I believe that the CSS is pretty self-explanatory.
Few things to note here:
- In order to have a smooth transition when we change the
.activetab, we are setting a
transition: backgroundproperty to the
- By default the
ptag inside the
overflowproperty set to
hidden. This is because we only want to show the text only when the
- We are using the custom color classes (
.pink, etc) to have different colors in the tabs.
Let’s make sure it looks good on mobile too:
As you can see, we are shrinking the
.tab-nav-container when the max-width of the viewport is
450px and we are also reducing the padding to make it look smaller.
At the end, in JS we have to make sure that when the user clicks another
.active class is added to it and removed from the previous active
This kind of tab bar navigation is mostly used on mobile devices, so if you want to reuse it for a mobile app make sure that you position the container to the bottom of the screen (with
position: fixed) and you recalculate the width to fill in the entire screen’s width.
In the Codepen example, we’re also changing the background color of the body when another tab is clicked. This is just for visual purposes and it’s not exactly related to the Coding Theme of this week. But if you want to see how I did that, check out the JS code in the pen (just 2 extra lines of code).
More examples for this Coding Challenge
In a previous article, I demonstrated how to build a responsive navigation menu. You can check it out too if you want to build something like that.
Also if you haven’t, make sure you read the Weekly Coding Challenge “rules” if you want to participate in the Challenge! And why wouldn’t you? It’s a great way to improve your coding skills! 👍
Happy coding! 😇
Originally published at www.florin-pop.com.
Source: Freecode Camp / Florin Pop