Button Dropdown #
Component with a button that displays dropdown content when getting clicked. It inherits properties, provided by VaButton and VaDropdown components.
Basic usage #
Just wrap your content with
va-button-dropdown component and it will become available only via click.
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-href props, which are analogues of the
The component can be colored via
You are able to set component's size via
size prop (
large presets are available,
rem values are also suitable).
The component can be disabled via
disabled prop. For the
split state can be disabled both or only one button (via
You can set the dropdown icon and its color via
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
Click inside #
You are able to set up the dropdown to be closed or not after clicking on its content using the
Applied when the link is active. More info here.
Anchor CSS selector instead of passing slot
When set, always appends the relative path to the current path. More info here.
The aria-label of the component
If dropdown doesn't fit viewport, it will be placed automatically to fit viewport
Sets up button background opacity.
Color CSS style
Dropdown will be closed when anchor is clicked
Dropdown will be closed when clicked outside dropdown content and anchor
Sets dropdown content on click behavior.
Color of the component (theme string or
Dropdown will be rendered relative to cursor position
Disables the button.
Disables the dropdown menu.
Exactly match the link. Without this, '/' will match every route. More info here.
Applied when the link is active with exact match. More info here.
Provide a set of sizes for fonts as a global component specific setting.
Makes the button background color a gradient (only if
Hide icon (when
Behavior of the button, when it's being hovered. Can be
Mask color for
Opacity value for
Designates the component as anchor and applies the href attribute. More info here.
Applies a custom icon in the dropdown section.
Sets an icon color.
Anchor CSS selector inside passed slot
If true, dropdown content will be hoverable
Keeps anchor position the same.
Enables keyboard navigation for the component.
Same as native
Sets the icon position to the left.
Indicates that something is loading (spinner icon).
Sets a dropdown state.
Sets the distance between dropdown and anchor.
Applies a custom icon in the dropdown section when the dropdown is opened.
Sets the placement of the dropdown content. More about placements
Named preset combination of component props.
Behavior of the button, when it's being pressed. Can be
Mask color for
Opacity value for
If true, dropdown will be teleported to target ignoring
Doesn't look disabled, but acts like one. Mostly useful for wrapper components.
When set, calls
Adds rounded corners (or make a button fully rounded if only icon is passed).
Specify size for component.
Provide a set of sizes as a global component specific setting.
Divides the button into two parts. This is useful when you have main action (button) and a number of secondary actions (icon + dropdown).
Sets a native navigation link in a split component.
Sets a vue navigation link in a split component.
Add possibility to work with component without setting
Dropdown will not be rendered outside of viewport. It will be moved in opposite direction.
Replaces html tag. This is useful for semantics and also to allow for valid markup in some cases (
Navigation target, More info here.
Element where content will be rendered
Text color (theme string or HEX string).
Sets button text opacity.
The target route of the link. More info here.
Action that will triggered when open and close dropdown.
Will be used as value for html
Emitted when user clicks on button.. The event argument is:
Emitted when user clicks on main button in split component.
Emitted when user clicks on main button in split component.. The event argument is:
The event is triggered when the component needs to change the model. Is also used by
Dropdown content slot.
Content for dropdown button.
Css Variables #