Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a Vertical Navigation Bar using HTML and CSS ?
A vertical navigation bar is a UI component that displays navigation links in a vertical stack, typically positioned on the left or right side of a webpage. It helps users navigate through different sections or pages of a website efficiently. HTML provides the structure while CSS handles the styling and positioning.
Syntax
/* Basic vertical navigation structure */
nav {
width: value;
height: value;
background-color: color;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: block;
}
nav a {
display: block;
padding: value;
text-decoration: none;
}
Method 1: Using Unordered Lists
The most common approach uses an unordered list (<ul>) with list items (<li>) to create the navigation structure
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
background-color: #333;
width: 200px;
height: 400px;
margin: 20px;
border-radius: 8px;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
display: block;
border-bottom: 1px solid #444;
}
.navbar a {
display: block;
color: white;
text-align: center;
padding: 16px 20px;
text-decoration: none;
transition: background-color 0.3s;
}
.navbar a:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
</body>
</html>
A dark gray vertical navigation bar with rounded corners appears, containing four navigation links (Home, About, Services, Contact) that highlight with a lighter gray background when hovered over.
Method 2: Using Nav Element
HTML5's semantic <nav> element provides better structure and accessibility for navigation components
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 220px;
height: 350px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
nav ul {
list-style-type: none;
margin: 0;
padding: 20px 0;
}
nav li {
display: block;
margin: 5px 15px;
}
nav a {
display: block;
color: white;
text-align: left;
padding: 15px 20px;
text-decoration: none;
border-radius: 6px;
font-weight: 500;
transition: all 0.3s ease;
}
nav a:hover {
background-color: rgba(255, 255, 255, 0.2);
transform: translateX(5px);
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="/">? Home</a></li>
<li><a href="/about">? About</a></li>
<li><a href="/services">?? Services</a></li>
<li><a href="/contact">? Contact</a></li>
</ul>
</nav>
</body>
</html>
A modern vertical navigation bar with a purple gradient background and rounded corners appears. Each navigation item has an icon and slides slightly to the right with a semi-transparent white background when hovered.
Key Properties
| Property | Purpose | Common Values |
|---|---|---|
display: block |
Makes links fill full width | block |
list-style-type: none |
Removes bullet points | none |
width |
Controls navbar width | 200px, 15rem, 20% |
padding |
Adds clickable area | 14px 16px, 1rem 1.5rem |
Conclusion
Vertical navigation bars can be created using either unordered lists or the semantic <nav> element. Both approaches use CSS to remove default list styling and create block-level links for optimal user experience.
6K+ Views
