Dropdown(ui_dropdown)Bootstrap Logo

UiBibz::Ui::Core::Forms::Dropdowns::Dropdown

Toggleable, contextual menu for displaying lists of links.

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_dropdown name, options, html_options do |d|
  # by variable
  d.link content, options, html_options
  # or by block
  d.link options, html_options do
    content
  end

  d.divider

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

  # by variable
  d.html content
  # or by 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)
  • caret[boolean](true, false)Remove caret
  • controller[string](use component stimulus-options method)
  • glyph[string/hash](use component glyph method)
  • inline[boolean](true, false)
  • open[boolean]
  • 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)
  • theme[symbol]
  • 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.

Dropdown

Items

The allowed items for this component are:
  • divider
  • header(inherit of component)
  • html(inherit of component)
  • html[html/string]Insert html as a component
  • link(inherit of link)
Action 1Action 2 Action 3 
ui_dropdown "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="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></button>
  <div class="dropdown-menu">
    <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>

Dropdown options

Confirm action Action 2 Action 3 
ui_dropdown("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="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="glyph fa fa-gem"></i> Dropdown <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <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 class="my-link dropdown-item" href="#separate-link">Action 3</a>
  </div>
</div>

Tag

Replace <button> by <a> tag.

Action 1Action 2Action 3
ui_dropdown "Dropdown link", tag: :a 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="dropdown">
  <a class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown with right menu <span class="caret"></span></a>
  <div class="dropdown-menu dropdown-menu-right">
    <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>

Alignment

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

Action 1Action 2Action 3
Action 1Action 2Action 3
ui_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_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="open-dropdown-example dropdown show btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-10449">Dropdown with right alignment menu</button>
  <div class="dropdown-menu dropdown-menu-end show" arial-labelledby="dropdown-10449">
    <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="open-dropdown-example dropdown show btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-43325">Dropdown with right alignment menu</button>
  <div class="dropdown-menu dropdown-menu-lg-end show" arial-labelledby="dropdown-43325">
    <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

Action 1Action 2Action 3




ui_dropdown "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 dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></button>
  <div class="dropdown-menu">
    <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

Action 1
Separate action 1Separate action 2


ui_dropdown "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 dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></button>
  <div class="dropdown-menu">
    <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>

Html

New around here? Sign up Forgot password? 


ui_dropdown "Form in 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="open-dropdown-example dropdown show">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-21758">Form in Dropdown</button>
  <div class="dropdown-menu show" arial-labelledby="dropdown-21758">
    <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

Action 1Action 2Action 3
Action 1Action 2Action 3
ui_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_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="card-header">
<div class="dropdown btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-45190075074587396113525735017455033692">Inline 1 <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-45190075074587396113525735017455033692">
    <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 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-190866694514187334502439692726974162800">Inline 2 <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-190866694514187334502439692726974162800">
    <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

Action 1Action 2Action 3
ui_dropdown "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 dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></button>
  <div class="dropdown-menu">
    <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

Action 1Action 2Action 3
ui_dropdown "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 dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></button>
  <div class="dropdown-menu">
    <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

Action 1Action 2Action 3
ui_dropdown "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 dropdown show">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-94287437770994765671303713555990454778">Dropdown <span class="caret"></span></button>
  <div class="dropdown-menu show" arial-labelledby="dropdown-94287437770994765671303713555990454778">
    <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>

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_dropdown "Dropdown Lg", size: :lg, inline: 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
ui_dropdown "Dropdown Md", size: :md, inline: 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
ui_dropdown "Dropdown Sm", size: :sm, inline: 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="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">
    <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">
    <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">
    <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

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_dropdown "Primary", status: :primary, 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_dropdown "Secondary", status: :secondary, 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_dropdown "Success", status: :success, 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_dropdown "Danger", status: :danger, 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_dropdown "Warning", status: :warning, 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_dropdown "Info", status: :info, 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_dropdown "Light", status: :light, 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_dropdown "Dark", status: :dark, 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="dropdown btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Primary <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropdown btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Primary <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropdown btn-group">
  <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Primary <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropdown btn-group">
  <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Primary <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropdown btn-group">
  <button class="btn btn-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Primary <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropdown btn-group">
  <button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Primary <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropdown btn-group">
  <button class="btn btn-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Primary <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropdown btn-group">
  <button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Primary <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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>

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_dropdown "Primary", outline: true, status: :primary, 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_dropdown "Secondary", outline: true, status: :secondary, 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_dropdown "Success", outline: true, status: :success, 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_dropdown "Danger", outline: true, status: :danger, 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_dropdown "Warning", outline: true, status: :warning, 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_dropdown "Info", outline: true, status: :info, 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_dropdown "Light", outline: true, status: :light, 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_dropdown "Dark", outline: true, status: :dark, 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="dropdown btn-group">
  <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Primary <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropdown btn-group">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Primary <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropdown btn-group">
  <button class="btn btn-outline-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Primary <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropdown btn-group">
  <button class="btn btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Primary <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropdown btn-group">
  <button class="btn btn-outline-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Primary <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropdown btn-group">
  <button class="btn btn-outline-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Primary <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropdown btn-group">
  <button class="btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Primary <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropdown btn-group">
  <button class="btn btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Primary <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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>

Position

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

ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link
ActionAnother action
     Normal TextSeparate link 
ui_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_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_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_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_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="dropright btn-group">
  <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Dropright <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropup btn-group">
  <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Dropup <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropdown btn-group">
  <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Dropdown <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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="dropleft btn-group">
  <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-248578436189652527536962324584326088393">Dropleft <span class="caret"></span></button>
  <div class="dropdown-menu" arial-labelledby="dropdown-248578436189652527536962324584326088393">
    <a class="dropdown-item" href="#action">
      <i class="glyph fa 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

Action 1Action 2Action 3
ui_dropdown "Dark 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 dropdown show">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-18744">Dark dropdown</button>
  <div class="dropdown-menu dropdown-menu-dark show" arial-labelledby="dropdown-18744">
    <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>