<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Header test <span class="caret"></span></a> <ul class="dropdown-menu"> <li class="header">Plain background</li> <li><a href="#">Normal item</a></li> <li><a href="#">Normal item</a></li> <li class="header bg-primary">.bg-primary background</li> <li><a href="#">Normal item</a></li> <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> With a glyph</a></li> <li class="header bg-info">.bg-info background</li> <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> With a glyphm</a></li> <li class="header bg-success">.bg-success background</li> <li><a href="#">Normal item</a></li> <li class="header bg-warning">.bg-warning background</li> <li><a href="#">Normal item</a></li> <li class="header bg-danger">.bg-danger background</li> <li><a href="#">Normal item</a></li> </ul> </li> </ul> </div> </nav> Using the <a href="http://getbootstrap.com/css/#helper-classes-backgrounds">Bootstrap Contextual background</a> classes on the <li> allows for a more versatile use of the headers.<br /> If you want the dropdown to stay open when a header is clicked, include the JS code.

.dropdown-menu > li.header { clear: both; display: block; padding: 3px 20px; white-space: nowrap; font-weight: bold; border-bottom: 1px solid #DDD; border-top: 1px solid #DDD; cursor: default; }

$(document).ready(function(){ $("ul.dropdown-menu > li.header").on("click", function(){ return false; }); });