How to design a navbar in Html

Lecture 06

How to design a navbar in Html

If we want to make a navigation bar in Html, then we have to follow the steps which are given below. Using these steps, we can easily create the Navigation bar. The ul tag, which is used to show the unordered list. And, then we have to define the list items in the li tag. We have to define those items which we want to show in the navigation bar.

Navbar code of HTML with CSS

Nav tag is used for navigation. Ul, li, achor tags are also used in navbar coding.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Navbar</title>
	<style type="text/css">
	nav{
		width:100%;
	}
	ul
	{
		padding:0px;
		margin:0px;
	}
	li
	{
		float:left;
		padding:10px 20px;
		list-style:none;
	}
	</style>
</head>
<body>
<nav>
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Services</a></li>
<li><a>Login</a></li>
</ul>
</nav>
</body>
</html>

Navbar with bootstrap5

Navbars come with built-in support for a handful of sub-components

<html>
<head>
<title>Taleem Dunya Navbar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</body>
<html>

Lecture 06

How to design a navbar in Html

Navbar code of HTML with CSS

Navbar with bootstrap5

What is Website Designing

What is HTML and Web Page

HTML Tags

HTML Layouts

Introduction of CSS

Introduction to Bootstrap5

How to design a navbar in Html

HTML forms and input types

Java Script in web development

Courses

Courses

Courses

Top Links