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. Split dropdown component inherit of Dropdown component.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:

content[value/block]
html_options[hash]<default: {}>
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:

action[string](use component stimulus-options method)
alignment[symbol/hash](:right, :left, :start, :end)<default: :start>
cache[string](use to cache your component)
controller[string](use component stimulus-options method)
glyph[string/hash](use component glyph method)
inline[boolean](true, false)
outline[boolean](true, false)
popover[string/hash](use component popover method)
position[symbol](:up, :down, :left, :right, :end, :start)<default: :down>
size[symbol](:lg, :md, :sm)(use component size method)
state[symbol](:disabled, :active)(use component state method)
status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
tag[symbol](:a, :button)<default: :button>
target[string](use component stimulus-options method)
tooltip[string/hash](use component tooltip method)
turbo[string](use component turbo method)

Examples

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

ui_split_dropdown 'Split Dropdown' do |d|
  d.link "Action 1", url: '#action'
  d.link url: '#another-action' do
    "Action 2"
  end
  d.link({ url: '#separate-link'}, { class: 'my-link'}) do
    "Action 3"
  end
end

<div class="open-dropdown-example btn-group dropdown">
  <button class="btn btn-secondary">Split Dropdown</button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu show" arial-labelledby="dropdown-35018">
    <a class="dropdown-item" href="#action">Action 1</a>
    <a class="dropdown-item" href="#another-action">Action 2</a>
    <a class="my-link dropdown-item" href="#separate-link">Action 3</a>
  </div>
</div>

Split Dropdown options

Ruby
Html

ui_split_dropdown("Split Dropdown", { status: :secondary, glyph: "gem" }, { class: "my-dropdown"}) do |d|
  d.link "Confirm action", url: "#action", link_html_options: { data: { confirm: "Are you sure?" }}, method: :delete
  d.link url: "#another-action", glyph: "gem" do
    "Action 2"
  end
  d.link({ url: "#separate-link"}, { class: "my-link"}) do
    "Action 3"
  end
end

<div class="open-dropdown-example btn-group dropdown">
  <button class="btn btn-secondary"><i class="glyph fas fa-gem"></i>  Split Dropdown</button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu show" arial-labelledby="dropdown-71880">
    <a class="dropdown-item" data-confirm="Are you sure?" href="#action">Confirm action</a>
    <a class="dropdown-item" href="#another-action"><i class="glyph fas fa-gem"></i>  Action 2</a>
    <a class="my-link dropdown-item" href="#separate-link">Action 3</a>
  </div>
</div

Alignment

You can replace :left by :start and :right by :end. Both are interchangeable.

Ruby
Html

ui_split_dropdown "Dropdown with right alignment menu", alignment: :end do |d|
  d.link "Action 1", url: "#action-1"
  d.link "Action 2", url: "#action-2"
  d.link "Action 3", url: "#action-3"
end

ui_split_dropdown "Dropdown with right alignment menu", alignment: { size: :lg, direction: :end } do |d|
  d.link "Action 1", url: '#action-1'
  d.link "Action 2", url: '#action-2'
  d.link "Action 3", url: '#action-3'
end

<div class="btn-group dropdown dropdown-menu-end show">
  <button class="btn btn-secondary">Dropdown with right alignment menu</button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu dropdown-menu-end show" arial-labelledby="dropdown-75154">
    <a class="dropdown-item" href="#action-1">Action 1</a>
    <a class="dropdown-item" href="#action-2">Action 2</a>
    <a class="dropdown-item" href="#action-3">Action 3</a>
  </div>
</div>

<div class="btn-group dropdown dropdown-menu-lg-end show">
  <button class="btn btn-secondary">Dropdown with right alignment menu</button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu dropdown-menu-lg-end show" arial-labelledby="dropdown-5713">
    <a class="dropdown-item" href="#action-1">Action 1</a>
    <a class="dropdown-item" href="#action-2">Action 2</a>
    <a class="dropdown-item" href="#action-3">Action 3</a>
  </div>
</div>

Header

Ruby
Html

ui_split_dropdown "Split Dropdown" do |d|
  d.header "Header 1"
  d.link "Action 1", url: "#action-1"
  d.header class: "my-header" do
    "Header 2"
  end
  d.link "Action 2", url: "#action-2"
  d.link "Action 3", url: "#action-3"
end

<div class="open-dropdown-example btn-group dropdown">
  <button class="btn btn-secondary">Split Dropdown</button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu show" arial-labelledby="dropdown-81289">
    <h6 class="dropdown-header" role="presentation">
      Header 1
    </h6>
    <a class="dropdown-item" href="#action-1">Action 1</a>
    <h6 class="my-header dropdown-header" role="presentation">
      Header 2
    </h6>
    <a class="dropdown-item" href="#action-2">Action 2</a>
    <a class="dropdown-item" href="#action-3">Action 3</a>
  </div>
</div>

Divider

Ruby
Html

ui_split_dropdown "Split Dropdown" do |d|
  d.link "Action 1", url: "#action-1"
  d.divider
  d.link "Separate action 1", url: "#separate-action-1"
  d.link "Separate action 2", url: "#separate-action-2"
end

<div class="open-dropdown-example btn-group dropdown">
  <button class="btn btn-secondary">Split Dropdown</button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu show" arial-labelledby="dropdown-81289">
    <h6 class="dropdown-header" role="presentation">
      Header 1
    </h6>
    <a class="dropdown-item" href="#action-1">Action 1</a>
    <h6 class="my-header dropdown-header" role="presentation">
      Header 2
      <div class="open-dropdown-example btn-group dropdown">
        <button class="btn btn-secondary">Split Dropdown</button>
        <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
        <div class="dropdown-menu show" arial-labelledby="dropdown-69587">
          <a class="dropdown-item" href="#action-1">Action 1</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#separate-action-1">Separate action 1</a>
          <a class="dropdown-item" href="#separate-action-2">Separate action 2</a>
        </div>
      </div>
    </h6>
    <a class="dropdown-item" href="#action-2">Action 2</a>
    <a class="dropdown-item" href="#action-3">Action 3</a>
  </div>
</div>

Html

Ruby
Html

ui_split_dropdown "Form in Split Dropdown" do |d|
  - d.html do
    <form class="px-4 py-3">
      <div class="mb-3">
        <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
      </div>
      <div class="mb-3">
        <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
      </div>
      <div class="mb-3">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="dropdownCheck">
          <label class="form-check-label" for="dropdownCheck">
            Remember me
          </label>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Sign in</button>
    </form>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">New around here? Sign up</a>
    <a class="dropdown-item" href="#">Forgot password?</a>
  end
end

<div class="btn-group dropdown">
  <button class="btn btn-secondary">Form in Split Dropdown</button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu show" arial-labelledby="dropdown-74806">
    <form class="px-4 py-3">
      <div class="mb-3">
        <label class="form-label" for="exampleDropdownFormEmail1">Email address</label>
        <input class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com" type="email">
      </div>
      <div class="mb-3">
        <label class="form-label" for="exampleDropdownFormPassword1">Password</label>
        <input class="form-control" id="exampleDropdownFormPassword1" placeholder="Password" type="password">
      </div>
      <div class="mb-3">
        <div class="form-check">
          <input class="form-check-input" id="dropdownCheck" type="checkbox">
          <label class="form-check-label" for="dropdownCheck">Remember me</label>
        </div>
      </div>
      <button class="btn btn-primary" type="submit">Sign in</button>
    </form>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">New around here? Sign up</a>
    <a class="dropdown-item" href="#">Forgot password?</a>
  </div>
</div>

Inline

Ruby
Html

ui_split_dropdown "Inline 1" 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 "Inline 2" 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="btn-group dropdown">
  <button class="btn btn-secondary">Inline 1</button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-76837" style="">
    <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>

Disabled

Ruby
Html

ui_split_dropdown "Split Dropdown" 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="open-dropdown-example btn-group dropdown">
  <button class="btn btn-secondary">Split Dropdown</button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu show" arial-labelledby="dropdown-8820">
    <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>

Active

Ruby
Html

ui_split_dropdown "Split Dropdown" do |d|
  d.link "Action 1", url: "#action-1"
  d.link "Action 2", url: "#action-2", state: :active
  d.link "Action 3", url: "#action-3"
end

<div class="open-dropdown-example btn-group dropdown">
  <button class="btn btn-secondary">Split Dropdown</button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu show" arial-labelledby="dropdown-93886">
    <a class="dropdown-item" href="#action-1">Action 1</a>
    <a class="active dropdown-item" href="#action-2">Action 2</a>
    <a class="dropdown-item" href="#action-3">Action 3</a>
  </div>
</div>

Open

Ruby
Html

ui_split_dropdown "Split Dropdown", open: true 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="open-dropdown-example btn-group dropdown">
  <button class="btn btn-secondary">Split Dropdown</button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu show" arial-labelledby="dropdown-57010">
    <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>

Statuses

The status option for agument the following symbols :

:primary
:secondary
:success
:danger
:warning
:info
:light
:dark
:link

Ruby
Html

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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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

Ruby
Html

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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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:

Ruby
Html

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-bs-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-bs-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-bs-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>

Position

You can replace :left by :start and :right by :end. Both are interchangeable.

Ruby
Html

ui_split_dropdown "Right", position: :right, inline: true do |bd|
  bd.link "Action", url: "#action", glyph: "gem"
  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 "Up", position: :up, inline: true do |bd|
  bd.link "Action", url: "#action", glyph: "gem"
  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 "Down", position: :down, inline: true do |bd|
  bd.link "Action", url: "#action", glyph: "gem"
  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 "Left", position: :left, inline: true do |bd|
  bd.link "Action", url: "#action", glyph: "gem"
  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 dropright">
  <button class="btn btn-secondary">Split Dropright </button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-42719">
    <a class="dropdown-item" href="#action"><i class="glyph fas fa-gem"></i>  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="my-link dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropup">
  <button class="btn btn-secondary">Split Dropup </button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-42719">
    <a class="dropdown-item" href="#action"><i class="glyph fas fa-gem"></i>  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="my-link dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropdown">
  <button class="btn btn-secondary">Split Dropdown </button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-42719">
    <a class="dropdown-item" href="#action"><i class="glyph fas fa-gem"></i>  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="my-link dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>


<div class="btn-group dropleft">
  <button class="btn btn-secondary">Split Dropleft </button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-42719">
    <a class="dropdown-item" href="#action"><i class="glyph fas fa-gem"></i>  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="my-link dropdown-item" href="#separate-link">Separate link</a>
  </div>
</div>

Theme

Ruby
Html

ui_split_dropdown "Dark split dropdown", theme: :dark, open: true, class: 'open-dropdown-example' do |d|
  d.link "Action 1", url: '#action-1'
  d.link "Action 2", url: '#action-2', state: :active
  d.link "Action 3", url: '#action-3'
end

<div class="open-dropdown-example btn-group dropdown show">
  <button class="btn btn-secondary">Dark split dropdown</button>
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
  <div class="dropdown-menu dropdown-menu-dark show" arial-labelledby="dropdown-23936">
    <a class="dropdown-item" href="#action-1">Action 1</a>
    <a class="active dropdown-item" href="#action-2">Action 2</a>
    <a class="dropdown-item" href="#action-3">Action 3</a>
  </div>
</div>