Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.
🔥🔥🔥 Hire us

Dropdown
#

Dropdown component is a headless component that allow you to show some content near anchor. It is more utility component. You can use it with VaDropdownContent or VaCard component. This component looks like popover, but without any additional styling as VaPopover has.

Default usage
#

Open in GitHub

Placement and Offset
#

You can place dropdown any direction you want. Offset is calculated relative to placement prop. We use main and cross offset. Means main will be relative to placement direction while cross is perpendicular. auto placement will be bottom by default, but will change to top if it is not possible to display on bottom.

Offset direction
Placement:
Main:
Cross:
Open in GitHub

Trigger
#

You can use click, hover or none trigger which will open dropdown. If you want dropdown to be opened only programmatically use none trigger

Open in GitHub

Place on cursor
#

You can render dropdown content on cursor position. It is useful to use cursor props with auto-placement so if content do not fit target it will be placed somewhere else.

Open in GitHub

Prevent overflow
#

By default dropdown content is rendered as body child. This way we prevent any overflow. In example below overflow: hidden of green box is ignored. But we still able to respec overflow by changing target prop. In example below overflow: hidden of red box is hiding dropdown content.

Open in GitHub

Props #

NameDescriptionTypesDefault
anchor

Anchor element. Dropdown will be opened when clicked on anchor. Can be HTMLElement or CSS selector

String | Object

-

anchorSelector

Anchor CSS selector instead of passing slot

String

""

ariaLabel

Sets the aria-label attribute.

String

"$t:toggleDropdown"

autoPlacement

If dropdown doesn't fit viewport, it will be placed automatically to fit viewport

Boolean

true

closeOnAnchorClick

Dropdown will be closed when clicked on anchor

Boolean

true

closeOnClickOutside

Dropdown will be closed when clicked outside dropdown content and anchor

Boolean

true

closeOnContentClick

Dropdown will be closed when clicked inside dropdown content

Boolean

true

closeOnFocusOutside

Dropdown will be closed when focus is outside dropdown content and anchor

Boolean

true

contentClass

String

""

cursor

Dropdown will be rendered relative to cursor position

Boolean | Object

false

disabled

Applies disabled style and removes all user interaction effects.

Boolean

-

hoverOutTimeout

Time in ms after mouse leave dropdown before it will be closed

Number | String

200

hoverOverTimeout

Time in ms after mouse enter dropdown before it will be opened

Number | String

30

innerAnchorSelector

Anchor CSS selector inside passed slot

String

""

isContentHoverable

If true, dropdown content will be hoverable

Boolean

true

keepAnchorWidth

If true, dropdown content will have exact same width as anchor

Boolean

false

keyboardNavigation

Enables keyboard navigation for the component.

Boolean

true

modelValue

The value of the v-model bindings.

Boolean

false

offset

Dropdown content will be moved by main and cross axis according to current placement

Array | Number

0

placement

Dropdown content will be placed on placement side of anchor

String

"auto"

readonly

Doesn't look disabled, but acts like one. Mostly useful for wrapper components.

Boolean

-

role

The role attribute of the dropdown

String

"button"

stateful

Add possibility to work with component without setting v-model.

Boolean

true

stickToEdges

Dropdown will not be rendered outside of viewport. It will be moved in opposite direction.

Boolean

false

target

Dropdown content parent. Dropdown content will be attached to target to prevent overflow

String | Object

-

teleport

Element where content will be rendered

String | Object

-

trigger

Action that will triggered when open and close dropdown.

String | Array

[
  "click",
  "space",
  "enter",
  "arrow-down",
  "arrow-up"
]
verticalScrollOnOverflow

If true, dropdown content will adjust its height when the content is larger than available space

Boolean

true

Events #

NameDescription

anchorClick

The event is triggered when anchor is clicked

anchorDblclick

The event is triggered when anchor is double clicked

anchorRightClick

The event is triggered when anchor is right clicked

clickOutside

The event is triggered when clicked outside dropdown content and anchor

close

The event is triggered when dropdown is closed

contentClick

The event is triggered when clicked inside dropdown content

focusOutside

The event is triggered when focus is outside dropdown content and anchor

open

The event is triggered when dropdown is opened

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model and must be listed after the v-model

Slots #

NameDescription

anchor

Slot for anchor. When anchor is clicked, dropdown will be opened. Slot scope available:

{
  isOpened: boolean,
  hide: () => void,
  show: () => void,
  toggle: () => void,
  getAnchorWidth: () => string,
  getAnchorHeight: () => string,
}

default

Dropdown content. Slot scope available:

{
  isOpened: boolean,
  hide: () => void,
  show: () => void,
  toggle: () => void,
  getAnchorWidth: () => string,
  getAnchorHeight: () => string,
}

Css Variables #

NameDefault Value
--va-dropdown-line-height 1
--va-dropdown-content-wrapper-z-index var(--va-z-index-teleport-overlay, 9)
--va-dropdown-display inline-flex

Change log #

v1.10.3

  • Remove redundant styles such as line-height and display: inline-flex when dropdown is headless

v1.9.0

  • Keyboard navigation enabled by default

  • trigger now can be array of multiple triggers

  • Deleted events like anchor-click and content-click, you can listen for anchor click manually

  • Allow scoped styles in dropdown content