ion-menu-button
The Menu Button component contains an icon and automatically adds functionality to open a menu when clicked.
See the menu documentation for more information.
Properties
autoHide
Description Automatically hides the menu button when the corresponding menu is not active
Attribute
auto-hide Type
boolean Default
truecolor
Description The color to use from your application's color palette. Default options are:
"primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. Attribute
color Type
"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined Default
undefineddisabled
Description If
true, the user cannot interact with the menu button. Attribute
disabled Type
boolean Default
falsemenu
Description Optional property that maps to a Menu's
menuId prop. Can also be start or end for the menu side. This is used to find the correct menu to toggle Attribute
menu Type
string | undefined Default
undefinedmode
Description The mode determines which platform styles to use.
This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attribute
mode Type
"ios" | "md" Default
undefinedtype
Description The type of the button.
Attribute
type Type
"button" | "reset" | "submit" Default
'button'Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
icon | The menu button icon (uses ion-icon). |
native | The native HTML button element that wraps all child elements. |
CSS Custom Properties
- iOS
- MD
| Name | Description |
|---|---|
--background | Background of the menu button |
--background-focused | Background of the menu button when focused with the tab key |
--background-focused-opacity | Opacity of the menu button background when focused with the tab key |
--background-hover | Background of the menu button on hover |
--background-hover-opacity | Opacity of the background on hover |
--border-radius | Border radius of the menu button |
--color | Color of the menu button |
--color-focused | Color of the menu button when focused with the tab key |
--color-hover | Color of the menu button on hover |
--padding-bottom | Bottom padding of the button |
--padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
--padding-top | Top padding of the button |
| Name | Description |
|---|---|
--background | Background of the menu button |
--background-focused | Background of the menu button when focused with the tab key |
--background-focused-opacity | Opacity of the menu button background when focused with the tab key |
--background-hover | Background of the menu button on hover |
--background-hover-opacity | Opacity of the background on hover |
--border-radius | Border radius of the menu button |
--color | Color of the menu button |
--color-focused | Color of the menu button when focused with the tab key |
--color-hover | Color of the menu button on hover |
--padding-bottom | Bottom padding of the button |
--padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
--padding-top | Top padding of the button |
Slots
No slots available for this component.