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 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 whenever it detects that its menu is disabled or being presented in a split-pane, as you 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.

Below are examples of the three different menu types.

There is more to the menu, but those are the basics. You will build one in this lesson.