<%= buttongroup
buttons => [
['Button 1'],
['Button 2'],
['Button 3'],
]
%>
<div class="btn-group">
<button class="btn btn-default" type="button">Button 1</button>
<button class="btn btn-default" type="button">Button 2</button>
<button class="btn btn-default" type="button">Button 3</button>
</div>
A basic button group.
<%= buttongroup small,
buttons => [
['Button 1'],
{ button => ['Dropdown 1', caret],
items => [
['Item 1', ['item1'] ],
['Item 2', ['item2'] ],
[],
['Item 3', ['item3'] ],
],
},
['Button 2'],
['Button 3'],
],
%>
<div class="btn-group btn-group-sm">
<button class="btn btn-default" type="button">Button 1</button>
<div class="btn-group btn-group-sm">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown 1 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li>
<li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li>
<li class="divider"></li>
<li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li>
</ul>
</div>
<button class="btn btn-default" type="button">Button 2</button>
<button class="btn btn-default" type="button">Button 3</button>
</div>
Nested button group. Note that the small strapping is only necessary once. The same classes are automatically applied to the nested .btn-group.
<%= buttongroup vertical,
buttons => [
['Button 1'],
{ button => ['Dropdown 1', caret],
items => [
['Item 1', ['item1'] ],
['Item 2', ['item2'] ],
[],
['Item 3', ['item3'] ],
],
},
['Button 2'],
['Button 3'],
],
%>
<div class="btn-group-vertical">
<button class="btn btn-default" type="button">Button 1</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown 1 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li>
<li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li>
<li class="divider"></li>
<li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li>
</ul>
</div>
<button class="btn btn-default" type="button">Button 2</button>
<button class="btn btn-default" type="button">Button 3</button>
</div>
Nested button group, with the vertical strapping.
<%= buttongroup justified,
buttons => [
['Button 1'],
['Button 2'],
['Button 3'],
]
%>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-default" type="button">Button 1</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">Button 2</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">Button 3</button>
</div>
</div>
A justified button group. Note the automatic (and necessary) wrapping of buttons in .btn-groups.
<%= buttongroup justified,
buttons => [
['Link 1', ['http://www.example.com/'] ],
['Link 2', ['http://www.example.com/'] ],
{ dropup,
button => ['Dropup 1', caret],
items => [
['Item 1', ['item1'] ],
['Item 2', ['item2'] ],
[],
['Item 3', ['item3'] ],
],
},
]
%>
<div class="btn-group btn-group-justified">
<a class="btn btn-default" href="http://www.example.com/">Link 1</a>
<a class="btn btn-default" href="http://www.example.com/">Link 2</a>
<div class="btn-group dropup">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropup 1 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li>
<li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li>
<li class="divider"></li>
<li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li>
</ul>
</div>
</div>
Mix links and dropup menus in justified button groups.
<%= buttongroup
buttons => [
['Link 1', ['http://www.example.com/'] ],
{ button => [undef, caret],
items => [
['Item 1', ['item1'] ],
['Item 2', ['item2'] ],
[],
['Item 3', ['item3'] ],
],
},
]
%>
<div class="btn-group">
<a class="btn btn-default" href="http://www.example.com/">Link 1</a>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li>
<li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li>
<li class="divider"></li>
<li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li>
</ul>
</div>
</div>
Split button dropdowns uses the same syntax as any other multi-button dropdown. Set the caret button title to undef.
<%= buttongroup { button => ['Default', caret],
items => [
['Item 1', ['item1'] ],
['Item 2', ['item2'] ],
[],
['Item 3', ['item3'] ],
],
}
%>
<%= buttongroup { button => ['Big danger', caret, large, danger],
items => [
['Item 1', ['item1'] ],
['Item 2', ['item2'] ],
[],
['Item 3', ['item3'] ],
],
}
%>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Default <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li>
<li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li>
<li class="divider"></li>
<li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-danger btn-lg dropdown-toggle" type="button" data-toggle="dropdown">Big danger <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li>
<li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li>
<li class="divider"></li>
<li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li>
</ul>
</div>
Using the shortcut to create single-button button group dropdowns.