It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

Create a Vertical or Horizontal CSS Navigation Bar Easily

Reading time 5 min
Published Nov 9, 2016
Updated Oct 4, 2019

TL;DR – CSS navigation bar is a list of links that help users navigate to different parts of web sites.

CSS Navigation Bar: Main Tips

  • Navbar in CSS refers to a group of links that lead to different pages of a web site.
  • Navbars are either vertical or horizontal.
  • The <nav> element should wrap primary bars such as the main navigation links of web sites.

Defining Navbars

A CSS navigation bar is a collection of links. This example shows a functional and styled navigation bar:

Example
ul {
    border: 2px solid #e7e7e8;
    background-color: #e7e7e8;
}

li a {
    color: white;
}

HTML creates the base of a navbar with two elements:

  • <li> (defines an item of a list)
  • <ul> (defines an unordered list)
  1. Ordered
  2. list
  • Unordered
  • list

In these examples, HTML list elements create the functional part of navbars:

Example
<ul>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link1</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link2</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link3</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link4</a></li>
</ul>

It is necessary to remove the browser default settings for navbars:

  • list-style-type: none removes the bullets from CSS navigation bars.
  • margin: 0; and padding: 0; removes the browser default spacing settings.
  • These properties are for both horizontal and vertical navigation bars.

In the example, we remove padding, margins, and the bullets from the list:

Example
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

<nav> Element

The <nav> element indicates that a group of links are for navigation. However, placing the ordered or unordered lists in this element is not a requirement.

Tip: you should place your navigation bar in <nav> for major bars.

Vertical Navigation Bar

The vertical navigation bar appears as a regular list of links. The vertical bar is useful for web navigation and can easily become a dropdown menu.

Example
li a {
    display: block;
    width: 50px;
    color: purple;
    background-color: cornsilk;
    text-decoration: none;
}

li a:hover {
    background-color:aliceblue;
}

Here are some points about the example above:

  • Remember to remove the default browser styles (margin, padding, bullet points).
  • Add text-decoration: none; to remove the underline.
  • Add various properties to customize the CSS vertical navigation bar.
  • The :hover selector indicates that when the mouse cursor moves over a link in the CSS navbar, the background color changes.

Ways to Style Vertical Navbars

Styling properties can make CSS navigation bars match various web designs. You can experiment by adding different background colors, changing the font family or the text alignment.

This example creates a vertical navigation bar. However, styling properties change when :hover triggers:

Example
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 250px;
    background-color: #8842d5;
}

li a {
    display: block;
    color: white;
    padding: 9px 17px;
    text-decoration: none;
}

/* When the link is hovered on, its color will change */
li a:hover {
    background-color: #7300ff;
    color: black;
}

You can add styles to a CSS navigation bar when users click on one of the links. You should use the :active selector to indicate the state for which the new styling rules should apply:

Example
.active {
    background-color: #7300ff;
    color: black;
}

The text inside the CSS navigation bar appears on the left side by default. You can easily change this rule by adding text-align:center to make sure that all links appear at the center of the navbar.

Note: set text-align property to left or right to move the text to those directions.

It is possible to separate the CSS navigation menu from the rest of the website by adding borders.

This example adds borders and centers the text:

Example
ul {
    border: 2px solid black;
}

li {
  text-align: center;
  border-bottom: 1px solid rgb(0, 0, 0);
}

li:last-child {
  border-bottom: none;
}

Fixed Height of a Vertical Navbar

You can set the CSS navigation bar to be on the specified side and continue until the end of the page:

  • Set the height to 100%.
  • Indicate the permanent position with fixed.
  • Add overflow: auto to insert a scrollbar to the navigation bar.
Example
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 30%;
    background-color: #8842d5;
    height: 100%; /* This enables full height */
    position: fixed; /* The position will be constant */
    overflow: auto; /* This enables scrolling */
}

Horizontal Navigation Bar

CSS creates horizontal navigation bars by:

  • Assigning display: inline property to a list of links.
  • Using float.

Inline List Items

CSS builds a horizontal CSS navbar with the display:inline property assigned to <li> elements.

Tip: <li> elements are block elements by default. The inline value displays links a row instead of new lines.

Example
li {
    display: inline;
}

Floating List Items

The second way of creating a horizontal navbar is the float property. It sets the layout for navigation links by floating the <li> elements.

The float property can use two keywords: left or right.

In the example below, we create a CSS navigation bar by using float: right:

Example
li {
    float: right;
}

a {
    display: block;
    padding: 9px;
    background-color: #8842d5;
}

In the example, one of the links moves to the right with the float:right:

Example
<ul>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link1</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link2</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link3</a></li>
  <li style="float: right;"><a class="active" href="https://www.bitdegree.org/" target="_blank">Link4</a></li>
</ul>

Hovering Over Horizontal Navigation Bar

This example adds :hover to the horizontal navigation bar in order to change the background color when cursors enter it:

Example
ul {
    list-style-type: none;
    margin: 1px;
    padding: 1px;
    overflow: hidden;
    background-color: #8842d5;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: left;
    padding: 15px 17px;
    text-decoration: none;
}

/* A color changes when hovered over */
li a:hover {
    background-color: #7300ff;
}

This example adds the :active selector to change the styling of the link when users click on it:

Example
li a.active {
    background-color: #7300ff;
}

Adding Borders

CSS borders add a visible separation between the navbar and the rest of the content.

Example
/* All items except the last one will have a border on the right side */
li {
    border-right: 2px solid white;
}

li:last-child {
    border-right: none;
}

Fixed Position

You can make the CSS navigation bar permanently stay at the bottom or the top of the page regardless of scrolling.

position: fixed and top: 0 create the navigation bars that are fixed at the top:

Example
ul {
    position: fixed;
    top: 0;
    width: 100%;
}

position: fixed and bottom: 0 create navigation bars that are fixed at the bottom:

Example
ul {
    position: fixed;
    bottom: 0;
    width: 100%;
}

CSS Navigation Bar: Useful Tips

  • Bootstrap can also help you improve web sites with navigation bars.
  • Do not forget about keeping web sites responsive. Read about media queries to guarantee that your CSS navbars look neat on all devices.