Create HTML Navigation Bar using <nav> Tag

Article By Digamber Rawat on
Today i am going to talk about HTML Nav <nav> tag . This tag refers to the section which holds the navigation links to navigate from one web page to another web page. Navigation links are included in it, in return it allows you to navigate within the application or outside the web application.

Let us get into the technicality, HTML Nav <nav> tag is a block level element. It provides a specified section in the web app, which holds the navigation links for the users to navigate within or outside the web app. Menus, Tables of contents and indexes are the most common examples of navigation element.

HTML Nav Example

<nav>
<a href="/home/">Home</a>
<a href="/about/">About</a>
<a href="/products/">Products</a>
<a href="/our-team/">Our Team</a>
<a href="/contact-us/">Contact Us</a>
</nav>

Create Horizontal Navigation Menu using HTML & CSS

In order to create horizontal navigation menu we must use HTML and CSS together. This has to be created within the HTML’s unordered list element.

Creating navigation with HTML is now really easy because of nav tag. It makes navigation code look pretty neat and clean. Check out the example below.

Create Vertical Navigation Menu using HTML & CSS

In order to create vertical navigation menu we must use HTML and CSS together. See the code example below.

<nav> Tag Browser Support

Chrome Firefox Edge Safari Opera
9 4 Yes 5 11

Chec out the full browser compatibility report on MDN Web Docs

Digamber Rawat

Feel free to contact me, If you are looking for a freelance full stack Developer, with the following skills: Mongo DB, Express JS, Angualr 2+, Node JS, Loopback JS, Firebase, Ionic Framework and WordPress. I also offer remote contracting service to the clients across the globe. Hire Me