Skip to main content
Version: v6

ion-menu-button

shadow

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

DescriptionAutomatically hides the menu button when the corresponding menu is not active
Attributeauto-hide
Typeboolean
Defaulttrue

color

DescriptionThe 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.
Attributecolor
Type"danger" ๏ฝœ "dark" ๏ฝœ "light" ๏ฝœ "medium" ๏ฝœ "primary" ๏ฝœ "secondary" ๏ฝœ "success" ๏ฝœ "tertiary" ๏ฝœ "warning" ๏ฝœ string ๏ฝœ undefined
Defaultundefined

disabled

DescriptionIf true, the user cannot interact with the menu button.
Attributedisabled
Typeboolean
Defaultfalse
DescriptionOptional 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
Attributemenu
Typestring ๏ฝœ undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" ๏ฝœ "md"
Defaultundefined

type

DescriptionThe type of the button.
Attributetype
Type"button" ๏ฝœ "reset" ๏ฝœ "submit"
Default'button'

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
iconThe menu button icon (uses ion-icon).
nativeThe native HTML button element that wraps all child elements.

CSS Custom Properties

NameDescription
--backgroundBackground of the menu button
--background-focusedBackground of the menu button when focused with the tab key
--background-focused-opacityOpacity of the menu button background when focused with the tab key
--background-hoverBackground of the menu button on hover
--background-hover-opacityOpacity of the background on hover
--border-radiusBorder radius of the menu button
--colorColor of the menu button
--color-focusedColor of the menu button when focused with the tab key
--color-hoverColor of the menu button on hover
--padding-bottomBottom padding of the button
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the button
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the button
--padding-topTop padding of the button

Slots

No slots available for this component.