Basic Navigation Menu

Before we wrap up this chapter, I want to add a menu to make it easier to navigate between the home page and the roster page. The menu will mostly look and act like the one from the guided tour from chapter one, but it will be a bit simpler. In Ionic, you create a menu with the IonMenu component.

The IonMenu component

The IonMenu 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.

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 cause the page content to slide with the menu. The menu still slides in from the side, pushing the main content out of the way.

You can choose reveal to achieve a similar, but opposite effect from overlay. With reveal, the menu content itself is stationary, and appears to be uncovered as the main contents slides out of the way.

You can specify what side the menu is on by setting the side attribute to either start or 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.

The ion-menu-toggle can also be used to open a menu (hence the name toggle). By default, it will automatically hide itself when 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.

Below are examples of the three different menu types.