CODEWITHSUNDEEP
twitter-bootstrap
MrPurpleStreak
MrPurpleStreak

Reputation: 1557

How can you have a navbar split button dropdown component in bootstrap?

I'm using bootstrap (v2) and I see from http://twitter.github.com/bootstrap/components.html#dropdowns that you can have "Split Button Dropdowns".

In the Navbar you can have dropdowns

However it doesn't look like you can have a split dropdown in the navbar. What I want to use this for is to have the name of the logged in user with the caret next to it. Clicking the user name takes you to a page for the user, but the caret would show a dropdown with actions like "sign out" etc.

Is this possible?

Upvotes: 3

Views: 8809

Answers (1)

eziegl
eziegl

Reputation: 341

I modified your jsfiddle to do what I think you are asking. Putting the caret in its own list item creates that awkward space between the caret and the username. Overcoming this will require some overrides. Edit: As a quick example, I used two classes to remove the padding between the two elements. I had to use the !important property though, which is not best practice. http://jsfiddle.net/R3JKz/15/

<li>
 <a href="#" class="caret-before">
  someuser
 </a>
</li>
<li class="dropdown">    
 <a class="dropdown-toggle caret-after" data-toggle="dropdown">
  <b class="caret"></b>
 </a>
    ...
 </li>

Also included in the jsfiddle is an example of how to use the b tag as the trigger, but this method doesn't work well in the bootstrap navbars because it breaks the layout. Example:

<li class="dropdown">
 <a href="#" class="pull-left">
  A Dropdown Menu
 </a>
 <b class="caret pull-left dropdown-toggle" data-toggle="dropdown">
 </b>

I hope this helped, don't hesitate to ask for clarification.

Upvotes: 4

Related Questions