VDropdown
You can use a <VDropdown /> component to display a menu that will hold your options. pass the right prop to the component to align it to the right instead of left, which is the default. Use the up prop to make it a dropup.
Dropdown Colors
You can customize the <VDropdown />, using color property. Refer to the dropdown prop documentation for full customization options.
Context Menu
Vuero's <VDropdown /> component can also be displayed as a context menu holding a single icon. The icon can be whatever you want with the specific icon prop set. Please refer to the markup for more details about usage.
Hover buttons
Vuero's <VDropdown /> component can also be opened on hover or after any custom event. Please refer to the markup for more details about usage.
Modern Dropdown
If you add in some specific markup, <VDropdown /> buttons can be enhanced into modern dropdowns with an animated caret icon. Use the modern prop on the component.
Menu with Icons
<VDropdown /> menu items can have icons and a more structured layout. Use the spaced prop with the provided markup in the code example.
Menu with Images
<VDropdown /> menus items can have images and more original layout. Use the spaced prop with the provided markup in the code example. The inner images can be be made rounded by adding the is-rounded class to the image element.
VDropdown Props
Here is the full props available for <VDropdown /> component:
| Props | Default | Type |
|---|---|---|
| title | undefined | string |
| color | undefined | primary, success, info, warning, danger |
| icon | undefined | string |
| up | false | boolean |
| right | false | boolean |
| modern | false | boolean |
| spaced | false | boolean |
VDropdown Slots
Here is the full slots available for <VDropdown /> component:
| Slot | Properties | Description |
|---|---|---|
| #content required | <{ isOpen: boolean open: function close: function toggle: function}> | Inner dropdown content |
| #button | <{ isOpen: boolean open: function close: function toggle: function}> | The dropdown handler |