Skip to main content

Menu Button

Menu buttons are used to represent a set of actions in a group.

How to use Mwnu Button Widget

Properties

Properties allow you to edit the widget, connect it with other widgets and customize the user actions.

Widget Properties

These properties allow you to edit the Menu Button widget. All these properties are present in the property pane of the widget. The following table lists all the widget properties.

PropertyDescription
labelSets the label of a menu.
menuItemsArray of menu items in the dropdown list. This lets you add/remove/edit a menu item and customize the menu item settings.
DisabledDisables input to the widget.
VisibleControls the visibility of the widget.
Animate LoadingAllows you to control a widget’s animation on the page load.
CompactDecides if the widget is in compact mode.

Binding Properties

These properties allow you to bind your widget with any other widget in queries or JS objects. The following table lists all the binding properties.

Binding PropertiesDescription
labelThis property gets the label value of the widget.
isVisibleThis property indicates whether the widget is visible or not.

Styles

Style properties allow you to change the look and feel of the widget.

StylesDescription
Menu ColorSets the background color of the widget.
Menu VariantSets the variant of the menu button.
Border RadiusAllows you to define curved corners.
Box ShadowAllows you to choose from the available shadow styles.
IconSets the icon to be used for menu button.
PlacementSets the space between items.
Icon AlignmentSets the alignment of the selected icon.

Each menu item can now be customized through a set of properties by clicking on the gear icon.

PropertyDescription
labelSets the label of a menu item.
VisibleControls the visibility of a menu item.
DisabledDisables input to a menu item.
Icon OptionsDescription
IconSets the icon to be used for menu button.
Icon alignmentSets the alignment of the selected icon.
EventsDescription
onClickSets the action to be run when the menu item is clicked. See a list of supported actions.
StylesDescription
Icon colorSets the icon color of menu item
Background ColorSets the background color of a menu item.
Text ColorSets the text color of a menu item.
info

We currently use the icons from Blueprint library. You can see the list of icons here.