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

Button Dropdown
#

Component with a button that displays dropdown content when getting clicked. It inherits properties, provided by VaButton and VaDropdown components.

Examples
#

Basic usage
#

Just wrap your content with va-button-dropdown component and it will become available only via click.

Open in GitHub

Split
#

The split prop allows you to split the button into two, with different purposes of using. One of them can be a link (you can set href for it via split-to or split-href props, which are analogues of the to and href attributes).

Open in GitHub

Colors
#

The component can be colored via color, gradient and text-color props.

Open in GitHub

Sizes
#

You are able to set component's size via size prop (small, medium or large presets are available, px and rem values are also suitable).

Open in GitHub

Presets
#

Open in GitHub

Disabled
#

The component can be disabled via disabled prop. For the split state can be disabled both or only one button (via disableButton and disableDropdown props).

Open in GitHub

Icons
#

You can set the dropdown icon and its color via icon and icon-color props. Also you are able to change icon's position from right to left side of the button via left-icon boolean prop. If you want to remove icon at all, use the hide-icon property. Opened-state icon can be changed using openedIcon prop.

Open in GitHub

Click inside
#

You are able to set up the dropdown to be closed or not after clicking on its content using the close-on-content-click prop.

Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
activeClass

Applied when the link is active. More info here.

String

-

anchor

String | Object

-

anchorSelector

Anchor CSS selector instead of passing slot

String

""

append

When set, always appends the relative path to the current path. More info here.

Boolean

-

ariaLabel

The aria-label of the component

String

"$t:toggleDropdown"

autoPlacement

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

Boolean

true

backgroundOpacity

Sets up button background opacity.

Number | String

1

borderColor

Color CSS style border (theme supported options or HEX).

String

""

closeOnAnchorClick

Dropdown will be closed when anchor is clicked

Boolean

true

closeOnClickOutside

Dropdown will be closed when clicked outside dropdown content and anchor

Boolean

true

closeOnContentClick

Sets dropdown content on click behavior.

Boolean

true

closeOnFocusOutside

Boolean

true

color

Color of the component (theme string or HEX string).

String

"primary"

contentClass

String

""

cursor

Dropdown will be rendered relative to cursor position

Boolean | Object

false

disableButton

Disables the button.

Boolean

false

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

disableDropdown

Disables the dropdown menu.

Boolean

false

exact

Exactly match the link. Without this, '/' will match every route. More info here.

Boolean

-

exactActiveClass

Applied when the link is active with exact match. More info here.

String

-

fontSizesConfig

Provide a set of sizes for fonts as a global component specific setting.

Object

{
  "defaultSize": 1,
  "sizes": {
    "small": 0.75,
    "medium": 1,
    "large": 1.25
  }
}
gradient

Makes the button background color a gradient (only if backgroundColor prop is equal to 1).

Boolean

false

hideIcon

Hide icon (when split is disabled).

Boolean

false

hoverBehavior

Behavior of the button, when it's being hovered. Can be mask (superimposes color mask on the background or text color for plain state) or opacity (adds opacity to the background or text color for plain state).

String

"mask"

hoverMaskColor

Mask color for mask behavior.

String

"textInverted"

hoverOpacity

Opacity value for opacity behavior and mask opacity for mask behavior.

Number | String

0.15

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

href

Designates the component as anchor and applies the href attribute. More info here.

String

-

icon

Applies a custom icon in the dropdown section.

String

"va-arrow-down"

iconColor

Sets an icon color.

String

""

innerAnchorSelector

Anchor CSS selector inside passed slot

String

""

isContentHoverable

If true, dropdown content will be hoverable

Boolean

true

keepAnchorWidth

Keeps anchor position the same.

Boolean

false

keyboardNavigation

Enables keyboard navigation for the component.

Boolean

true

label

Same as native label.

String

-

leftIcon

Sets the icon position to the left.

Boolean

false

loading

Indicates that something is loading (spinner icon).

Boolean

false

modelValue

Sets a dropdown state.

Boolean

false

offset

Sets the distance between dropdown and anchor.

Number | Array

2

openedIcon

Applies a custom icon in the dropdown section when the dropdown is opened.

String

"va-arrow-up"

placement

Sets the placement of the dropdown content. More about placements

String

"auto"

plain

Applies plain styling.

Boolean

false

preset

Named preset combination of component props.

String | Array

-

pressedBehavior

Behavior of the button, when it's being pressed. Can be mask (superimposes color mask on the background or text color for plain state) or opacity (adds opacity to the background or text color for plain state).

String

"mask"

pressedMaskColor

Mask color for mask behavior.

String

"textPrimary"

pressedOpacity

Opacity value for opacity behavior and mask opacity for mask behavior.

Number

0.13

readonly

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

Boolean

-

replace

When set, calls router.replace() instead of router.push() when navigated, so it will not leave a history record. More info here.

Boolean

-

role

Sets the role attribute.

String

"button"

round

Adds rounded corners (or make a button fully rounded if only icon is passed).

Boolean

false

size

Specify size for component. "small", "medium", "large" sizes are available. If you want more control, you can provide number (will be used as px) or string value (rem and px sizes are supported).

String

"medium"

sizesConfig

Provide a set of sizes as a global component specific setting.

Object

{
  "defaultSize": 48,
  "sizes": {
    "small": 32,
    "medium": 48,
    "large": 64
  }
}
split

Divides the button into two parts. This is useful when you have main action (button) and a number of secondary actions (icon + dropdown).

Boolean

-

splitHref

Sets a native navigation link in a split component.

String

""

splitTo

Sets a vue navigation link in a split component.

String

""

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

tag

Replaces html tag. This is useful for semantics and also to allow for valid markup in some cases (ul > li and tr > td etc.).

String

"button"

target

Navigation target, More info here.

String | Object

-

teleport

Element where content will be rendered

String | Object

-

textColor

Text color (theme string or HEX string).

String

""

textOpacity

Sets button text opacity.

Number | String

1

to

The target route of the link. More info here.

String | Object

-

trigger

Action that will triggered when open and close dropdown.

String | Array

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

Will be used as value for html type attribute.

String

"button"

verticalScrollOnOverflow

Boolean

true

Events #

NameDescription

click

Emitted when user clicks on button.. The event argument is:

`() => Event`

mainButtonClick

Emitted when user clicks on main button in split component.. The event argument is:

`() => Event`

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

default

Dropdown content slot.

label

Content for dropdown button.

Css Variables #

NameDefault Value
--va-button-dropdown-button-margin 0

Change log #

v1.10.3

  • Remove redundant div wrapper

  • Use correct teleport target for dropdown when split is true