Skip to content

ptcs-menu-button

Visual

Overview

A menu button is a button that opens a menu.

Usage Examples

Basic Usage

<ptcs-menu-button items="[[items]]"></ptcs-menu-button>

Component API

Properties

Property Type Description Default Triggers a changed event?
disabled Boolean Disables the button false No
offset Number The distance between the button and the menu edge. 8 No
openOnHover Boolean Determines whether hovering the button will trigger the menu. false No
buttonVariant String Set a button variant. "tertiary" No
icon String Sets an icon. "cds:icon_more_vertical" No
iconSrc String Sets an icon source. No
contentAlign String Align the label in button to the left, right or center. "center" No
buttonMaxWidth Number Set a maximum width for the button widget. No
label String The text label in button. No
tooltip String The tooltip that appears when hovering over the button No
tooltipIcon String The icon for the tooltip No
displayIcons Boolean When false, icon data is ignored by the menu, and no icons are rendered. false No
allowMissingIcons Boolean When allowMissingIcons is false, and displayIcons is true, a default icon will be assigned to any Menu Item that has no icon data associated with it. false No
menuMaxWidth String Sets the maximum width the menu can be reduced to. May be defined by a custom value, in pixels. If set to "auto", the menu will assume the width of its widest menu item. "auto" No
menuMinWidth String Sets the minimum width the menu can be reduced to. May be defined by a custom value, in pixels. If set to "auto", the menu will not become narrower than its widest menu item. "auto" No
maxMenuItems String Defines the maximum number of visible dropdown menu and submenu items. 5 No
iconPlacement String Sets the tooltip icon image on the left or right of the text label if there is any. "right" No
menuPlacement String Sets the placement of the menu in relation to its button. The property lets you choose to place the menu on the top/bottom(vertically) or left/right(horizontally) of the button. The exact alignment of the menu will be auto adjusted based on the menu button’s position on the page. Options: "vertical" / "horizontal". "vertical" No
menuIconSize Number Setting the size will set the width and the height of the icon No

Events

Name Data Description
action ev.detail = { item } Generated when the user clicks on a "leaf" in the menu tree (an item without a submenu)