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

buttonDropdown.examples.presets.title
#

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
active-class

Applied when the link is active. More info here.

String

-

anchor-selector

Anchor CSS selector instead of passing slot

String

""

append

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

Boolean

-

aria-label

The aria-label of the component

String

"$t:toggleDropdown"

auto-placement

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

Boolean

true

background-opacity

Sets up button background opacity.

Number

1

border-color

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

String

""

close-on-anchor-click

Dropdown will be closed when anchor is clicked

Boolean

true

close-on-click-outside

Dropdown will be closed when clicked outside dropdown content and anchor

Boolean

true

close-on-content-click

Sets dropdown content on click behavior.

Boolean

true

color

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

String

"primary"

cursor

Dropdown will be rendered relative to cursor position

Boolean

false

disable-button

Disables the button.

Boolean

false

disable-dropdown

Disables the dropdown menu.

Boolean

false

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

exact

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

Boolean

-

exact-active-class

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

String

-

font-sizes-config

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

hide-icon

Hide icon (when split is disabled).

Boolean

false

hover-behavior

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"

hover-mask-color

Mask color for mask behavior.

String

"textInverted"

hover-opacity

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

Number

0.15

hover-out-timeout

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

Number

200

hover-over-timeout

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

Number

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"

icon-color

Sets an icon color.

String

""

inner-anchor-selector

Anchor CSS selector inside passed slot

String

""

is-content-hoverable

If true, dropdown content will be hoverable

Boolean

true

keep-anchor-width

Keeps anchor position the same.

Boolean

false

keyboard-navigation

Enables keyboard navigation for the component.

Boolean

false

label

Same as native label.

String

-

left-icon

Sets the icon position to the left.

Boolean

false

loading

Indicates that something is loading (spinner icon).

Boolean

false

model-value

Sets a dropdown state.

Boolean

false

offset

Sets the distance between dropdown and anchor.

Number | Array

2

opened-icon

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

-

pressed-behavior

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"

pressed-mask-color

Mask color for mask behavior.

String

"textPrimary"

pressed-opacity

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

Number

0.13

prevent-overflow

If true, dropdown will be teleported to target ignoring overflow: hidden on relative position elements.

Boolean

false

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

-

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"

sizes-config

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

-

split-href

Sets a native navigation link in a split component.

String

""

split-to

Sets a vue navigation link in a split component.

String

""

stateful

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

Boolean

true

stick-to-edges

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

-

text-color

Text color (theme string or HEX string).

String

""

text-opacity

Sets button text opacity.

Number

1

to

The target route of the link. More info here.

String | Object

-

trigger

Action that will triggered when open and close dropdown.

String

"click"

type

Will be used as value for html type attribute.

String

"button"

Events #

NameDescription

click

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

`() => Event`

main-button-click

Emitted when user clicks on main button in split component.

mainButtonClick

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

`() => Event`

update-model-value

The event is triggered when the component needs to change the model. Is also used by v-model

Slots #

NameDescription

default

Dropdown content slot.

label

Content for dropdown button.

Css Variables #

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