Dropdown

Display a list of actions in a dropdown menu.

Usage

Pass an array of arrays to the items prop of the Dropdown component. Each array represents a group of items. Each item can have the following properties:

• label - The label of the item.
• icon - The icon of the item.
• avatar - The avatar of the item. You can pass all the props of the Avatar component.
• shortcuts - The shortcuts of the item.
• disabled - Whether the item is disabled.
• class - The class of the item.
• click - The click handler of the item.

<script setup>
const items = [
  [{
    label: 'Profile',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/2556185?v=4'
    }
  }], [{
    label: 'Edit',
    icon: 'icon-[heroicons--pencil-square-20-solid]',
    shortcuts: ['E'],
    click: () => {
      console.log('Edit')
    }
  }, {
    label: 'Duplicate',
    icon: 'icon-[heroicons--document-duplicate-20-solid]',
    shortcuts: ['D'],
    disabled: true
  }], [{
    label: 'Archive',
    icon: 'icon-[heroicons--archive-box-20-solid]'
  }, {
    label: 'Move',
    icon: 'icon-[heroicons--arrow-right-circle-20-solid]'
  }], [{
    label: 'Delete',
    icon: 'icon-[heroicons--trash-20-solid]',
    shortcuts: ['⌘', 'D']
  }]
]
</script>

<template>
  <s-dropdown :items="items" :popper="{ placement: 'bottom-start' }">
    <s-button color="white" label="Options" trailing-icon="icon-[heroicons--chevron-down-20-solid]"/>
  </s-dropdown>
</template>

Mode

Use the mode prop to switch between click and hover modes.

<script setup>
const items = [
  [{
    label: 'Profile',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/77129709?v=4'
    }
  }]
]
</script>

<template>
  <SDropdown :items="items" mode="hover" :popper="{ placement: 'bottom-start' }">
    <SButton color="white" label="Options" trailing-icon="icon-[heroicons--chevron-down-20-solid]" />
  </SDropdown>
</template>

Popper

Use the popper prop to customize the popper instance.

Arrow

<script setup>
const items = [
  [{
    label: 'Profile',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/77129709?v=4'
    }
  }]
]
</script>

<template>
  <SDropdown :items="items" :popper="{ arrow: true }">
    <SButton color="white" label="Options" trailing-icon="icon-[heroicons--chevron-down-20-solid]" />
  </SDropdown>
</template>

Placement

<script setup>
const items = [
  [{
    label: 'Profile',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/77129709?v=4'
    }
  }]
]
</script>

<template>
  <SDropdown :items="items" :popper="{ placement: 'right-start' }">
    <SButton color="white" label="Options" trailing-icon="icon-[heroicons--chevron-down-20-solid]" />
  </SDropdown>
</template>

Offset

<script setup>
const items = [
  [{
    label: 'Profile',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/77129709?v=4'
    }
  }]
]
</script>

<template>
  <SDropdown :items="items" :popper="{ offsetDistance: 0, placement: 'right-start' }">
    <SButton color="white" label="Options" trailing-icon="icon-[heroicons--chevron-down-20-solid]" />
  </SDropdown>
</template>

Slots

item

Use the #item slot to customize the items content or pass a slot property to customize a specific item. You will have access to the item property in the slot scope.

<script setup>
const items = [
  [{
    label: 'ilya@example.com',
    slot: 'account',
    disabled: true
  }], [{
    label: 'Settings',
    icon: 'icon-[heroicons--cog-8-tooth]'
  }], [{
    label: 'Documentation',
    icon: 'icon-[heroicons--book-open]'
  }, {
    label: 'Changelog',
    icon: 'icon-[heroicons--megaphone]'
  }, {
    label: 'Status',
    icon: 'icon-[heroicons--signal]'
  }], [{
    label: 'Sign out',
    icon: 'icon-[heroicons--arrow-left-on-rectangle]'
  }]
]
</script>

<template>
  <SDropdown :items="items" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }">
    <SAvatar src="https://avatars.githubusercontent.com/u/77129709?v=4" />

    <template #account="{ item }">
      <div class="text-left">
        <p>
          Signed in as
        </p>
        <p class="truncate font-medium text-gray-900 dark:text-white">
          {{ item.label }}
        </p>
      </div>
    </template>

    <template #item="{ item }">
      <span class="truncate">{{ item.label }}</span>

      <SIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto" />
    </template>
  </SDropdown>
</template>