PubDropdown
Default Dropdown
vue
<template>
<pub-dropdown align-to-end placement="top" text="Dropdown button">
<nav class="py-2 text-sm text-gray-700">
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Dashboard</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Settings</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Earnings</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Sign out</a>
</nav>
</pub-dropdown>
</template>
<script setup>
import { PubDropdown } from "vuelicity";
</script>Dropdown Placement
Prop - placement Usage
The placement prop is used to specify the placement of the dropdown relative to the button.
vue
<template>
<pub-dropdown placement="top" text="Top">
<nav class="py-2 text-sm text-gray-700">
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Dashboard </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Settings </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Earnings </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Sign out </a>
</nav>
</pub-dropdown>
<pub-dropdown placement="right" text="Right">
<nav class="py-2 text-sm text-gray-700">...</nav>
</pub-dropdown>
<pub-dropdown text="Bottom">
<nav class="py-2 text-sm text-gray-700">...</nav>
</pub-dropdown>
<pub-dropdown placement="left" text="Left">
<nav class="py-2 text-sm text-gray-700">...</nav>
</pub-dropdown>
</template>
<script setup>
import { PubDropdown } from "vuelicity";
</script>Dropdown Alignment
Prop - alignToEnd Usage
The alignToEnd prop is used to align the dropdown to the end of the button.
vue
<template>
<pub-dropdown align-to-end placement="top" text="Top">
<nav class="py-2 text-sm text-gray-700">
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Dashboard </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Settings </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Earnings </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Sign out </a>
</nav>
</pub-dropdown>
<pub-dropdown align-to-end placement="right" text="Right">
<nav class="py-2 text-sm text-gray-700">...</nav>
</pub-dropdown>
<pub-dropdown align-to-end text="Bottom">
<nav class="py-2 text-sm text-gray-700">...</nav>
</pub-dropdown>
<pub-dropdown align-to-end placement="left" text="Left">
<nav class="py-2 text-sm text-gray-700">...</nav>
</pub-dropdown>
</template>
<script setup>
import { PubDropdown } from "vuelicity";
</script>Dropdown Offset
Prop - offset-distance Usage
The offset-distance prop is used to specify the distance between the button and the dropdown.
vue
<template>
<pub-dropdown text="Profile" :offset-distance="16">
<nav class="py-2 text-sm text-gray-700">
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Dashboard </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Settings </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Earnings </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Sign out </a>
</nav>
</pub-dropdown>
</template>
<script setup>
import { PubDropdown } from "vuelicity";
</script>Prop - offset-skidding Usage
The offset-skidding prop is used to specify the skidding between the button and the dropdown.
vue
<template>
<pub-dropdown text="Top" placement="top" :offset-skidding="8">
<nav class="py-2 text-sm text-gray-700">
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Dashboard </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Settings </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Earnings </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Sign out </a>
</nav>
</pub-dropdown>
<pub-dropdown text="Right" placement="right" :offset-skidding="8">
<nav class="py-2 text-sm text-gray-700">
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Dashboard </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Settings </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Earnings </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Sign out </a>
</nav>
</pub-dropdown>
<pub-dropdown text="Bottom" :offset-skidding="8">
<nav class="py-2 text-sm text-gray-700">
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Dashboard </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Settings </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Earnings </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Sign out </a>
</nav>
</pub-dropdown>
<pub-dropdown text="Left" placement="left" :offset-skidding="8">
<nav class="py-2 text-sm text-gray-700">
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Dashboard </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Settings </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Earnings </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Sign out </a>
</nav>
</pub-dropdown>
</template>
<script setup>
import { PubDropdown } from "vuelicity";
</script>Disabled Dropdown
Prop - disabled Usage
The disabled prop can be used to disable the dropdown.
vue
<template>
<pub-dropdown text="Profile" disabled>
<nav class="py-2 text-sm text-gray-700">
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Dashboard </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Settings </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Earnings </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Sign out </a>
</nav>
</pub-dropdown>
</template>
<script setup>
import { PubDropdown } from "vuelicity";
</script>Dropdown - coloured triggers
Prop - theme Usage
The theme prop can be used to change the color of the dropdown trigger.
vue
<template>
<pub-dropdown text="Red" theme="red">
<nav class="py-2 text-sm text-gray-700">...</nav>
</pub-dropdown>
<pub-dropdown text="Blue">
<nav class="py-2 text-sm text-gray-700">...</nav>
</pub-dropdown>
<pub-dropdown text="Green" theme="green">
<nav class="py-2 text-sm text-gray-700">...</nav>
</pub-dropdown>
<pub-dropdown text="Yellow" theme="yellow">
<nav class="py-2 text-sm text-gray-700">...</nav>
</pub-dropdown>
<pub-dropdown text="Magenta" theme="magenta">
<nav class="py-2 text-sm text-gray-700">...</nav>
</pub-dropdown>
<pub-dropdown text="Cyan" theme="cyan">
<nav class="py-2 text-sm text-gray-700">...</nav>
</pub-dropdown>
<pub-dropdown text="Light" theme="light">
<nav class="py-2 text-sm text-gray-700">...</nav>
</pub-dropdown>
<pub-dropdown text="Dark" theme="dark">
<nav class="py-2 text-sm text-gray-700">...</nav>
</pub-dropdown>
</template>
<script setup>
import { PubDropdown } from "vuelicity";
</script>Dropdown - custom trigger
Slot - trigger Usage
The trigger slot can be used to customize the dropdown trigger.
vue
<template>
<pub-dropdown>
<template #trigger>
<pub-button rounded="full" theme="magenta">Send</pub-button>
</template>
<nav class="py-2 text-sm text-gray-700">
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Schedule </a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100"> Now </a>
</nav>
</pub-dropdown>
</template>
<script setup>
import { PubDropdown, PubButton } from "vuelicity";
</script>Reference
Properties
| Name | Type | Default | Description | Options |
|---|---|---|---|---|
| text | String | '' | The text to display on the dropdown button. | |
| theme | String | 'default' | The color theme of the dropdown trigger. | 'none', 'default', 'blue', 'red', 'yellow', 'green', 'magenta', 'cyan', 'light', 'dark' |
| placement | String | 'bottom' | The placement of the dropdown relative to the trigger. | 'top', 'right', 'bottom', 'left' |
| alignToEnd | Boolean | false | Whether to align the dropdown to the end of the trigger. | |
| offsetDistance | Number | 0 | The distance between the trigger and the dropdown. | |
| offsetSkidding | Number | 0 | The displacement along the trigger button. | |
| disabled | Boolean | false | Whether the dropdown is disabled. | |
| class | String | '' | Additional CSS classes to apply to the wrapper. | |
| triggerClass | String | '' | Additional CSS classes to apply to the trigger button. | |
| dropdownClass | String | '' | Additional CSS classes to apply to the dropdown container. |
Slots
| Name | Description |
|---|---|
| default | The content of the dropdown menu. |
| trigger | Slot to customize the dropdown trigger element. |
Events
| Name | Description |
|---|---|
| toggle | Emitted when the dropdown is toggled. |