Navbar Snippet


This code snippet creates a simple navigation bar template with a logo, sitelinks, and a search bar. The navigation bar is typically placed at the top of a webpage and provides an easy way for visitors to find and access different pages. The search bar feature can enhance the user experience by allowing them to quickly and easily search for specific content on the website. This template is a great starting point for creating a clean and 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="navbarSupportedContent3" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarSupportedContent3" data-bs-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
			<div class="collapse navbar-collapse my-2 my-lg-0" id="navbarSupportedContent3">
				<ul class="navbar-nav ms-lg-3 mb-1">
					<li class="nav-item ms-lg-4">
						<a class="nav-link" href="">About</a>
					</li>
					<li class="nav-item ms-lg-4">
						<a class="nav-link" href="">Shop</a>
					</li>
					<li class="nav-item ms-lg-4">
						<a class="nav-link" href="">Blog</a>
					</li>
					<li class="nav-item ms-lg-4">
						<a class="nav-link" href="">Contact</a>
					</li>
				</ul>
				<form class="d-flex align-items-center position-relative ms-auto">
					<div class="input-group align-items-center">
						<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>
			</div>
		</div>
	</nav>
</section>
To top