Skip to main content
Version: v6

ion-menu-button

shadow

Contents

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

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 & Record<never, never> | 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'

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