Twitter bootstrap split dropdown

Question

I have a navbar and I have a caret next to dropdown menu.

In current code, if user clicks Operations text or caret, dropdown menu is opened. But I need this:

• If user clicks Operations link, I want user to go to my /operations/ page.
• If user clicks to the caret, dropdown menu will be visible. If user click one of the elements of dropdown menu, user will be redirected to related page.

Fiddle: http://jsfiddle.net/mavent/UtDqm/2/

<div class="navbar navbar-inverse">
  <li class="dropdown" id="myTools">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#myTools">
        Operations
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="/mypage1/">MyPage 1</a></li>
        <li><a href="/mypage2/">MyPage 2</a></li>
    </ul>
  </li>  
</div>   

In Twitter bootstrap documentation it is noted how to create split button dropdowns here. I don't want to use buttons. Is it possible to have split behaviour without using buttons. Just with links?

Answer 1

Couldn't you just split the Operations link into a new <a> tag?

<div class="navbar navbar-inverse">
  <li class="dropdown" id="myTools">
    <a href="/operations/" style="display:inline-block;padding-right:0px;">Operations</a>
    <a class="dropdown-toggle" data-toggle="dropdown" href="#myTools"  style="display:inline-block;padding-left:0px;">
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="/mypage1/">MyPage 1</a></li>
      <li><a href="/mypage2/">MyPage 2</a></li>
    </ul>
  </li>  
</div>

Answer 2

Are you looking for something like this?

<div class="btn-group">
    <a href="http://google.com" target="_blank" class="btn btn-link">Action</a>
   <a href="#" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
        <li><a href="/mypage1/">MyPage 1</a></li>
        <li><a href="/mypage2/">MyPage 2</a></li>
    </ul>
</div>

http://jsfiddle.net/UtDqm/6/