Ecommerce Navbar


This code snippet creates a simple ecommerce navigation bar template to provide an easy way for visitors to access different pages on the website. It includes icons for a shopping basket and account login, allowing users to easily view their cart and account information. It is a great starting point for creating a user-friendly navigation experience on an ecommerce website.

<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="navbarSupportedContent4" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarSupportedContent4" data-bs-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent4">
				<ul class="navbar-nav ms-auto my-2 my-lg-0">
					<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>
				<div class="d-flex ms-lg-4 mb-3 mb-lg-0">
					<a class="text-dark" href=""><svg class="bi bi-handbag" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
					<path d="M8 1a2 2 0 0 1 2 2v2H6V3a2 2 0 0 1 2-2zm3 4V3a3 3 0 1 0-6 0v2H3.36a1.5 1.5 0 0 0-1.483 1.277L.85 13.13A2.5 2.5 0 0 0 3.322 16h9.355a2.5 2.5 0 0 0 2.473-2.87l-1.028-6.853A1.5 1.5 0 0 0 12.64 5H11zm-1 1v1.5a.5.5 0 0 0 1 0V6h1.639a.5.5 0 0 1 .494.426l1.028 6.851A1.5 1.5 0 0 1 12.678 15H3.322a1.5 1.5 0 0 1-1.483-1.723l1.028-6.851A.5.5 0 0 1 3.36 6H5v1.5a.5.5 0 1 0 1 0V6h4z"></path></svg></a> <a class="text-dark ms-3" href=""><svg class="bi bi-person-circle" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
					<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
					<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" fill-rule="evenodd"></path></svg></a>
				</div>
			</div>
		</div>
	</nav>
</section>
To top