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:
- Home
- News
- Contact
- About
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;
}Live preview
Example explained
- The first block (ul) is similar to the earlier lesson. 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:
- Home
- News
- Contact
- About
Example
.active {
background-color: #04AA6D;
color: white;
}Live preview
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:
- Home
- News
- Contact
- About
Example
ul {
border: 1px solid #555555;
}
li {
text-align: center;
border-bottom: 1px solid #555555;
}
li:last-child {
border-bottom: none;
}Live preview
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 */
}Live preview
Note
This example might not work properly on mobile devices.
Responsive Navbar
Example
How to use CSS media queries to create a responsive navbar: