PubDropdown
Default Dropdown
vue
<template>
<pub-dropdown
align-to-end
placement="top"
text="Dropdown button"
>
<nav class="py-2 text-sm text-grey-700">
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
>Dashboard</a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
>Settings</a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
>Earnings</a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
>Sign out</a>
</nav>
</pub-dropdown>
</template>
<script lang="ts" 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-grey-700">
<a href="#" class="block px-4 py-2 hover:bg-grey-100"> Dashboard </a>
<a href="#" class="block px-4 py-2 hover:bg-grey-100"> Settings </a>
<a href="#" class="block px-4 py-2 hover:bg-grey-100"> Earnings </a>
<a href="#" class="block px-4 py-2 hover:bg-grey-100"> Sign out </a>
</nav>
</pub-dropdown>
<pub-dropdown placement="right" text="Right">
<nav class="py-2 text-sm text-grey-700">...</nav>
</pub-dropdown>
<pub-dropdown text="Bottom">
<nav class="py-2 text-sm text-grey-700">...</nav>
</pub-dropdown>
<pub-dropdown placement="left" text="Left">
<nav class="py-2 text-sm text-grey-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-grey-700">
<a href="#" class="block px-4 py-2 hover:bg-grey-100"> Dashboard </a>
<a href="#" class="block px-4 py-2 hover:bg-grey-100"> Settings </a>
<a href="#" class="block px-4 py-2 hover:bg-grey-100"> Earnings </a>
<a href="#" class="block px-4 py-2 hover:bg-grey-100"> Sign out </a>
</nav>
</pub-dropdown>
<pub-dropdown align-to-end placement="right" text="Right">
<nav class="py-2 text-sm text-grey-700">...</nav>
</pub-dropdown>
<pub-dropdown align-to-end text="Bottom">
<nav class="py-2 text-sm text-grey-700">...</nav>
</pub-dropdown>
<pub-dropdown align-to-end placement="left" text="Left">
<nav class="py-2 text-sm text-grey-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-grey-700">
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Dashboard </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Settings </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Earnings </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Sign out </a>
</nav>
</pub-dropdown>
</template>
<script lang="ts" 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-grey-700">
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Dashboard </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Settings </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Earnings </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Sign out </a>
</nav>
</pub-dropdown>
<pub-dropdown
text="Right"
placement="right"
:offset-skidding="8"
>
<nav class="py-2 text-sm text-grey-700">
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Dashboard </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Settings </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Earnings </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Sign out </a>
</nav>
</pub-dropdown>
<pub-dropdown
text="Bottom"
:offset-skidding="8"
>
<nav class="py-2 text-sm text-grey-700">
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Dashboard </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Settings </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Earnings </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Sign out </a>
</nav>
</pub-dropdown>
<pub-dropdown
text="Left"
placement="left"
:offset-skidding="8"
>
<nav class="py-2 text-sm text-grey-700">
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Dashboard </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Settings </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Earnings </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Sign out </a>
</nav>
</pub-dropdown>
</template>
<script lang="ts" 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-grey-700">
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Dashboard </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Settings </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Earnings </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Sign out </a>
</nav>
</pub-dropdown>
</template>
<script lang="ts" setup>
import { PubDropdown } from 'vuelicity'
</script>Dropdown - coloured triggers
Prop - color Usage
The color prop can be used to change the color of the dropdown trigger.
vue
<template>
<pub-dropdown text="Red" color="red">
<nav class="py-2 text-sm text-grey-700">...</nav>
</pub-dropdown>
<pub-dropdown text="Blue">
<nav class="py-2 text-sm text-grey-700">...</nav>
</pub-dropdown>
<pub-dropdown text="Green" color="green">
<nav class="py-2 text-sm text-grey-700">...</nav>
</pub-dropdown>
<pub-dropdown text="Yellow" color="yellow">
<nav class="py-2 text-sm text-grey-700">...</nav>
</pub-dropdown>
<pub-dropdown text="Pink" color="pink">
<nav class="py-2 text-sm text-grey-700">...</nav>
</pub-dropdown>
<pub-dropdown text="Cyan" color="cyan">
<nav class="py-2 text-sm text-grey-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"
color="pink"
>
Send
</pub-button>
</template>
<nav class="py-2 text-sm text-grey-700">
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Schedule </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Now </a>
</nav>
</pub-dropdown>
</template>
<script lang="ts" setup>
import { PubButton, PubDropdown } from 'vuelicity'
</script>Reference
Properties
| Name | Type | Default | Description | Options |
|---|---|---|---|---|
| text | String | '' | The text to display on the dropdown button. | |
| color | String | 'default' | The color color of the dropdown trigger. | 'none', 'default', 'blue', 'red', 'green', 'yellow', 'pink', 'cyan', 'purple', 'grey' |
| 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. | |
| 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. | |
| triggerWrapperClass | String | '' | Additional CSS classes to apply to the trigger wrapper. | |
| dropdownClass | String | '' | Additional CSS classes to apply to the dropdown container. | |
| contentWrapperClass | String | '' | Additional CSS classes to apply to the content wrapper. | |
| duration | Number | 250 | The duration of the dropdown animation in milliseconds. | |
| offsetDistance | Number | 8 | The distance between the trigger and the dropdown. | |
| offsetSkidding | Number | 0 | The displacement along the trigger button. | |
| isActive | Boolean | false | Whether the dropdown is currently active. | |
| type | String | 'button' | The type of the dropdown trigger. | 'button', 'navlink' |
| closeInside | Boolean | false | Whether to close the dropdown when clicking inside the content. |
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. |