Dropdowns
Click to preview the Dropdowns demo. View demo
Color
Code:
html
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="active"><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Normal <span class="caret"></span></button>
<ul class="dropdown-menu hover-accent">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="active"><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn bg-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
<ul class="dropdown-menu hover-primary">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="active"><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn bg-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
<ul class="dropdown-menu hover-success">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="active"><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn bg-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
<ul class="dropdown-menu hover-info">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="active"><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn bg-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
<ul class="dropdown-menu hover-warning">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="active"><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn bg-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
<ul class="dropdown-menu hover-danger">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="active"><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn bg-black dropdown-toggle" data-toggle="dropdown">Dark <span class="caret"></span></button>
<ul class="dropdown-menu hover-black">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="active"><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Default <span class="fa fa-caret-up"></span></button>
<ul class="dropdown-menu top-left">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Default <span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu bottom-left">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Default <span class="fa fa-caret-right"></span></button>
<ul class="dropdown-menu right-top">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-left"></span> Default</button>
<ul class="dropdown-menu left-top">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Default <span class="fa fa-caret-up"></span></button>
<ul class="dropdown-menu top-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Default <span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu bottom-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Default <span class="fa fa-caret-right"></span></button>
<ul class="dropdown-menu right-bottom">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><span class="fa fa-caret-left"></span> Default</button>
<ul class="dropdown-menu left-bottom">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Position
Code:
html
<div class="btn-group">
<button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default <span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">HEADER FIRST</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="dropdown-header">HEADER SECOND</li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default <span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default <span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu">
<li><a href="#"><span class="fa fa-star-o"></span> Action</a></li>
<li><a href="#"><span class="fa fa-pencil"></span> Another action</a></li>
<li><a href="#"><span class="fa fa-trash-o"></span> Something else here</a></li>
<li class="divider"></li>
<li><a href="#"><span class="fa fa-cog"></span> Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default <span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action <span class="badge bg-warning">6</span></a></li>
<li><a href="#">Another action <span class="badge bg-success">12</span></a></li>
<li><a href="#">Something else here <span class="badge bg-danger">8</span></a></li>
<li class="divider"></li>
<li><a href="#">Separated link <span class="badge bg-info">22</span></a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default <span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu dropdown-bullet">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<ul class="dropdown-menu dropdown-demo">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu"> <a href="#" >Separated link<span class="ico-right fa fa-caret-right"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Second level link</a></li>
<li><a href="#">Second level link</a></li>
<li><a href="#">Second level link</a></li>
<li><a href="#">Second level link</a></li>
<li class="dropdown-submenu"> <a href="#" >Second level link<span class="ico-right fa fa-caret-right"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Second level link</a></li>
<li><a href="#">Second level link</a></li>
<li><a href="#">Second level link</a></li>
<li><a href="#">Second level link</a></li>
<li><a href="#">Second level link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="btn-group">
<button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default <span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu ">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu"> <a href="#">Separated link<span class="ico-right fa fa-caret-right"></span></a>
<ul class="dropdown-menu right-bottom" role="menu">
<li><a href="#">Second level link</a></li>
<li><a href="#">Second level link</a></li>
<li><a href="#">Second level link</a></li>
<li><a href="#">Second level link</a></li>
<li><a href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default <span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu"> <a href="#" role="button" tabindex="-1" >More options <span class="ico-right fa fa-caret-left"></span></a>
<ul class="dropdown-menu left-top" role="menu">
<li><a href="#">Second level link</a></li>
<li><a href="#">Second level link</a></li>
<li><a href="#">Second level link</a></li>
<li><a href="#">Second level link</a></li>
<li><a href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default <span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu ">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn bg-accent dropdown-toggle" data-toggle="dropdown" data-event="hover">Default <span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu dropdown-bullet">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn bg-accent dropdown-toggle" data-toggle="dropdown">Default <span class="fa fa-caret-down"></span></button>
<ul class="dropdown-menu animate">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn bg-accent" type="button">Action</button>
<button data-toggle="dropdown" class="btn dropdown-toggle bg-accent"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>