Basic Navbar

640 ViewsFreeFrontend.dev

This code snippet provides a template for a simple navigation bar that includes a logo, sitelinks, and a call-to-action button. It is designed to be placed at the top of a webpage, providing an easy way for visitors to find and access different pages on the website. The call-to-action button can direct visitors to a specific page or action. This template is a great starting point for a user-friendly navigation experience and encourages users to take action.

<section class="py-5">
	<nav class="navbar navbar-expand-md 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="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarSupportedContent2" data-bs-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent2">
				<ul class="navbar-nav ms-auto my-2 my-md-0">
					<li class="nav-item ms-md-4">
						<a class="nav-link" href="">About</a>
					</li>
					<li class="nav-item ms-md-4">
						<a class="nav-link" href="">Shop</a>
					</li>
					<li class="nav-item ms-md-4">
						<a class="nav-link" href="">Blog</a>
					</li>
					<li class="nav-item ms-md-4">
						<a class="nav-link" href="">Contact</a>
					</li>
					<li class="nav-item ms-md-4 d-none d-md-block">
						<a class="btn btn-primary" href="">Sign up</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
</section>

Related Code Examples

Navbar with Stacked Icons

This code snippet provides a navigation bar for websites which includes icons above each sitelink, a logo, and a call-to-action […]

Navbar with Icons

This code snippet provides a navigation bar at the top of a webpage with icons for each sitelink, a logo, […]

Basic Navbar Example

This code snippet provides a simple navigation bar with sitelinks, a logo, and a search bar that can be placed […]

Clean Navbar Component

This code snippet creates a navigation bar component that includes a logo, sitelinks, search bar, social media icons, and contact […]

Corporate Navbar

This code snippet creates a corporate navigation bar that is on two rows and includes a logo, sitelinks, and contact […]

Navbar with Social Icons

This code snippet creates a navigation bar at the top of a webpage that includes social media icons, sitelinks and […]