Navbar

The biggest issue with Tailwind CSS is that it does not offer ready-to-use components, such as a navigation bar.

However, this is not a problem if a component library such as TW Elements comes to the rescue. Thanks to it, we can not only fully use the potential of Tailwind CSS itself, but also have dozens of ready-to-use elements at our disposal.

In this lesson, we will focus on a rather complex component, which is Navbar.

Let's jump into the code 🚀

Step 1 - add a basic example of the navbar to the project

Go to the navbar documentation page and copy the code of the basic example. Then paste it into the index.html file, inside of the <header> section.

I know, I know, that's really a lot of code and a terrifying number of classes. However, this is perfectly normal in Tailwind, and you'll soon understand why.

Anyway, after saving the file you should see a navigation bar in your project.

By the way, for now you can remove the grid from the <main> section. It was there just as an example to learn from and we don't need it anymore. Clear the <main> section so it's empty again:

Step 2 - initialize the navbar

We mentioned this in the previous lesson - our navbar looks good, but unfortunately it doesn't work properly yet. If you reduce the size of the browser window to the mobile size and click on the hamburger icon, you will see that the menu does not expand.

This is because we still need to initialize the component.

Initializing simply means calling the component/adding it to our project.

Initialization is extremely important in optimization. TW Elements is a huge library with many components, but it is very rare that you need all of these components in every project.

Through initialization, you indicate which components are to be included in your project and thanks to this, our library can then do the so-called tree shaking.

Tree shaking is a method of optimizing code for production by eliminating dead or unused code.

The term itself comes from the mental image of shaking a tree to remove dead leaves. When building an application for production, it's crucial to ensure that the size of the final bundle is as small as possible to reduce load times and improve performance.

This process significantly trims the final bundle size, leading to faster load times and a more efficient application.

So again, go to the navbar documentation page and from the basic example click the "JavaScript" tab and copy the initialization code.

Then go to src/js/index.js and replace the code you will find there with the one you just copied.

After saving the file you should see all the interactive elements (like hamburger or dropdown) work properly.

Alright, we have a working navbar!

However, this is only the beginning of our adventure with him. Since it's a complex component, we'll spend some time with it and use it to explain some important concepts.

Demo and source code for this lesson
Prev Next
John Doe

About author

Michal Szymanski
@ascensus_mdb

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.