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 īŊ 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â
- 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.