Dropdown
Dropdown is a component that can be used to Toggle contextual overlays for displaying lists of links and more with the dropdown plugin.
Basic Dropdown
vue
<template>
<div>
<Dropdown label="Basic Dropdown" :items="menus" />
</div>
</template>
<script setup>
import Dropdown from "@/components/Dropdown";
const menus = [
{
label: "Action",
link: "#",
},
{
label: "Another action",
link: "#",
},
{
label: "Something else here",
link: "#",
},
{
label: "Separated link",
link: "#",
hasdivider: true,
},
];
</script>
How Can I use Custom Label?
You can also use Button component as a label. or any text or html element.
Example for Button Component
js
<Dropdown>
<Button
text="Custom Label"
btnClass="btn-primary"
icon="heroicons-outline:chevron-right"
iconPosition="right"
div
iconClass="text-lg"
/>
</Dropdown>
You can use all props of Button component.
Example For Custom Text
js
<Dropdown>
<span>Custom Label</span>
</Dropdown>
How Can I use dropdown options as like a menu items?
js
<Dropdown>
<Button
text="Custom Label"
btnClass="btn-primary"
icon="heroicons-outline:chevron-right"
iconPosition="right"
div
iconClass="text-lg"
/>
<template v-slot:menus>
<div class="single-menu-item">single menu one</div>
<div class="single-menu-item">single menu two</div>
<div class="single-menu-item">single menu three</div>
</template>
</Dropdown>
All Classes for Dropdown
You can use classMenuItems props for dropdown direction type. Available types: Left Align: classMenuItems="left-0 w-[220px] top-[110%]",
Right Align: classMenuItems="right-0 w-[220px] top-[110%]"
Label class: labelClass="btn-primary"
Parent class: parentClass="relative"
Split Dropdown
vue
<template>
<div>
<SplitDropdown label="Split Dropdown" :items="menus" split />
</div>
</template>
<script setup>
import SplitDropdown from "@/components/Dropdown/SplitDropdown";
const menus = [
{
label: "Action",
link: "#",
},
{
label: "Another action",
link: "#",
},
{
label: "Something else here",
link: "#",
},
{
label: "Separated link",
link: "#",
hasdivider: true,
},
];
</script>
Tip
All options and classes and slot are same as Dropdown component.