Lineone - Dropdown Component

Dropdown

Components
Dropdown

Basic Dropdown

Code

Dropdowns are lightweight context menus for housing navigation and actions. Check out code for detail of usage.

Separated Link

Separated Link

Separated Link

Separated Link

                
  <!-- First -->
  <div
    x-data="usePopper({placement:'bottom-start',offset:4})"
    @click.outside="isShowPopper && (isShowPopper = false)"
    class="inline-flex"
  >
    <button
      class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
    >
      <span>Dropdown</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-4 transition-transform duration-200"
        :class="isShowPopper && 'rotate-180'"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div
        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
      >
        <ul>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Another Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
        </ul>
        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
        <ul>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Separated Link</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Second -->
  <div
    x-data="usePopper({placement:'bottom-start',offset:4})"
    @click.outside="isShowPopper && (isShowPopper = false)"
    class="inline-flex"
  >
    <button
      class="btn space-x-2 rounded-full bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
    >
      <span>Dropdown</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-4 transition-transform duration-200"
        :class="isShowPopper && 'rotate-180'"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div
        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
      >
        <ul>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Another Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
        </ul>
        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
        <ul>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Separated Link</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Third -->
  <div
    x-data="usePopper({placement:'bottom-end',offset:4})"
    @click.outside="isShowPopper && (isShowPopper = false)"
    class="inline-flex"
  >
    <button
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
      class="btn size-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
        />
      </svg>
    </button>

    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div
        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
      >
        <ul>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Another Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
        </ul>
        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
        <ul>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Separated Link</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Fourth -->
  <div
    x-data="usePopper({placement:'bottom-end',offset:4})"
    @click.outside="isShowPopper && (isShowPopper = false)"
    class="inline-flex"
  >
    <button
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
      class="btn size-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
        ></path>
      </svg>
    </button>

    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div
        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
      >
        <ul>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Another Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
        </ul>
        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
        <ul>
          <li>
            <a
              href="#"
              class="flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Separated Link</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>

Primary Actions

Code

Dropdowns are lightweight context menus for housing navigation and actions. Check out code for detail of usage.

Separated Link

                
  <div
    x-data="usePopper({placement:'bottom-start',offset:4})"
    @click.outside="isShowPopper && (isShowPopper = false)"
    class="inline-flex"
  >
    <button
      class="btn space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
    >
      <span>Dropdown</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-4 transition-transform duration-200"
        :class="isShowPopper && 'rotate-180'"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div
        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
      >
        <ul>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
              >Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
              >Another Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
              >Something Else</a
            >
          </li>
        </ul>
        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
        <ul>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
              >Separated Link</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>

Dropdown Icons

Code

Dropdowns are lightweight context menus for housing navigation and actions. Check out code for detail of usage.

                
  <div
    x-data="usePopper({placement:'bottom-start',offset:4})"
    @click.outside="isShowPopper && (isShowPopper = false)"
    class="inline-flex"
  >
    <button
      class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
    >
      <span>Dropdown</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-4 transition-transform duration-200"
        :class="isShowPopper && 'rotate-180'"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div
        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
      >
        <ul>
          <li>
            <a
              href="#"
              class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="mt-px size-4.5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="1.5"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                />
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                />
              </svg>
              <span> View</span></a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4.5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="1.5"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
                />
              </svg>
              <span> Edit</span></a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4.5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="1.5"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                />
              </svg>
              <span> Update</span></a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4.5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="1.5"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                />
              </svg>
              <span> Delete item</span></a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>

Scrolled Dropdown

Code

Dropdowns are lightweight context menus for housing navigation and actions. Check out code for detail of usage.

                
  <div
    x-data="usePopper({placement:'bottom-start',offset:4})"
    @click.outside="isShowPopper && (isShowPopper = false)"
    class="inline-flex"
  >
    <button
      class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
    >
      <span>Dropdown</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-4 transition-transform duration-200"
        :class="isShowPopper && 'rotate-180'"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div
        class="popper-box h-36 overflow-y-auto rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-600 dark:bg-navy-700"
      >
        <ul>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Another Action</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
          <li>
            <a
              href="#"
              class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >Something else</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>

HTML Content

Code

Dropdowns are lightweight context menus for housing navigation and actions. Check out code for detail of usage.

Only Selected People

                
  <div
    x-data="usePopper({placement:'bottom-start',offset:4})"
    @click.outside="isShowPopper && (isShowPopper = false)"
    class="inline-flex"
  >
    <button
      class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
    >
      <span>Dropdown</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-4 transition-transform duration-200"
        :class="isShowPopper && 'rotate-180'"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div
        class="popper-box w-72 rounded-md border border-slate-150 bg-white dark:border-navy-600 dark:bg-navy-700"
      >
        <h3
          class="px-4 py-3 font-medium tracking-wide text-slate-700 dark:text-navy-100"
        >
          Only Selected People
        </h3>
        <label class="relative flex">
          <input
            type="text"
            class="form-input peer w-full border-y border-slate-150 bg-transparent px-4 py-2 pl-9 text-xs+ placeholder:text-slate-400/70 dark:border-navy-600"
            placeholder="Type username..."
          />
          <div
            class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="size-4.5 transition-colors duration-200"
              fill="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                d="M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z"
              ></path>
            </svg>
          </div>
        </label>
        <ul class="my-2">
          <li>
            <a
              href="#"
              class="flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
            >
              <div class="avatar size-10">
                <img
                  class="rounded-full"
                  src="images/avatar/avatar-10.jpg"
                  alt="avatar"
                />
              </div>
              <div>
                <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
                  Simon Tods
                </p>
                <p class="text-xs text-slate-500 dark:text-navy-300">
                  Web Developer
                </p>
              </div>
            </a>
          </li>
          <li>
            <a
              href="#"
              class="flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
            >
              <div class="avatar size-10">
                <div
                  class="is-initial rounded-full border border-success/30 bg-success/10 uppercase text-success"
                >
                  jd
                </div>
              </div>

              <div>
                <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
                  John Doe
                </p>
                <p class="text-xs text-slate-500 dark:text-navy-300">
                  Web Developer
                </p>
              </div>
            </a>
          </li>
          <li>
            <a
              href="#"
              class="flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
            >
              <div class="avatar size-10">
                <div
                  class="is-initial rounded-full bg-warning uppercase text-white"
                >
                  KG
                </div>
              </div>
              <div>
                <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
                  Konnor Guzman
                </p>
                <p class="text-xs text-slate-500 dark:text-navy-300">
                  Frontend Developer
                </p>
              </div>
            </a>
          </li>
          <li>
            <a
              href="#"
              class="flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
            >
              <div class="avatar size-10">
                <img
                  class="rounded-full"
                  src="images/avatar/avatar-12.jpg"
                  alt="avatar"
                />
              </div>
              <div>
                <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
                  Samantha Shelton
                </p>
                <p class="text-xs text-slate-500 dark:text-navy-300">
                  Web Developer
                </p>
              </div>
            </a>
          </li>
          <li>
            <a
              href="#"
              class="flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
            >
              <div class="avatar size-10">
                <img
                  class="rounded-full"
                  src="images/avatar/avatar-19.jpg"
                  alt="avatar"
                />
              </div>
              <div>
                <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
                  Derrick Simmons
                </p>
                <p class="text-xs text-slate-500 dark:text-navy-300">
                  UI/UX Designer
                </p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Dropdown

Basic Dropdown

Primary Actions

Dropdown Icons

Scrolled Dropdown

HTML Content

Only Selected People