Create Discord’s Navbar Using Only CSS

Do you like Discord’s User Interface? Are you a Web Developer? Did you click on this article?

Then my only conclusion is that your goal is to recreate Discord’s navigation bar. And to do that easily!

I won’t keep on talking, let’s just start!

The First Steps

Create 2 files: index.html and styles.css .

Then, add the following boilerplate HTML template to your index.html file.

And then set the <html> and <body> ‘s heights to 100%, and give the body a margin of 0:

And finally, add this background color to the body:

The Navbar

Start by adding a <nav> element to the HTML:

Then, stick it to the left of the screen by adding this to the CSS:

The Navigation Buttons

Add three <a> (stands for anchor) elements inside your navbar in the HTML, and give the first one a class of active, meaning it’s the currently opened link:

In the CSS, give these <a> elements a display value of block, so that we can control their width and height:

If you took a look at the website now, you’d notice that the buttons are not aligned well. We want them to be horizontally centered, and have a gap between them. This is all super-easy to achieve using Flexbox:

Much better!

The Separator

Add an <hr> (stands for horizontal rule) element element between the first and second navigation buttons:

In the CSS, give it a display of block to changes its width and height, then give it a large border radius to make it shaped like a capsule:

Hovering on the buttons

When we hover on the navigation buttons, we want them to become rounded squares instead of circles and we want to change their background color. And we also want to apply these same styles on active buttons:

To make this change happen smoothly, add a transition attribute for the background and border radius:

The Notifications Indicator

Now we’ll add that white circle that exists next to the navigation buttons.

Instead of creating another HTML element for it, we’ll use CSS pseudo-elements. They can be created by simply using a ::before or ::after selector.

And we almost always have to set the content property on pseudo-elements. Most of the time we just leave it empty as "" .

Then we’ll set the display value to block and change the width and height:

Now we need to move it to the right place.

But this still won’t work. CSS will position it relative to the whole screen, and e want to move it 57 pixels left of the button, not the whole screen.

To make that happen, all we have to do is set position: relative on the button.

It now works correctly!

When the button is hovered, we want to increase its height to 18 pixels.

When the button is the currently opened link, we want to increase its height even more to 32 pixels.

And to make this change happen smoothly, we add a transition :

The Tooltip

Add a span to every link in the navbar, and give it a class of tooltip .

And add to it the following styles:

Now let’s position it appropriately:

Now let’s add a triangle to this tooltip, and again, we’ll use the ::after pseudo-element:

To make a triangle, we use this pattern of borders. It’s all explained by this CSS Tricks article:

And now we position it:

Now we make the tooltips only appear when their button is hovered.
Change the tooltip’s display value from block to none :

And then set it back to block when the button is hovered:

You can also add this little script to the bottom of your HTML to simulate clicking links. It will help you see the animations better!

Give this article a CLAP if you want Part 2 where we also add images and SVG icons to the buttons.

Goodbye, and Happy Programming!