Prev Next

CSS Vertical Navbar

A vertical navbar stacks links on top of each other, often aligned to the left or right side of the viewport. This format is useful for side menus, dashboards, or sites with numerous sections. You can style list elements or anchor tags to create a clean vertical navigation.

Key Topics

  • Vertical Layout
  • Sidebar Navigation

Example

Use a ul with li elements to create a vertical stack of links, and style them for clarity.

<style>
.vertical-nav {
    width: 200px;
    background: #333;
    padding: 0;
    margin: 0;
    list-style: none;
}
.vertical-nav li {
    border-bottom: 1px solid #444;
}
.vertical-nav a {
    display: block;
    color: #fff;
    padding: 10px;
    text-decoration: none;
}
.vertical-nav a:hover {
    background: #444;
}
</style>
<ul class="vertical-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Explanation: Each link occupies a full line, creating a vertical menu that’s easy to navigate, especially on wider screens or as a sidebar.

Key Takeaways

  • Space Efficiency: Vertical menus save horizontal space.
  • Organization: Ideal for detailed site hierarchies or dashboards.
Prev Next