edge-components

Dropdown: Compact 

A normal text and a helper dropdown
<div class="dropdown dropdown-end"> <label tabindex="0" class="btn btn-ghost btn-circle btn-xs text-info"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg></label>
    <div class="card card-compact dropdown-content shadow bg-base-100 rounded-box w-64">

        <div class="card-body">
            <h3 class="card-title">Card title</h3>
            <p>you can use any element as a dropdown.</p>
        </div>

    </div>
</div>
 
A normal text and a helper dropdown

@jrmc.dropdown({ class: 'dropdown-end' })
  @slot('button')
    @jrmc.button.label({ class: 'btn-ghost btn-circle btn-xs text-info' })
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    @end
  @end
  @jrmc.card({ class: 'card-compact dropdown-content shadow bg-base-100 rounded-box w-64' })
    @jrmc.card.body()
      @!jrmc.card.title({ as: 'h3', text: 'Card title' })
      <p>you can use any element as a dropdown.</p>
    @end
  @end
@end

Dropdown

Doc : daisyui dropdown

Dropdown can open a menu or any other element when the button is clicked.

Class name Type
dropdown Component Container element
dropdown-content Component Container for content
dropdown-end Modifier Aligns to end
dropdown-top Modifier Open from top
dropdown-left Modifier Open from left
dropdown-right Modifier Open from right
dropdown-hover Modifier Opens on hover too
dropdown-open Modifier Force open