Dropdown

Display a dropdown.

Usage

Use a Dropdown that wraps Reka UI's dropdown components. 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 content="Example tooltip">
        <CDropdownItem disabled>
          Tooltip example item
        </CDropdownItem>
      </CTooltip>
      <CDropdownItem
        destructive
        icon="i-heroicons-solid-trash"
      >
        Destructive item
      </CDropdownItem>
    </template>
  </CDropdown>
</template>

Float

The CDropdown float prop accepts the props for the DropdownMenuContent component from reka-ui. This allows you to control the positioning of the dropdown menu.

Props

Dropdown

float
DropdownMenuContentProps
modal
boolean
false
portal
boolean
false
defaultOpen
boolean
open
boolean

Dropdown item

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