Skip to content
On this page

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.

COPYRIGHT © 2022 Codeshaper, All rights reserved.