ion-menu-button

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

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	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'

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