How to Create HTML Navigation Bar using Nav Tag

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