❮ Css Pseudo Classes Css Padding ❯

CSS Navigation Bar

Vertical

Horizontal

Navigation Bar

Mastering the use of navigation bars is crucial for any website.

With CSS, you can transform a dull HTML menu into an attractive navigation bar.

Navigation Bar = List of Links

As a standard HTML foundation, a navigation bar is essential.

In our example, we will build a standard HTML list-based navigation bar.

A navigation bar is essentially a list of links, so using <ul> and <li> elements makes a lot of sense:

Example

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Now, let's remove the margin and padding from the list:

Example

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

Example explanation:

list-style-type: none - Removes the bullet points from the list. A navigation bar does not need list markers.
Removes the default browser settings by setting margin and padding to 0.

The code in the above example is the standard code used for both vertical and horizontal navigation bars.

Vertical Navigation Bar

Using the above code, we just need to style the <a> elements to create a vertical navigation bar:

Example

a {
    display: block;
    width: 60px;
}

Example explanation:

display: block - Displays the link as a block element, making the entire area clickable (not just the text), and allows us to specify the width.
width: 60px - Block elements are by default the maximum width. We specify a width of 60 pixels.

Tip: View the example of a fully styled vertical navigation bar.

Note: Be sure to specify the width of the <a> elements in a vertical navigation bar. Omitting the width may cause unexpected results in IE6.

Vertical Navigation Bar Example

Create a simple vertical navigation bar example, where the background color changes when the mouse hovers over the options:

Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change background color on mouse-over */
li a:hover {
    background-color: #555;
    color: white;
}

Active/Current Navigation Bar Example

After clicking an option, we can add the "active" class to mark which option is selected:

Example

li a.active {
    background-color: #4CAF50;
    color: white;
}

Creating Links and Adding Borders

You can center the links by adding text-align: center style to the <li> or <a> elements.

You can add a border to the navigation bar by adding the border property to the <ul>. To add a border to each option, you can add border-bottom to each <li> element:

Example

ul {
    border: 1px solid #555;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

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

border: 1px solid #555;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

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

Full-Height Fixed Vertical Navbar

Next, we create a left vertical navbar that is fixed and takes up the full height of the browser window:

Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* Full height */
    position: fixed; 
    overflow: auto; /* Enable scrolling if the sidenav has too much content */
}

Note: This example is responsive and works on mobile devices.

Horizontal Navigation Bars

There are two ways to create a horizontal navigation bar. Using inline or float list items.

Both methods are excellent, but if you want the links to be the same size, you must use the float method.

Inline List Items

One way to build a horizontal navigation bar is to specify the <li> elements as inline, as shown in the following example:

Example

li {
    display: inline;
}

Example explained:

display: inline; - By default, <li> elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line.

Tip: See a fully styled horizontal navigation bar example.

Floating List Items

In the example above, the links have different widths.

For all the links to have the same width, float the <li> elements and specify a width for the <a> elements:

Example

li {
    float: left;
}
a {
    display: block;
    width: 60px;
}

Example explained:

float: left; - Use float to get block elements to slide next to each other
display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width
width: 60px; - Block elements take up the full width available by default. We want to specify a 60px width

Tip: See a fully styled horizontal navigation bar example.

Horizontal Navigation Bar Examples

Create a horizontal navigation bar with a black background color and change the background color of the links when the user moves the mouse over them:

Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link background color on hover */
li a:hover {
    background-color: #111;
}

Active/Current Navigation Bar Example

After clicking an option, we can add an "active" class to indicate which option is selected:

Example

.active {
    background-color: #4CAF50;
}

Right-Align Links

Align the navigation bar's right-most link to the right (float: right;):

Example

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

Add Dividers

Add dividers to the <li> elements using the border-right style:

Example

/* Add a border to all list items, except the last one */
li {
    border-right: 1px solid #bbb;
}

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

Fixed Navigation Bar

You can fix the navigation bar to the top or bottom of the page:

Fixed at the Top

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

Fixed at the Bottom

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

position: fixed;
top: 0;
width: 100%;
}

Fixed at the Bottom

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

Note: This example can be used on mobile devices.

Gray Horizontal Navbar

ul {
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li a {
    color: #666;
}

More Examples

❮ Css Pseudo Classes Css Padding ❯