# Dropdowns

# Demo

Demo

# Usage

<Dropdown>
  <template #content>
    <div class="dropdown-menu">
      <a href="#no-link">Dropdown Action</a>
      <a href="#no-link">Link</a>
      <hr />
      <h6 class="uppercase">Header</h6>
      <a href="#no-link">Something Else</a>
    </div>
  </template>
  <Button class="uppercase">
    Dropdown
    <span
      class="ltr:ml-3 rtl:mr-3 la la-caret-down text-xl leading-none"
    ></span>
  </Button>
</Dropdown>

or

<div class="btn-group">
  <Button class="uppercase">Split Dropdown</Button>
  <Dropdown>
    <template #content>
      <div class="dropdown-menu">
        <a href="#no-link">Dropdown Action</a>
        <a href="#no-link">Link</a>
        <hr />
        <h6 class="uppercase">Header</h6>
        <a href="#no-link">Something Else</a>
      </div>
    </template>
    <Button class="uppercase ltr:pl-4 rtl:pr-4">
      <span class="la la-caret-down text-xl leading-none"></span>
    </Button>
  </Dropdown>
</div>

# Slots

Name Description
content Content for dropdown