Split Dropdown(ui_split_dropdown)

UiBibz::Ui::Core::Forms::Dropdowns::SplitDropdown

Use any button to trigger a dropdown menu by providing the proper menu markup.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • options[hash]<default: {}>
  • html_options[hash]<default: {}>

ui_split_dropdown name, options, html_options do |d|
  # by variable
  d.link content, options, html_options
  # or block
  d.link options, html_options do
    content
  end

  d.divider

  # by variable
  d.header content, options, html_options
  # or block
  d.header options, html_options do
    content
  end

  # by variable
  d.html content
  # or block
  d.html do
    content
  end
end

Options

The specific options for this component are:
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • glyph[string/hash](use component glyph method)
  • state[symbol](:disabled, :active)(use component state method)
  • size[symbol](:lg, :md, :sm)(use component size method)
  • inline[boolean](true, false)
  • outline[boolean](true, false)
  • position[symbol](:right, :left)
  • type[symbol](:dropup, :dropdown)<default: :dropdown>
  • tag[symbol](:a, :button)<default: :button>
  • popover[string/hash](use component popover method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • action[string](use component stimulus-options method)
  • target[string](use component stimulus-options method)

Examples

Some examples explain how to use the options present in the component.

Split dropdown

Split Dropdown has several block type:

  • Link
  • Divider
  • Header
  • Html

The status option for agument the following symbols :

  • :primary
  • :secondary
  • :success
  • :danger
  • :warning
  • :info
  • :light
  • :dark
  • :link
ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link
ui_split_dropdown "Primary", status: :primary do |bd|
  bd.link "Action", url: "#action"
  bd.link url: "#another-action" do
    "Another action"
  end
  bd.divider
  bd.header "Header"
  bd.html "      Normal Text"
  bd.link "Separate link", url: "#separate-link"
  bd.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Separate link"
  end
end

ui_split_dropdown "Secondary", status: :secondary do |bd|
  bd.link "Action", url: "#action"
  bd.link url: "#another-action" do
    "Another action"
  end
  bd.divider
  bd.header "Header"
  bd.html "      Normal Text"
  bd.link "Separate link", url: "#separate-link"
  bd.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Separate link"
  end
end

ui_split_dropdown "Success", status: :success do |bd|
  bd.link "Action", url: "#action"
  bd.link url: "#another-action" do
    "Another action"
  end
  bd.divider
  bd.header "Header"
  bd.html "      Normal Text"
  bd.link "Separate link", url: "#separate-link"
  bd.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Separate link"
  end
end

ui_split_dropdown "Danger", status: :danger do |bd|
  bd.link "Action", url: "#action"
  bd.link url: "#another-action" do
    "Another action"
  end
  bd.divider
  bd.header "Header"
  bd.html "      Normal Text"
  bd.link "Separate link", url: "#separate-link"
  bd.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Separate link"
  end
end

ui_split_dropdown "Warning", status: :warning do |bd|
  bd.link "Action", url: "#action"
  bd.link url: "#another-action" do
    "Another action"
  end
  bd.divider
  bd.header "Header"
  bd.html "      Normal Text"
  bd.link "Separate link", url: "#separate-link"
  bd.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Separate link"
  end
end

ui_split_dropdown "Info", status: :info do |bd|
  bd.link "Action", url: "#action"
  bd.link url: "#another-action" do
    "Another action"
  end
  bd.divider
  bd.header "Header"
  bd.html "      Normal Text"
  bd.link "Separate link", url: "#separate-link"
  bd.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Separate link"
  end
end

ui_split_dropdown "Light", status: :light do |bd|
  bd.link "Action", url: "#action"
  bd.link url: "#another-action" do
    "Another action"
  end
  bd.divider
  bd.header "Header"
  bd.html "      Normal Text"
  bd.link "Separate link", url: "#separate-link"
  bd.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Separate link"
  end
end

ui_split_dropdown "Dark", status: :dark do |bd|
  bd.link "Action", url: "#action"
  bd.link url: "#another-action" do
    "Another action"
  end
  bd.divider
  bd.header "Header"
  bd.html "      Normal Text"
  bd.link "Separate link", url: "#separate-link"
  bd.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Separate link"
  end
end


<div class="btn-group dropdown">
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" arial-labelledby="dropdown-168070325483302158190560373773057452001">
    <a class="dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Normal Text
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropdown">
  <button class="btn btn-secondary">Primary</button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" arial-labelledby="dropdown-168070325483302158190560373773057452001">
    <a class="dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Normal Text
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropdown">
  <button class="btn btn-success">Primary</button>
  <button class="btn btn-success dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" arial-labelledby="dropdown-168070325483302158190560373773057452001">
    <a class="dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Normal Text
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropdown">
  <button class="btn btn-danger">Primary</button>
  <button class="btn btn-danger dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" arial-labelledby="dropdown-168070325483302158190560373773057452001">
    <a class="dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Normal Text
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropdown">
  <button class="btn btn-warning">Primary</button>
  <button class="btn btn-warning dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" arial-labelledby="dropdown-168070325483302158190560373773057452001">
    <a class="dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Normal Text
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropdown">
  <button class="btn btn-info">Primary</button>
  <button class="btn btn-info dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" arial-labelledby="dropdown-168070325483302158190560373773057452001">
    <a class="dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Normal Text
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropdown">
  <button class="btn btn-light">Primary</button>
  <button class="btn btn-light dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" arial-labelledby="dropdown-168070325483302158190560373773057452001">
    <a class="dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Normal Text
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropdown">
  <button class="btn btn-dark">Primary</button>
  <button class="btn btn-dark dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" arial-labelledby="dropdown-168070325483302158190560373773057452001">
    <a class="dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Normal Text
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>

Outline

ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link
ui_split_dropdown "Primary", status: :primary, outline: true  do |bd|
  bd.link "Action", url: "#action"
  bd.link url: "#another-action" do
    "Another action"
  end
  bd.divider
  bd.header "Header"
  bd.html "      Normal Text"
  bd.link "Separate link", url: "#separate-link"
  bd.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Separate link"
  end
end

ui_split_dropdown "Secondary", status: :secondary, outline: true  do |bd|
  bd.link "Action", url: "#action"
  bd.link url: "#another-action" do
    "Another action"
  end
  bd.divider
  bd.header "Header"
  bd.html "      Normal Text"
  bd.link "Separate link", url: "#separate-link"
  bd.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Separate link"
  end
end

ui_split_dropdown "Success", status: :success, outline: true  do |bd|
  bd.link "Action", url: "#action"
  bd.link url: "#another-action" do
    "Another action"
  end
  bd.divider
  bd.header "Header"
  bd.html "      Normal Text"
  bd.link "Separate link", url: "#separate-link"
  bd.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Separate link"
  end
end

ui_split_dropdown "Danger", status: :danger, outline: true  do |bd|
  bd.link "Action", url: "#action"
  bd.link url: "#another-action" do
    "Another action"
  end
  bd.divider
  bd.header "Header"
  bd.html "      Normal Text"
  bd.link "Separate link", url: "#separate-link"
  bd.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Separate link"
  end
end

ui_split_dropdown "Warning", status: :warning, outline: true  do |bd|
  bd.link "Action", url: "#action"
  bd.link url: "#another-action" do
    "Another action"
  end
  bd.divider
  bd.header "Header"
  bd.html "      Normal Text"
  bd.link "Separate link", url: "#separate-link"
  bd.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Separate link"
  end
end

ui_split_dropdown "Info", status: :info, outline: true  do |bd|
  bd.link "Action", url: "#action"
  bd.link url: "#another-action" do
    "Another action"
  end
  bd.divider
  bd.header "Header"
  bd.html "      Normal Text"
  bd.link "Separate link", url: "#separate-link"
  bd.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Separate link"
  end
end

ui_split_dropdown "Light", status: :light, outline: true  do |bd|
  bd.link "Action", url: "#action"
  bd.link url: "#another-action" do
    "Another action"
  end
  bd.divider
  bd.header "Header"
  bd.html "      Normal Text"
  bd.link "Separate link", url: "#separate-link"
  bd.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Separate link"
  end
end

ui_split_dropdown "Dark", status: :dark, outline: true  do |bd|
  bd.link "Action", url: "#action"
  bd.link url: "#another-action" do
    "Another action"
  end
  bd.divider
  bd.header "Header"
  bd.html "      Normal Text"
  bd.link "Separate link", url: "#separate-link"
  bd.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Separate link"
  end
end


<div class="btn-group dropdown">
  <button class="btn btn-outline-primary">Primary</button>
  <button class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" arial-labelledby="dropdown-168070325483302158190560373773057452001">
    <a class="dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Normal Text
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropdown">
  <button class="btn btn-outline-secondary">Primary</button>
  <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" arial-labelledby="dropdown-168070325483302158190560373773057452001">
    <a class="dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Normal Text
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropdown">
  <button class="btn btn-outline-success">Primary</button>
  <button class="btn btn-outline-success dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" arial-labelledby="dropdown-168070325483302158190560373773057452001">
    <a class="dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Normal Text
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropdown">
  <button class="btn btn-outline-danger">Primary</button>
  <button class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" arial-labelledby="dropdown-168070325483302158190560373773057452001">
    <a class="dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Normal Text
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropdown">
  <button class="btn btn-outline-warning">Primary</button>
  <button class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" arial-labelledby="dropdown-168070325483302158190560373773057452001">
    <a class="dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Normal Text
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropdown">
  <button class="btn btn-outline-info">Primary</button>
  <button class="btn btn-outline-info dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" arial-labelledby="dropdown-168070325483302158190560373773057452001">
    <a class="dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Normal Text
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropdown">
  <button class="btn btn-outline-light">Primary</button>
  <button class="btn btn-outline-light dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" arial-labelledby="dropdown-168070325483302158190560373773057452001">
    <a class="dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Normal Text
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropdown">
  <button class="btn btn-outline-dark">Primary</button>
  <button class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" arial-labelledby="dropdown-168070325483302158190560373773057452001">
    <a class="dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Normal Text
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>

Size

The size option has following symbols for argument:
  • :lg
  • :md
  • :sm
Action 1Action 2Action 3
Action 1Action 2Action 3
Action 1Action 2Action 3
ui_split_dropdown "Dropdown Lg", size: :lg do |d|
  d.link "Action 1", url: "#action-1"
  d.link "Action 2", url: "#action-2", state: :disabled
  d.link "Action 3", url: "#action-3"
end
ui_split_dropdown "Dropdown Md", size: :md do |d|
  d.link "Action 1", url: "#action-1"
  d.link "Action 2", url: "#action-2", state: :disabled
  d.link "Action 3", url: "#action-3"
end
ui_split_dropdown "Dropdown Sm", size: :sm do |d|
  d.link "Action 1", url: "#action-1"
  d.link "Action 2", url: "#action-2", state: :disabled
  d.link "Action 3", url: "#action-3"
end

<div class="dropdown btn-group">
  <button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Lg <span class="caret"></span>
  </button>
  <div class="dropdown-menu dropdown-menu-left">
    <a class="dropdown-item" href="#action-1">Action 1</a>
    <a class="disabled dropdown-item" href="#action-2">Action 2</a>
    <a class="dropdown-item" href="#action-3">Action 3</a>
  </div>
</div>

<div class="dropdown btn-group">
  <button class="btn btn-primary btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Md <span class="caret"></span></button>
  <div class="dropdown-menu dropdown-menu-left">
    <a class="dropdown-item" href="#action-1">Action 1</a>
    <a class="disabled dropdown-item" href="#action-2">Action 2</a>
    <a class="dropdown-item" href="#action-3">Action 3</a>
  </div>
</div>

<div class="dropdown btn-group">
  <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Sm <span class="caret"></span></button>
  <div class="dropdown-menu dropdown-menu-left">
    <a class="dropdown-item" href="#action-1">Action 1</a>
    <a class="disabled dropdown-item" href="#action-2">Action 2</a>
    <a class="dropdown-item" href="#action-3">Action 3</a>
  </div>
</div>

Buttonsplit dropdown options

Confirm actionAnother action
Separate link
ActionAnother action
Separate link
ui_split_dropdown "Dropdown right", glyph: "gem", status: :success, size: :lg, position: :right do |bd|
  bd.link "Confirm action", url: "#action", link_html_options: { data: { confirm: "Are you sure?" }}, method: :delete
  bd.link "Another action", url: "#another-action"
  bd.divider
  bd.header "Header"
  bd.link "Separate link", url: "#separate-link"
end
 
ui_split_dropdown "Dropup", status: :danger, size: :sm, type: :dropup do |bd|
  bd.link "Action",  { url: "#action" }, { class: "action" }
  bd.link "Another action", url: "#another-action"
  bd.divider
  bd.header "Header"
  bd.link "Separate link", url: "#separate-link"
end

<div class="btn-group dropdown" role="group">
  <button class="btn btn-success btn-lg">Dropdown right</button>
  <button class="btn btn-success btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" data-confirm="Are you sure?" href="#action">Confirm action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>
  
<div class="btn-group dropup" role="group">
  <button class="btn btn-danger btn-sm">Dropup</button>
  <button class="btn btn-danger btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu dropdown-menu-left">
    <a class="action dropdown-item" href="#action">Action</a>
    <a class="dropdown-item" href="#another-action">Another action</a>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header" role="presentation">Header</h6>
    <a class="dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>

Contents