Notifications
See all
  • Alice C. left a comment.

    1 hour ago

  • Joshua S. uploaded a file.

    2 hours ago

  • Tara S. sent you a message.

    2 hours ago

  • Melany W. left a comment.

    3 hours ago

Erik KovalskyProduct Manager
ProfileView your profile

ProjectsAll my projects
TeamManage your team

SettingsAccount settings

  • Erik KovalskyProduct Manager
    ProfileView your profile

    ProjectsAll my projects
    TeamManage your team

    SettingsAccount settings

  • Erik KovalskyProduct Manager
    ProfileView your profile

    ProjectsAll my projects
    TeamManage your team

    SettingsAccount settings

Components

  • Components Hub
  • Colors
  • Helpers
  • Content
  • Table
  • Icons
  • Interaction
  • VDropdown
  • VLoader
  • VPlaceload
  • VPlaceloadText
  • VPlaceloadAvatar
  • VMessage
  • VModal
  • VProgress
  • VTootlip
  • Buttons
  • Forms
  • Switches
  • Display
  • VAvatar
  • VAvatarStack
  • VBlock
  • VIconBox
  • VIconWrap
  • VSnack
  • VTag
  • VFlex
  • VGrid
  • VBreadcrumb
  • VTabs
  • VFlexPagination
  • VFlexTable
  • Accordions
  • Cards
  • Placeholders
  • Addons

Notifications
See all
  • Alice C. left a comment.

    1 hour ago

  • Joshua S. uploaded a file.

    2 hours ago

  • Tara S. sent you a message.

    2 hours ago

  • Melany W. left a comment.

    3 hours ago

  • Components
  • VDropdown

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 button
Dropdown item Other dropdown item Active dropdown item Other dropdown item
With a divider
Dropdown right
Dropdown item Other dropdown item Active dropdown item Other dropdown item
With a divider
Dropdown up
Dropdown item Other dropdown item Active dropdown item Other dropdown item
With a divider

Dropdown Colors

You can customize the <VDropdown />, using color property. Refer to the dropdown prop documentation for full customization options.

Primary
Dropdown item Other dropdown item Active dropdown item Other dropdown item
With a divider
Danger
Dropdown item Other dropdown item Active dropdown item Other dropdown item
With a divider
Warning
Dropdown item Other dropdown item Active dropdown item Other dropdown item
With a divider
Info
Dropdown item Other dropdown item Active dropdown item Other dropdown item
With a divider
Success
Dropdown item Other dropdown item Active dropdown item Other dropdown item
With a divider

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.

Dropdown item Other dropdown item Active dropdown item Other dropdown item
With a divider
Dropdown item Other dropdown item Active dropdown item Other dropdown item
With a divider
Dropdown item Other dropdown item Active dropdown item Other dropdown item
With a divider

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.

Dropdown item Other dropdown item Active dropdown item Other dropdown item
With a divider
Dropdown item Other dropdown item Active dropdown item Other dropdown item
With a divider

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.

Modern rounded
Dropdown item Other dropdown item Active dropdown item Other dropdown item
With a divider
Modern dropdown
Dropdown item Other dropdown item Active dropdown item Other dropdown item
With a divider

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.

Dropdown with icon
InvestBuy more stocks
CompareCompare with others
TradeView opportunities

WalletOpen stock wallet
With unicons
InvestBuy more stocks
CompareCompare with others
TradeView opportunities

WalletOpen stock wallet

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.

Dropdown with image
Erik K.New York, NY
Alice C.San Diego, CA
Melany W.San Jose, CA

Anna BSan Francisco, CA
Dropdown with rounded image
Erik K.New York, NY
Alice C.San Diego, CA
Melany W.San Jose, CA

Anna BSan Francisco, CA

<VDropdown> Props

NameDefaultType
:classes
:color
:end
:icon
:modern
:options
:right
:spaced
:title
:up

<VDropdown> Exposed

NameType
close
isOpen
open
toggle

<VDropdown> Slots

NameType
#button
#content