Tailwind CSS Dropdown - Taco Vue

The Dropdown displays a list of options, triggered by an icon, button, or action. It is also used to filter or sort contents on a page. Below we are presenting dynamic examples of the Dropdown component that you can use in your project based on Taco.

Code

Below you can find the code for the Dropdown component. 

<Dropdown 
  :menu="menu"
  :variant="filled"
  :color="blue"
  :button="Dropdown"
  :size="lg"
/>

Below you can find a sample code for the $menu array. 

const menu = [ 
    {
      label: "Item 1",
      url: "#",
      items: [
        {
          label: "Item 1.1",
          url: "#",
        },
        {
          label: "Item 1.2",
          url: "#",
        },
      ],
    },
    {
      label: "Item 2",
      url: "#",
      items: [
        {
          label: "Item 2.1",
          url: "#",
        },
        {
          label: "Item 2.2",
          url: "#",
        },
        {
          label: "Item 2.3",
          url: "#",
        },
        {
          label: "W3Schools Positions",
          url: "https://www.w3schools.com/css/css_positioning.asp",
        },
      ],
    },
    {
      label: "W3Schools Positions",
      url: "https://www.w3schools.com/css/css_positioning.asp",
    },
];