Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a Vertical Navigation Bar using HTML and CSS ?
A navigation bar is a graphical feature that allows users to navigate through a website or application. It is typically presented as a list of links at the top or side of the screen and assists users in navigating to various areas or pages within the website. HTML and CSS can be used to build horizontal or vertical navigation bars.
HTML is used to specify the structure and content of the navigation bar, whilst CSS is used to design and make the navigation bar look appealing. You may improve the overall user experience and make it easier for users to find what they are looking for on your website by adding a navigation bar.
Approaches
There are various methods for constructing a navigation bar with HTML and CSS, some of them are as follows −
Using Unordered Lists (UL)
Using Nav Tag
Let us look at each approach in detail with examples now.
Using the Unordered Lists(UL)
The first approach for constructing a vertical navigation bar with HTML and CSS is by using the Unordered Lists(UL). You may make a navigation bar in HTML by using unordered lists (UL) and list items (LI) and decorating them with CSS.
Example
Here is an example of creating a Vertical Navigation Bar using Unordered Lists(UL) in HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
background-color: #333;
width: 200px;
height: 100%;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
display: block;
}
.navbar a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #111;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<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>
</div>
</body>
</html>
Using Nav Tag
The second approach for constructing a vertical navigation bar with HTML and CSS is by using the Nav Tag. HTML5 added the <nav> tag, which is especially used for navigation. You can create a navigation bar with the <nav> tag and style it with CSS.
Example
Here is an example of creating a Vertical Navigation Bar using Nav Tag in HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 200px;
height: 100%;
background-color: #333;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: block;
}
a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
background-color: #111;
}
</style>
</head>
<body>
<nav>
<ul>
<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>
</nav>
</body>
</html>
Conclusion
Creating a vertical navigation bar using HTML and CSS is a simple process that can be accomplished in a variety of ways. The most frequent methods are to use unordered lists (<ul>) or the <nav> tag. Whatever technique you take, the basic structure of the HTML code will remain the same: a container element (either an <ul> or a <nav>) that contains the navigation links represented by list items (<li>) and anchor tags (<a>). CSS allows you to completely adjust the design of the navigation bar, including the background color, width, height, and text style of the navigation links. You can construct a functional and visually appealing navigation bar for your website by utilizing HTML and CSS.
4K+ Views
