Dropdown

Display a dropdown.

Usage

Use a Dropdown that wraps HeadlessUI's dropdown component. It's composed compositionally with CDropdown with CDropdownItems wrapped inside the #items slot. The default slot is the trigger.

You can customise the placement of the dropdown using the placement prop.

Dropdown item

The CDropdownItem can be customised in a variety of ways as seen below, featuring a prepended and appended icon using the #icon and #appendIcon slots, a destructive prop, as well a disabled prop.

You can also utilise the as prop to choose what the parent element is rendered as. This is useful for rendering links and anchor tags. It'll render an anchor tag by default.

<template>
  <CDropdown>
    <template #items>
      <CDropdownItem
        as="RouterLink"
        to="/"
      >
        First item
      </CDropdownItem>
      <CDropdownItem
        as="a"
        href="/"
      >
        <template #icon>
          <CIcon
            name="i-heroicons-solid-trash"
            size="sm"
          />
        </template>
        Icon slot
      </CDropdownItem>
      <CDropdownItem
        as="a"
        href="/"
      >
        Append icon slot
        <template #appendIcon>
          <CIcon
            name="i-heroicons-solid-trash"
            size="sm"
          />
        </template>
      </CDropdownItem>
      <CDropdownItem disabled>
        Disabled item
      </CDropdownItem>
      <CTooltip size="sm">
        <CDropdownItem>
          Tooltip example item
        </CDropdownItem>
        <template #content>
          Example
        </template>
      </CTooltip>
      <CDropdownItem
        destructive
        icon="i-heroicons-solid-trash"
      >
        Destructive item
      </CDropdownItem>
    </template>
  </CDropdown>
</template>

Float

The component utilises @headlessui-float/vue for floating. For the moment only the placement, offset and strategy props are hoisted. The default strategy for the dropdown is absolute, you can however change this to fixed as seen below.

<template>
  <CDropdown
    strategy="fixed"
    placement="top-start"
    :flip="{ fallbackPlacements: ['bottom-start'] }"
  >
    <template #items>
      <CDropdownItem
        as="RouterLink"
        to="/"
      >
        First item
      </CDropdownItem>
      <CDropdownItem
        as="a"
        href="/"
      >
        <template #icon>
          <CIcon name="i-heroicons-solid-trash" />
        </template>
        Icon slot
      </CDropdownItem>
      <CDropdownItem
        as="a"
        href="/"
      >
        Append icon slot
        <template #appendIcon>
          <CIcon name="i-heroicons-solid-trash" />
        </template>
      </CDropdownItem>
      <CDropdownItem disabled>
        Disabled item
      </CDropdownItem>
      <CTooltip size="sm">
        <CDropdownItem>
          Tooltip example item
        </CDropdownItem>
        <template #content>
          Example
        </template>
      </CTooltip>
      <CDropdownItem
        destructive
        icon="i-heroicons-solid-trash"
      >
        Destructive item
      </CDropdownItem>
    </template>
  </CDropdown>
</template>

Props

Dropdown

placement
Placement
"bottom-end"
"top""left""bottom""right""bottom-end""top-end""top-start""left-end""left-start""bottom-start""right-end""right-start"
strategy
Strategy
"absolute"
"fixed""absolute"
offset
number
4
flip
{ fallbackStrategy: string; fallbackPlacements: string[]; }
{ fallbackStrategy: "initialPlacement", fallbackPlacements: ["top-end", "bottom-end"], }

Dropdown item

as
string
"a"
icon
string
appendIcon
string
disabled
boolean
destructive
boolean