Home / Website Designing / HTML / How to Create Vertical Navigation Bar in HTML

How to Create Vertical Navigation Bar in HTML

In this Tutorial, Your are going to learn about HTML Vertical navigation bar. I will show you how to code for horizontal navigation bar in HTML and which CSS properties will be used to make them feel like a navigation bar.

As you can see here this is the Vertical navigation Bar Example which is used by most of the fixed layout websites.

Vertical Navigation bar

Vertical navigation bar HTML Code for Above Image

<nav id="nav_list">
<li><a href="index.html">Home</a></li>
<li><a href="tickets.html">Get Tickets</a></li>
<li><a href="members.html" class="current">Become a members</a></li>
<li><a href="about_us.html">About Us</a></li>

Vertical Navigation Bar CSS Code for Above Example

* {
margin: 0;
padding: 0;
#nav_list ul {
list-style-type: none;
margin-left: 1.25em;
margin-bottom: 1.5em;
#nav_list ul li {
width: 200px;
margin-bottom: .5em;
border: 2px solid blue;
#nav_list ul li a {
display: block;
padding: .5em 0 .5em 1.5em;
text-decoration: none;
font-weight: bold;
color: blue;
#nav_list ul li a.current {
background-color: silder;

Short Details of above code

  • The Html for a vertical navigation bar is best coded as a series of <a> elements with the li elements of a unordered list.
  • To make the entire box for a link clickable, you can set the display property for the <a> elements to block and use padding to provide the space around the links.
  • To show the users what page they’re on, it’s a good practice to highlight the current link. One way to do that is to apply a different background color to it.

If you want to learn HTML and CSS from start as a beginner you can start learning from our video course of Website Designing.

Another Different way to Create Vertical Navigation Bar in HTML

This is the other way of creating vertical navigation In which I show you a live video lecture here.

Share With Your Friends Plz
  • 1

About Imran Syed

Mr. Imran Syed is a Software Engineer. Who is working in this field from last 4 years, working with many companies on website designing, website development, e-commerce platform, software development, applications development and many other e-training platform under the owning software house i.e: czone-star. He recently started working as blogger and YouTuber from last 1 Year. To educate more people with his experience and skills.

Check Also

How to Create Creative Resume Design in Ms Word Tips

How to Create Creative Resume Design in Ms Word Tips

How to Create Creative Resume Design in Ms. Word Tips: Hello, Friends as you know …

One comment

  1. Thanks for the great tips! I do have a question however
    that I think you could probably answer. I was wondering, What are some good projects/ideas
    in web development that a beginner can start with to take
    his/her skills to the next level? Any insight would be greatly appreciated!

Leave a Reply

Your email address will not be published. Required fields are marked *

twenty − 1 =