Comment on page

Button Menu

A Menu offers a list of actions or functions that a user can access.

Overview
The Button Menu Component allows users to access a menu of options by clicking or tapping a button. It is typically used to give users a quick and convenient way to access various related options or functions.
The Button Menu Component typically consists of a button that, when clicked or tapped, expands to reveal a menu of options. The options may be displayed as a list of items.
Overall, it is valuable for allowing users to access and navigate various options or functions compactly and conveniently.
Changing the Properties
Use menu-items to specify the menu items for the button menu. menu-itemswill be used to define interactions. Use Variant and Icon Name to define the appearance of the button menu element.
Adding Interactions
Interactions define what will happen when users click on menu items. Here are the available Actions for the Button Menu Component:
On Select
Interactions define what will happen when users click on menu items. You can find a list of interactions that are available here.
Styling the Button Menu
You can customize Border Filled Background and Border Filled Foreground color on the Button Menu.
Examples
Setting
Value
Menu Items
Item 1 / Item 2
Label
My Button Menu
Icon Size
Medium
Menu Alignment
Left
Specifications
Attributes
Events
Styling
Name
Type
Description
alternativeText
String
The assistive text for the button menu.
disabled
Boolean
If present, the menu can't be opened by users.
draftAlternativeText
String
Describes the reason for showing the draft indicator. This is required when is-draft is true.
hideDownArrow
Boolean
If present, the small down arrow normaly displayed to the right of a custom icon is hidden. Without a custom icon-name this does nothing.
iconName
String
The name of the icon to be used in the format 'utility:down'. If an icon other than 'utility:down' or 'utility:chevrondown' is used, a utility:down icon is appended to the right of that icon.
iconSize
String
The size of the icon. Options include xx-small, x-small, small, or medium.
isDraft
Boolean
If present, the menu trigger shows a draft indicator.
items
ButtonMenuItem
To specify the menu items for the button menu.
label
String
Optional text to be shown on the button.
menuAlignment
String
Determines the alignment of the menu relative to the button. Available options are: auto, left, center, right, bottom-left, bottom-center, bottom-right. The auto option aligns the dropdown menu based on available space.
nubbin
Boolean
If present, a nubbin is present on the menu. A nubbin is a stub that protrudes from the menu item towards the button menu. The nubbin position is based on the menu-alignment.
title
String
Displays title text when the mouse moves over the button menu.
tooltip
String
Text to display when the user mouses over or focuses on the button. The tooltip is auto-positioned relative to the button and screen space.
value
String
The value for the button element. This value is optional and can be used when submitting a form.
variant
String
The variant changes the look of the button. Accepted variants include brand, bare, container, border, border-filled, bare-inverse, and border-inverse.
Name
Description
select
The event fired when a menu item is selected.
Label
Name
Description
Font Size
Define a font size for the label text
Font Style
Define a font style for the label text
Font Weight
Define a font weight for the label text
Background
Name
Description
Color
Define a background color for the button menu icon
Color Active
Define a background color for the button menu icon when active
Color Hover
Define a background color for the button menu icon when mouse hover
Border
Name
Description
Size
Define a size for the button menu border
Radius
Define a radius for the button menu border
Style
Define a style for the button menu border
Color
Define a color for the button menu border
Color Active
Define a color for the button menu border when active
Color Hover
Define a color for the button menu border when mouse hover
Text/Icon Color
Name
Description
Color
Define a color for the label text
Color Active
Define a color for the label text when active
Color Hover
Define a color for the label text when mouse hover
​

Setting	Value
Menu Items	Item 1 / Item 2
Label	My Button Menu
Icon Size	Medium
Menu Alignment	Left

Name	Type	Description
alternativeText	String	The assistive text for the button menu.
disabled	Boolean	If present, the menu can't be opened by users.
draftAlternativeText	String	Describes the reason for showing the draft indicator. This is required when is-draft is true.
hideDownArrow	Boolean	If present, the small down arrow normaly displayed to the right of a custom icon is hidden. Without a custom icon-name this does nothing.
iconName	String	The name of the icon to be used in the format 'utility:down'. If an icon other than 'utility:down' or 'utility:chevrondown' is used, a utility:down icon is appended to the right of that icon.
iconSize	String	The size of the icon. Options include `xx-small`, `x-small`, `small`, or `medium`.
isDraft	Boolean	If present, the menu trigger shows a draft indicator.
items	ButtonMenuItem	To specify the menu items for the button menu.
label	String	Optional text to be shown on the button.
menuAlignment	String	Determines the alignment of the menu relative to the button. Available options are: `auto`, `left`, `center`, `right`, `bottom-left`, `bottom-center`, `bottom-right`. The auto option aligns the dropdown menu based on available space.
nubbin	Boolean	If present, a nubbin is present on the menu. A nubbin is a stub that protrudes from the menu item towards the button menu. The nubbin position is based on the menu-alignment.
title	String	Displays title text when the mouse moves over the button menu.
tooltip	String	Text to display when the user mouses over or focuses on the button. The tooltip is auto-positioned relative to the button and screen space.
value	String	The value for the button element. This value is optional and can be used when submitting a form.
variant	String	The variant changes the look of the button. Accepted variants include brand, bare, container, border, border-filled, bare-inverse, and border-inverse.

Name	Description
select	The event fired when a menu item is selected.

Name	Description
Font Size	Define a font size for the label text
Font Style	Define a font style for the label text
Font Weight	Define a font weight for the label text

Name	Description
Color	Define a background color for the button menu icon
Color Active	Define a background color for the button menu icon when active
Color Hover	Define a background color for the button menu icon when mouse hover

Name	Description
Size	Define a size for the button menu border
Radius	Define a radius for the button menu border
Style	Define a style for the button menu border
Color	Define a color for the button menu border
Color Active	Define a color for the button menu border when active
Color Hover	Define a color for the button menu border when mouse hover

Name	Description
Color	Define a color for the label text
Color Active	Define a color for the label text when active
Color Hover	Define a color for the label text when mouse hover

Last modified 11d ago