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 | true |
color
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 & Record<never, never> | undefined |
Default | undefined |
disabled
Description | If true , the user cannot interact with the menu button. |
Attribute | disabled |
Type | boolean |
Default | false |
menu
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 | undefined |
mode
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
Default | undefined |
type
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
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.