How to create a pill navigation menu with CSS?

By IncludeHelp Last updated : November 15, 2023

Website navigation is an essential part of web design. Good navigation will allow visitors to search your site for longer, also it contributes to the user experience by presenting an enjoyable, intuitive layout while increasing ease of use, which allows users to access the information they want as quickly as possible. In this article we'll create a pill navigation menu with CSS, creating all this manually can be a really long method but if we use Bootstrap pre-defined class then it is a minor task.

Creating a pill navigation menu

Creating a pill navigation menu is not that difficult task, we just have to follow basic properties which we commonly use like margin, padding, etc just a proper synchronization of these properties and you'll achieve your task.

Example

The code to create a pill navigation menu is as follows -

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document </title>
    <style>
      nav{
      width: 100%;
      margin-top: 30px;
      }
      .nav {
      text-align: center;
      padding: 14px;
      text-decoration: none;
      font-size: 17px;
      border-radius: 5px;
      color:black;
      }
      .nav:hover {
      background-color: lightgray;
      }
      .select{
      background-color: olivedrab;
      color: rgb(255, 255, 255);
      }
    </style>
  </head>
  <body>
    <nav>
      <a class="nav select" href="#">Home</a>
      <a class="nav" href="#"> Support</a>
      <a class="nav" href="#"> Contact us</a>
      <a class="nav" href="#">About us</a>
      <a class="nav" href="#">Know more</a>
      <a class="nav" href="#"> Donation</a>
      <a class="nav" href="#">Foundations connected</a>
    </nav>
  </body>
</html>

Output

The output of the above example is:

Explanation

Let us first understand the HTML code, and then we'll move forward to the CSS code.

HTML Code:

I have kept all my navigation links under the nav tag, this is always a good practice. We can create a navigation menu without keeping out links under the nav tag, but if HTML provides some functionality then why not utilize it in a better way? So keeping all navigation menu links under the nav tag will make our task effortless. Nav HTML element represents a section of a page whose purpose is to provide navigation links. After providing all the links under this tag, we'll give a class to every link to style them uniquely. Here I've used two classes nav and nav select.

CSS Code:

If you observe the code closely, you won't find any new property, it is just the proper synchronization. I've started the styling by giving width and margin to the whole nav tag. Up Next I've applied some properties to the class nav, which means the properties defined in this section will show the effects on the links. Moving forward to nav hover this is exceptional if you want your links to change the background color when the cursor is taken on top of it, then you can use this there is no need to use this property. Lastly, select class is used to design the element that is selected, by default I've made the home link as the selected link so the background color is changed accordingly.

How to write superscript using HTML?

How to write comments in CSS?