Basic Navbar Example


This code snippet provides a simple navigation bar with sitelinks, a logo, and a search bar that can be placed at the top of a webpage for visitors to easily find and access different pages, search for content, and navigate the website. This code is a great starting point for creating a user-friendly navigation experience.

<section class="py-5">
	<nav class="navbar navbar-expand-lg bg-light">
		<div class="container">
			<a class="navbar-brand" href=""><img alt="Free Frontend Logo" class="img-fluid" height="" src="https://freefrontend.dev/wp-content/uploads/free-frontend-logo.png" width="300"></a> <button aria-controls="navbarSupportedContent9" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarSupportedContent9" data-bs-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent9">
				<form class="d-flex align-items-center position-relative ms-lg-3">
					<div class="input-group align-items-center mt-3 mt-lg-0">
						<input aria-describedby="button-addon2" aria-label="Search" class="form-control" placeholder="Search" type="text"> <button class="btn bg-white border" id="button-addon2" type="button"><svg class="bi bi-search" fill="currentColor" height="20" viewbox="0 0 16 16" width="20" xmlns="http://www.w3.org/2000/svg">
						<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path></svg></button>
					</div>
				</form>
				<ul class="navbar-nav ms-auto my-2 my-lg-0">
					<li class="nav-item me-4">
						<a class="nav-link" href="">About</a>
					</li>
					<li class="nav-item me-4">
						<a class="nav-link" href="">Shop</a>
					</li>
					<li class="nav-item me-4">
						<a class="nav-link" href="">Blog</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="">Contact</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
</section>
To top