CSS Vertical Navbar
A vertical navigation bar stacks its links in a column, a common pattern for sidebars and dashboards.
Navigation bars almost always start life as an unordered list of links. To turn that list into a vertical menu, you strip away the default list styling and give the links block-level styling so the whole row is clickable.
Removing the list styling
Reset the list
<!DOCTYPE html>
<html>
<head>
<style>
.sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="sidebar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>Removing the bullets, margin, and padding gives you a clean column of links to build on. Each list item still stacks vertically, which is exactly what a vertical navbar needs.
Making the links full-width blocks
Block-level links
<!DOCTYPE html>
<html>
<head>
<style>
.sidebar a {
display: block;
padding: 12px 16px;
color: #fff;
background: #00643c;
text-decoration: none;
}
</style>
</head>
<body>
<div class="sidebar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</body>
</html>Note: Setting the links to display: block makes the entire area, not just the text, respond to clicks and hover, which is easier for users to hit.
Adding a hover and active state
Hover and current page
<!DOCTYPE html>
<html>
<head>
<style>
.sidebar a {
display: block;
padding: 12px 16px;
color: #fff;
background: #00643c;
text-decoration: none;
}
.sidebar a:hover {
background: #00502f;
}
.sidebar a.active {
background: #003d24;
}
</style>
</head>
<body>
<div class="sidebar">
<a href="#" class="active">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</body>
</html>- Start from a semantic <nav> with a <ul> of links for accessibility
- Reset list-style, margin, and padding to remove default bullets and spacing
- Use display: block so each link fills the sidebar width
- Add :hover and an active class to show state, drawing on pseudo-classes
