In this tutorial, we will see how to create a navigation bar in html using <nav> tag. The nav tag is used to hold the navigation links. So we can easily navigate from one web page to another web page or any other web applications through these links.
The <nav> tag is a block level element and it provides a specific section in the web application. It holds the navigation links for the users to navigate within or outside the web app. We will see two types of menu in html using this tag.
(a) Horizontal navigation menu
(b) Vertical navigation menu
Horizontal navigation menu with example:
To create a horizontal nav menu we need to use html unordered list tag with css together. Follow the below example to create this.
Create a html file and add the below codes on it.
<!DOCTYPE html>
<html>
<head>
<title>Horizontal navigation menu with example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="/home/">Home</a></li>
<li><a href="/about-us/">About Us</a></li>
<li><a href="/products/">Products</a></li>
<li><a href="/our-team/">Our Team</a></li>
<li><a href="/contact-us/">Contact Us</a></li>
<li><a href="/blogs/">Blogs</a></li>
</ul>
</nav>
</body>
</html> Follow the below codes to stylesheet and link it your html file.
html, body{
padding: 10px;
margin: 10px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00008B;
}
nav li {
display: inline-block;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 20px 25px;
text-decoration: none;
font-family: sans-serif;
}
nav li a:hover {
background-color: #FF5733;
} Vertical navigation menu with example:
Here, also we must use html <ul> tag with css together. Follow the below example to create this.
Create a html file and add the below codes on it.
<!DOCTYPE html>
<html>
<head>
<title>Vertical navigation menu with example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="/home/">Home</a></li>
<li><a href="/about-us/">About Us</a></li>
<li><a href="/products/">Products</a></li>
<li><a href="/our-team/">Our Team</a></li>
<li><a href="/contact-us/">Contact Us</a></li>
<li><a href="/blogs/">Blogs</a></li>
</ul>
</nav>
</body>
</html> The changes in the css properties provides the difference between horizontal and vertical menus. Follow the below codes to stylesheet and link it your html file.
html, body{
padding: 10px;
margin: 10px;
text-align: center;
}
nav {
width: 280px;
display: inline-block;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00008B;
}
nav li {
display: block;
}
nav li a {
display: block;
color: white;
text-align: left;
padding: 20px 25px;
text-decoration: none;
font-family: sans-serif;
}
nav li a:hover {
background-color: #FF5733;
}