MenuToggle
[menuToggle]
[menuToggle]
The menuToggle
directive can be placed on any button to toggle a menu open or closed.
If it is added to the NavBar of a page, the button will only appear
when the page it's in is currently a root page. See the Menu Navigation Bar Behavior
docs for more information.
Usage
A simple menuToggle
button can be added using the following markup:
<button ion-button menuToggle>Toggle Menu</button>
To toggle a specific menu by its id or side, give the menuToggle
directive a value.
<button ion-button menuToggle="right">Toggle Right Menu</button>
If placing the menuToggle
in a navbar or toolbar, it should be
placed as a child of the <ion-navbar>
or <ion-toolbar>
, and not in
the <ion-buttons>
element:
<ion-header>
<ion-navbar>
<ion-buttons start>
<button ion-button>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Title
</ion-title>
<ion-buttons end>
<button ion-button (click)="doClick()">
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Similar to <ion-buttons>
, the menuToggle
can be positioned using
start
, end
, left
, or right
:
<ion-toolbar>
<button ion-button menuToggle right>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Title
</ion-title>
<ion-buttons end>
<button ion-button (click)="doClick()">
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
See the Toolbar API docs for more information on the different positions.
Instance Members
ngAfterContentInit()
Sass Variables
Property | Default | Description |
---|---|---|
$menu-width |
304px |
Width of the menu |
$menu-small-width |
$menu-width - 40px |
Width of the menu on small devices (under 340px) |
Property | Default | Description |
---|---|---|
$menu-ios-background |
$background-ios-color |
Background of the menu |
$menu-ios-box-shadow-color |
rgba(0, 0, 0, .25) |
Box shadow color of the menu |
$menu-ios-box-shadow |
0 0 10px $menu-ios-box-shadow-color |
Box shadow of the menu |
Property | Default | Description |
---|---|---|
$menu-md-background |
$background-md-color |
Background of the menu |
$menu-md-box-shadow-color |
rgba(0, 0, 0, .25) |
Box shadow color of the menu |
$menu-md-box-shadow |
0 0 10px $menu-md-box-shadow-color |
Box shadow of the menu |
Property | Default | Description |
---|---|---|
$menu-wp-background |
#f2f2f2 |
Background of the menu |