CODEWITHSUNDEEP
twitter-bootstrap
Tomas
Tomas

Reputation: 18117

Split button dropdowns set action url

I am trying to implement Split button dropdowns in my web app and I do not find a way to set Url on the main Action button:

<button class="btn">Action</button>

How to do that?

http://twitter.github.com/bootstrap/components.html#buttonDropdowns

Upvotes: 3

Views: 1660

Answers (3)

TitanFighter
TitanFighter

Reputation: 5084

If someone needs a code for Bootstrap 4 Alpha 5

<div class="btn-group">
    <a class="btn btn-primary" href="#">Action</a>

    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropdown</span>
    </button>

    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Test 1</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Test 2</a>
    </div>
</div>

Upvotes: 0

Pierre
Pierre

Reputation: 1227

I wrote a standalone jQuery plugin that creates an easily stylable dropdown button (with a primary and secondary links). Usage is as follows:

The markup

<div class="split-btn">
  <a href="#">Primary Link</a>
  <a href="#">Secondary Link</a>
  <a href="#">Secondary Link</a>
  <a href="#">Secondary Link</a>
</div>

The initialization

$(document).ready(function(){
  $('.split-btn').splitdropbutton({
    toggleDivContent: '<i class="icon-reorder"></i>' // optional html content for the clickable toggle div
  })
});

For more details and a live demo, check out the github repo.

Upvotes: 0

pfried
pfried

Reputation: 5079

A button is not thought to be a standalone element with an action in pure html.

But you can style a link as a button:

<div class="btn-group">
    <a href="#" class="btn">Action</a>

    <button class="btn dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>

  <ul class="dropdown-menu">
    <li>Test</li>
    <li>Test 2</li>
  </ul>

</div>

Or you add a JavaScript Listener to the button.

Upvotes: 3

Related Questions