Introduction
The dropdown component allows you to render a dropdown menu with a button that triggers it:Using a dropdown item as an anchor link
By default, a dropdown item’s underlying HTML tag is<button>. You can change it to be an <a> tag by using the tag attribute:
Changing the color of a dropdown item
By default, the color of a dropdown item is “gray”. You can change it to bedanger, info, primary, success or warning by using the color attribute:
Adding an icon to a dropdown item
You can add an icon to a dropdown item by using theicon attribute:
Changing the icon color of a dropdown item
By default, the icon color uses the same color as the item itself. You can override it to bedanger, info, primary, success or warning by using the icon-color attribute:
Adding an image to a dropdown item
You can add a circular image to a dropdown item by using theimage attribute:
Adding a badge to a dropdown item
You can render a badge on top of a dropdown item by using thebadge slot:
badge-color attribute:
Setting the placement of a dropdown
The dropdown may be positioned relative to the trigger button by using theplacement attribute:
Setting the width of a dropdown
The dropdown may be set to a width by using thewidth attribute. Options correspond to Tailwind’s max-width scale. The options are xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl and 7xl:
Controlling the maximum height of a dropdown
The dropdown content can have a maximum height using themax-height attribute, so that it scrolls. You can pass a CSS length: