TrestleAdmin/trestle

<%= container do |c| %>
  <% c.sidebar class: "order-first" do %>
    <h2>Dropdowns</h2>
    <p>Wrap the dropdown’s toggle (your button or link) and the dropdown menu within <code>.dropdown</code>.</p>
  <% end %>

  <div class="mb-2">
    <span class="dropdown">
      <%= button_tag "Dropdown", class: "btn btn-primary dropdown-toggle", data: { toggle: "dropdown" } %>

      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </span>

    <span class="dropdown">
      <%= button_tag "Right-aligned menu", class: "btn btn-primary dropdown-toggle", data: { toggle: "dropdown" } %>

      <div class="dropdown-menu dropdown-menu-right">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </span>
  </div>

  <div>
    <span class="dropdown">
      <%= button_tag "Menu headers & dividers", class: "btn btn-secondary dropdown-toggle", data: { toggle: "dropdown" } %>

      <div class="dropdown-menu">
        <h6 class="dropdown-header">Dropdown header</h6>
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </span>
  </div>
<% end %>