3

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?

MrPurpleStreak
  • 1,477
  • 3
  • 17
  • 28
  • This is what I mean. The top bar the caret and button are separate, in the bottom one I use a "normal" button. http://jsfiddle.net/musmuris/R3JKz/10/ Neither of these look quite right – MrPurpleStreak Dec 07 '12 at 17:43
  • Possible duplicate of [Navbar split button dropdown with Bootstrap 3](http://stackoverflow.com/questions/20539329/navbar-split-button-dropdown-with-bootstrap-3) – Matyas Aug 30 '16 at 19:19
  • I don't see how a question asked a year later can be a duplicate? however I've edited to point out this was bootstrap v2 at the time of asking ~4 years ago! – MrPurpleStreak Sep 03 '16 at 18:48

1 Answers1

4

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.

eziegl
  • 331
  • 3
  • 10
  • 1
    Thanks. Yes - that's what I wanted. I'd come to the same conclusion about padding and tried the same. Problem with that is the caret doesn't change colour when you hover over the bit it's in - may need a little JS to fix that. I was hoping bootstrap would have this built in and I'd just missed it. Oh well. Thanks again. – MrPurpleStreak Dec 07 '12 at 19:42
  • This has one major disadvantage: On small screens the caret will be displayed as a own menu item instead of being "tied" to the user item. – Fabian May 01 '16 at 09:31