Creating a Veritcal Navigation Bar

Share Button

Navigation bar is just a bunch of links in an order that helps to navigate within the website. And also it is a common practice that a link is always defined in lists. Some common navigation links are home, news, blog, about, etc….

A vertical navigation bar is something that is arranged vertically. You can style the navigation bar according to your own imagination, but let us see how to make a navigation bar here,

a) Arrange navigation links with lists

navigation link lists

b) Removing bullets and links underlines

removing navigation lists bullets & underline

c) Removing padding and margins on the list

removing navigation links padding and margins

Every browser has different padding and margin settings on each elements. So, it is better to remove margin and padding for equal visualization in all browsers.

d) Adding color to the list

adding colors to the navigation lists

e) Make the link as a block

The link is only as wide as the content inside because it is an inline element. So to make all links have even width, the links must be made block elements with a certain width.

Navigaition link blocks

f) Adding borders to lists

vertical navigation with borders

In this way, one can create a vertical navigation bar. One can place this navigation bar on a website according the developer preferences.

Share Button
Subscribe
, CSS, Lists

One thought on “Creating a Veritcal Navigation Bar

Leave a Comment

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