It took some experimenting and creating a video, but I finally figured out what the difference is between the three
types for an ion-menu component in the Ionic Framework.
The ion-menu is the Ionic component that implements a side-menu. As with most other Ionic container components, it can contain a header with a toolbar and title, along with some ion-content. The typical side-menu consists of a list of pages, made from an ion-list of ion-items.
The menu can be customized with a variety of behaviors. The
type is where I always get confused.
If you want the menu to obscure the main page content when it opens, you can set its
type attribute to
overlay. With this option, the menu slides in from the side, covering the stationary main content.
Other choices are
push, which causes the page content to slide with the menu. As with
overlay, the menu still slides in from the side, but it pushes the main content out of the way.
Or you can choose
reveal to achieve a similar, but opposite effect from
reveal, the menu content itself is stationary, and appears to be uncovered (or revealed) as the main contents slides out of the way.
Here is an animation I created to show them side-by-side. Pay close attention to which elements move, versus which ones are stationary in each example. It helps if you focus on the word Menu and the title of the main content.
Other ion-menu Options
You can specify what side the menu is on by setting the side attribute to either
end. If you choose
end, make sure your menu icon is on the same side of the main content’s toolbar, or it will look weird.
You can disable swiping the menu on mobile devices by setting
swipeGesture to false.
If you want an item in your menu to close the menu when you select it, be sure to wrap it with an
ion-menu-toggle component. Otherwise, the menu will stay open.
ion-menu-toggle can also be used to open a menu (hence the name toggle). By default, it will automatically hide itself whenever it detects that its menu is disabled or being presented in a split-pane, as we will be doing here. Because of that, if you want it to be visible all the time, be sure to set its autoHide attribute to false.
Do not ask me how long it took me to debug that the first time I forgot it.
That is the basics of the ion-menu. There are other options, but those are the important ones to get you started. These are also the ones I tend to forget.
Do you have any comments, questions, or just want to see more? Please follow me on Twitter and let me know.
Did I make any mistakes in this post? Feel free to suggest an edit.