Bootstrap 3: Brand Dropdown Menu

Posted on | Tyler

Did you need a dropdown menu on your brand name in Bootstrap 3? This post and tutorial will show you how you can add it to your Bootstrap website!

As I’m working on a separate website (not this one) with Bootstrap, there was a need for me to add a dropdown menu to the brand of the menu. In Bootstrap, this refers to the area where the site logo/name is located, usually on the left of any website navigation. After searching on Google, I came across a solution on Stack Overflow, I realized that the solution was for Bootstrap v2, and didn’t bother to dig deeper into Google to find a solution, and rather took the principle concept in the old method, and applied it to Bootstrap 3. It took some hours to figure out, as some CSS fixes needed to be applied, so follow the steps below to add a dropdown to your bootstrap navbar.

Old HTML Code

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a href="#" class="navbar-brand">Brand</a>
		</div>
	</div>
</nav>

Above, is the normal HTML code given by bootstrap docs that shows you how to add a basic navbar to your bootstrap website. In order to properly add a dropdown to this, we are basically acting as if we are putting a navigation menu in the area where the brand usually goes. Take a look at the changes made to the code below.

New HTML Code

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<ul class="nav navbar-nav navbar-brand-dropdown">
				<li class="dropdown">
					<a href="#" class="navbar-brand dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
						Brand <span class="caret"></span>
					</a>
					<ul class="dropdown-menu dropdown-brand">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#">Separated link</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#">One more separated link</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</nav>

You’ll notice that the following classes navbar-brand-dropdown, navbar-brand, navbar-toggle, and dropdown-brand are highlighted in blue. Aside from navbar-brand and navbar-toggle, the other two classes are custom css classes. So with that in mind, you’ll need the following css below added to your custom css stylesheet, or called within <style> tags in the <head> of the document.

CSS

.navbar-brand-dropdown {
	margin: 0;
}

.navbar-brand.dropdown-toggle {
	padding-top: 15px;
}

.dropdown-menu.dropdown-brand {
	margin-left: -15px;
}

Without the custom css classes, the new code will display a dropdown menu next to your brand just fine. However, without the added classes, the positioning breaks a little when the page is viewed on smaller devices. So these classes were added with that in mind, and overall it looks great on both desktop and mobile devices.

End Result?

You can view a working demo on Bootply, and download/fork this code by clicking here. Did you see some flaws in the code or know how you can make it better? Feel free to leave comments below, especially if you have questions. I hope this helps someone as much as it helped me.

Did you like this? Share it: