Dropdown(ui_dropdown)

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]
  • options[hash]<default: {}>
  • html_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:
  • 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)
  • caret[boolean](true, false)Remove caret
  • 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.

Dropdown

Items

The allowed items for this component are:
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-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 actionAction 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" 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-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">Action 2</a>
    <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-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>

Position

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

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

Action 1Action 2Action 3


ui_dropdown "Dropdown" do |d|
  d.html link_to("Action 1", url: "#action-1", class: "dropdown-item")
  d.html link_to("Action 2", url: "#action-2", class: "dropdown-item")
  d.html link_to("Action 3", url: "#action-3", class: "dropdown-item")
end

<div class="open-dropdown-example dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-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="dropdown-item" href="#action-2">Action 2</a>
    <a class="dropdown-item" href="#action-3">Action 3</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-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-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-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>

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

Contents