Basic Navigation Menu

Before you wrap up this volume, 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, but it will be a bit simpler. In Ionic, you create a menu with the ion-menu component.

The ion-menu component

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 options, 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.

Another option is push, which causes 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 also choose reveal to achieve a similar, but subtly different 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 which 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 can look awkward.

You can disable swiping the ...