ionic-framework/core/src/components/menu-button

ion-menu-button

Menu Button is component that automatically creates the icon and functionality to open a menu on a page.

Properties

Property	Attribute	Description	Type	Default
autoHide	auto-hide	Automatically hides the menu button when the corresponding menu is not active	boolean	true
color	color	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.	string | undefined	undefined
disabled	disabled	If true, the user cannot interact with the menu button.	boolean	false
menu	menu	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	string | undefined	undefined
mode	mode	The mode determines which platform styles to use.	"ios" | "md"	undefined
type	type	The type of the button.	"button" | "reset" | "submit"	'button'

Shadow Parts

Part	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

Dependencies

Depends on

• ion-icon
• ion-ripple-effect

Graph

graph TD;
  ion-menu-button --> ion-icon
  ion-menu-button --> ion-ripple-effect
  style ion-menu-button fill:#f9f,stroke:#333,stroke-width:4px

---

Built with StencilJS