Dropdown Component - VueTailwind

VueJs dropdown component with configurable classes and infinite variants. Friendly with utility-first frameworks like TailwindCSS.

Playground:

In this tab you can modify the TailwindCSS classes of the theme we create as example, you can also edit or delete as many variants as you wish. Once you finished you can preview your theme on the demo tab or grab the settings from the settings tab.

Fixed classes

Fixed classes shared by all the variants

button classes

wrapper classes

dropdown wrapper classes

dropdown classes

enter class classes

enter active class classes

enter to class classes

leave class classes

leave active class classes

leave to class classes

Base classes

Classes used by default (when no variant is applied)

button classes

flex items-center text-white block px-4 py-2 transition duration-100 ease-in-out border border-transparent rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed

wrapper classes

inline-flex flex-col

dropdown wrapper classes

relative z-10

dropdown classes

origin-top-left absolute left-0 w-56 rounded shadow mt-1

enter class classes

opacity-0 scale-95

enter active class classes

transition transform ease-out duration-100

enter to class classes

opacity-100 scale-100

leave class classes

opacity-100 scale-100

leave active class classes

transition transform ease-in duration-75

leave to class classes

opacity-0 scale-95

Preview

Variants:

Variant name

Variant classes

Classes used when the danger variant is applied

button classes

wrapper classes

inline-flex flex-col

dropdown wrapper classes

relative z-10

dropdown classes

origin-top-left absolute left-0 w-56 rounded shadow mt-1

enter class classes

opacity-0 scale-95

enter active class classes

transition transform ease-out duration-100

enter to class classes

opacity-100 scale-100

leave class classes

opacity-100 scale-100

leave active class classes

transition transform ease-in duration-75

leave to class classes

opacity-0 scale-95

Preview

Remove variant

Example variants

Default danger

Basic example

<t-dropdown text="Menu">
  <div class="py-1 rounded-md shadow-xs">
    <a
      href="#"
      class="block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
      role="menuitem"
    >
      Your Profile
    </a>
    <a
      href="#"
      class="block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
      role="menuitem"
    >
      Settings
    </a>
    <a
      href="#"
      class="block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
      role="menuitem"
    >
      Sign out
    </a>
  </div>
</t-dropdown>

Props

Property	Type	Default value	Description
text	`String`	`''`	Text inside the dropdown button
disabled	`Boolean`	`undefined`	Disables the dropdown button
tagName	`String`	`'div'`	HTML tag that wraps the whole component
dropdownWrapperTagName	`String`	`'div'`	HTML tag that wraps the dropdown (the one that is hidden/shown)
dropdownTagName	`String`	`'div'`	HTML tag that wraps the dropdown content
toggleOnFocus	`Boolean`	`false`	If set the modal will be toggled when focus/blur
toggleOnClick	`Boolean`	`true`	If set the modal will be toggled when click the button
toggleOnHover	`Boolean`	`false`	If set the modal will be toggled when hover the button
hideOnLeaveTimeout	`Number`	`250`	Timeout to hide the modal after mouseout
show	`Boolean`	`false`	If set will show the dropdown (accepts the `.sync` modifier)
fixedClasses	`Object`	`undefined`	The default CSS Fixed classes shared for all variants
classes	`Object`	`{...}` (see below)	The default CSS classes
variants	`Object`	`undefined`	The different variants of classes the component have
variant	`[String, Object]`	`undefined`	The variant that should be used

Classes and variants format

This component expects an object with classes named after every child element.

The properties in that object are the following:

Property	Description
button	Default button trigger
wrapper	Wrapper of the whole component
dropdownWrapper	Wrapper of the dropdown
dropdown	Wrapper of the dropdown content
enterClass	Vue Custom Transition Class for the dropdown
enterActiveClass	Vue Custom Transition Class for the dropdown
enterToClass	Vue Custom Transition Class for the dropdown
leaveClass	Vue Custom Transition Class for the dropdown
leaveActiveClass	Vue Custom Transition Class for the dropdown
leaveToClass	Vue Custom Transition Class for the dropdown

Default classes

{
  button: 'block px-4 py-2 text-white transition duration-100 ease-in-out bg-blue-500 border border-transparent rounded shadow-sm hover:bg-blue-600 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
  wrapper: 'inline-flex flex-col',
  dropdownWrapper: 'relative z-10',
  dropdown: 'origin-top-left absolute left-0 w-56 rounded shadow bg-white mt-1',
  enterClass: 'opacity-0 scale-95',
  enterActiveClass: 'transition transform ease-out duration-100',
  enterToClass: 'opacity-100 scale-100',
  leaveClass: 'opacity-100 scale-100',
  leaveActiveClass: 'transition transform ease-in duration-75',
  leaveToClass: 'opacity-0 scale-95',
}

Scoped slots

Slot	Description
default	The dropdown contents goes there
trigger	If used will replace the button trigger
button	If used will replace the button content

Default slot

Everything inside the default slot will be inside the dropdown, this slot contains the following data:

Slot	type	Description
hide	`Function`	If called it will hide the dropdown
hideIfFocusOutside	`Function`	If called from a focus event (for example in a button inside the dropdown) will hide the dropdown if the focus is outside the component
show	`Function`	If called it will show the dropdown
toggle	`Function`	If called it will toggle the dropdown
blurHandler	`Function`	Intended to be used in any "blureable" element inside the dropdown for better UX

Example:

Consider a dropdown that is used as a menu of items:

<t-dropdown text="Click me">
  <div slot-scope="{ hide, blurHandler }">
    <button
      class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
      role="menuitem"
      @blur="blurHandler"
    >
      Your Profile
    </button>
    <button
      class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
      role="menuitem"
      @blur="blurHandler"
    >
      Settings
    </button>

    <button
      class="block w-full px-4 py-2 text-sm leading-5 text-red-500 transition duration-150 ease-in-out border-t hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
      @click="hide"
    >
      Close me
    </button>
  </div>
</t-dropdown>

Is a general recomendation to add the `blurHandler` to any button or blureable element inside the dropdown, that handler ensures to hide the dropdown according to your settings, for example when the user clicks outside.

The example below will be look like this:

Trigger slot

Will replace the current dropdown button, useful for any custom handler.

Slot	type	Description
isShown	`Boolean`	If the dropdown is shown
hide	`Function`	If called it will hide the dropdown
hideIfFocusOutside	`Function`	If called from a focus event (for example in a button inside the dropdown) will hide the dropdown if the focus is outside the component
show	`Function`	If called it will show the dropdown
toggle	`Function`	If called it will toggle the dropdown
blurHandler	`Function`	Intended to be used in any "blureable" element that is used a the dropdown trigger
mousedownHandler	`Function`	Intended to be used in any "blureable" element that is used a the dropdown trigger
focusHandler	`Function`	Intended to be used in any "focuseable" element that is used a the dropdown trigger
keydownHandler	`Function`	Intended to be used in any "clickeable" element that is used a the dropdown trigger
disabled	`Boolean`	If the dropdown component is currently disabled

Example:

Rich menu button

<t-dropdown>
  <div
    slot="trigger"
    slot-scope="{
      mousedownHandler,
      focusHandler,
      blurHandler,
      keydownHandler,
      isShown
    }"
  >
    <button
      id="user-menu"
      class="flex items-center pr-3 text-sm text-gray-700 transition duration-150 ease-in-out bg-gray-300 border-2 border-gray-200 rounded-full focus:outline-none focus:shadow-solid"
      :class="{ 'border-gray-300 bg-gray-500 text-white ': isShown }"
      aria-label="User menu"
      aria-haspopup="true"
      @mousedown="mousedownHandler"
      @focus="focusHandler"
      @blur="blurHandler"
      @keydown="keydownHandler"
    >
      <img class="w-8 h-8 mr-2 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">

      Hi, Alfonso!
    </button>
  </div>

  <div slot-scope="{ hide, blurHandler }">
    <button
      class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
      role="menuitem"
      @blur="blurHandler"
    >
      Your Profile
    </button>
    <button
      class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
      role="menuitem"
      @blur="blurHandler"
    >
      Settings
    </button>

    <button
      class="block w-full px-4 py-2 text-sm leading-5 text-red-500 transition duration-150 ease-in-out border-t hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
      @click="hide"
    >
      Close me
    </button>
  </div>
</t-dropdown>

Is a general recomendation to add the `blurHandler`, `mousedownHandler`, `focusHandler` and `keydownHandler` to any button or blureable element that you want to use as a trigger, those handler ensures to toggle the dropdown according to your settings.

The example below will be look like this:

Tooltip

<t-dropdown
  variant="tooltip"
  toggle-on-hover
>
  <span
    slot="trigger"
    class="text-blue-500 border-b border-dashed"
  >
    hey!, hover me
  </span>

  <template>
    Yes you can use the dropdown as tooltip
  </template>
</t-dropdown>

The example below will be look like this:

hey!, hover me

To create the perfect tooltip you can create your own variant and replace the HTML of the different parts to use a `span` for example.

Dropdown group

<t-dropdown>
  <div
    slot="trigger"
    slot-scope="{
      mousedownHandler,
      focusHandler,
      blurHandler,
      keydownHandler,
      isShown
    }"
    class="flex"
  >
    <button
      class="flex items-center justify-center flex-shrink-0 px-3 py-2 text-white bg-blue-500 border-r border-blue-600 rounded-l hover:bg-blue-500"
    >
      Hi, Alfonso!
    </button>
    <button
      class="flex items-center justify-center flex-shrink-0 px-3 py-2 text-white bg-blue-500 border-l border-blue-400 rounded-r hover:bg-blue-500"
      @mousedown="mousedownHandler"
      @focus="focusHandler"
      @blur="blurHandler"
      @keydown="keydownHandler"
    >
      <svg class="w-4 h-4 text-white fill-current" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
          <g id="icon-shape">
            <polygon id="Combined-Shape" points="9.29289322 12.9497475 10 13.6568542 15.6568542 8 14.2426407 6.58578644 10 10.8284271 5.75735931 6.58578644 4.34314575 8" />
          </g>
        </g>
      </svg>
    </button>
  </div>

  <div slot-scope="{ hide, blurHandler }">
    <button
      class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
      role="menuitem"
      @blur="blurHandler"
    >
      Your Profile
    </button>
    <button
      class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
      role="menuitem"
      @blur="blurHandler"
    >
      Settings
    </button>
  </div>
</t-dropdown>

The example below will be look like this:

Notice the in the example above the slot handler are only used in the trigger of the dropdown

Navbar

<t-dropdown
  tag-name="nav"
  :classes="{}"
  :fixed-classes="{}"
  class="bg-blue-800"
>
  <div
    slot="trigger"
    slot-scope="{
      mousedownHandler,
      focusHandler,
      blurHandler,
      keydownHandler,
      isShown
    }"
    class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8"
  >
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex items-center mr-2 -ml-2 sm:hidden">
          <!-- Mobile menu button -->
          <button
            class="inline-flex items-center justify-center p-2 text-blue-400 transition duration-150 ease-in-out rounded-md hover:text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 focus:text-white"
            aria-label="Main menu"
            aria-expanded="false"
            @mousedown="mousedownHandler"
            @blur="blurHandler"
            @keydown="keydownHandler"
          >
            <svg
              :class="{ 'hidden': isShown, 'block': !isShown}"
              class="w-6 h-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
            <svg
              :class="{ 'hidden': !isShown, 'block': isShown}"
              class="w-6 h-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <div class="flex items-center flex-shrink-0 text-white">
          MYAPP
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:items-center">
          <a href="#" class="px-3 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-blue-900 rounded-md focus:outline-none focus:text-white focus:bg-blue-700">Users</a>
          <a href="#" class="px-3 py-2 ml-4 text-sm font-medium leading-5 text-blue-300 transition duration-150 ease-in-out rounded-md hover:text-white hover:bg-blue-700 focus:outline-none focus:text-white focus:bg-blue-700">Companies</a>
          <a href="#" class="px-3 py-2 ml-4 text-sm font-medium leading-5 text-blue-300 transition duration-150 ease-in-out rounded-md hover:text-white hover:bg-blue-700 focus:outline-none focus:text-white focus:bg-blue-700">Settings</a>
        </div>
      </div>
    </div>
  </div>

  <div class="sm:hidden">
    <div class="px-2 pt-2 pb-3 sm:px-3">
      <a href="#" class="block px-3 py-2 text-base font-medium text-white transition duration-150 ease-in-out bg-blue-900 rounded-md focus:outline-none focus:text-white focus:bg-blue-700">Users</a>
      <a href="#" class="block px-3 py-2 mt-1 text-base font-medium text-blue-300 transition duration-150 ease-in-out rounded-md hover:text-white hover:bg-blue-700 focus:outline-none focus:text-white focus:bg-blue-700">Companies</a>
      <a href="#" class="block px-3 py-2 mt-1 text-base font-medium text-blue-300 transition duration-150 ease-in-out rounded-md hover:text-white hover:bg-blue-700 focus:outline-none focus:text-white focus:bg-blue-700">Settings</a>
    </div>
  </div>
</t-dropdown>

The example below will be look like this:

Example:

Resize the view

Dropdown (TDropdown)

Playground:

Fixed classes

Base classes

Variants:

Variant classes

Basic example

Props

Classes and variants format

Default classes

Scoped slots

Default slot

Example:

Trigger slot

Example:

Example: