CSS Vertical Navigation Bar

In a vertical navigation bar, the navigation links are stacked vertically (on top of each other), and is typically aligned along the left or right side of a webpage.

The basics of a vertical navigation bar is an unordered list (<ul>), with list items (<li>), each holding a link (<a>), as shown in the Navbar Intro page.

CSS Vertical Navbar Example

Here, we create a basic vertical navigation bar with a gray background color, and we also change the background color and the text color of the links when the user mouse over them:

Example

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

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

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

Try it Yourself »

Example explained:

The first block (ul) is similar to the previous page. In addition we have specified a fixed width (200px) and a light gray background color
The next block (li a) styles <a> elements inside <li> elements
Displaying the links as block elements makes the whole link area clickable (not just the text), and allows us to specify width, padding, margin, height, etc. We add a link color and some padding. We also remove the underline from these <a> elements
The last block (li a:hover) changes the link color and background color when a user mouse over them

Active State

Now we add an "active" class to highlight the link corresponding to the current page to let the user know which page/section he/she is on:

Example

.active {
background-color: #04AA6D;
color: white;
}

Try it Yourself »

Center Navbar Links & Add Borders

To center the navbar links, add text-align: center; to <li> or <a>.

If you want a border around the navbar, add the border property to <ul>.

If you also want borders inside the navbar, add a border-bottom property to all <li> elements, except for the last one:

Example

ul {
border: 1px solid #555555;
}

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

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

Try it Yourself »

Full-height Vertical Navbar

Create a full-height, "sticky" side navigation:

Example

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 130px;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}

Try it Yourself »

Note: This example might not work properly on mobile devices.