Top navigation bar in Vuetify Part One

Recently I have fallen in love with Vue and Vuetify, so I decided to create a simple bar in Vuetify, my goal was creating a toolbar with tabs aligned to the right. This is easily achieved when you are using CSS. Honestly I had some challenges when I just started with Vuetify. In this post am going to share with you how I managed to create a tool bar with tabs floating to the right.

Step 1

The First thing we need is to create a new file in the component folder called Nav.vue

Step 2

Create a code the structure

Step 3: Import the Nav.vue file in the App.vue file

i. Import in your script section

ii. Add in the components

iii. Add in your template

Step 4: Add tabs in your Nav.vue

Some you add tabs by default they will appear on the left side like in the snippet below.

Now we are going to add styling to the tabs forcing them to appear on the right side

We are now going to change the font to camel cased using CSS styles

Now it is time to add a simple logo to the left of our navigation bar by simply using a header and icons

And the final result will look like this below

That is how you create a simple top navigation bar using tabs floating to the right in Vuetify. Hopefully this helps. Happy Codding.