The <ion-side-menus> directive

It is container for the ionSideMenu directive and the main content. A left-side menu, right-side menu, or both can be added to the layout of your app. This directive/element must have at least two children, one should be an <ion-side-menu-content> directive, which will load the views of the app, and one or more <ion-side-menu>.

The different attributes available to be used with this directive are as follows:

The <ion-side-menu> directive

This directive is the place for side menu content. The side menu list view and other content can be included in this directive.

The following is the usage of this directive:

<ion-side-menu
  side="left"
  width="200"
  is-enabled="shouldLeftSideMenuBeEnabled()">
</ion-side-menu>

This directive has only three attributes: side for defining the side it will slide from, width to set the width of the side menu container, and is-enabled to set an expression/function to evaluate whether the specific side menu should be enabled or not.

The <ion-side-menu-content> directive

This is the container for the main visible content. It can contain <ion-nav-view> to show different views based on the state changes. It is always a sibling to the ionSideMenu directive.

The following is the usage of this directive:

<ion-side-menu-content
  edge-drag-threshold="true"
  drag-content="true">
</ion-side-menu-content>

This directive has two attributes—edge-drag-threshold, which defines whether content drag can be enabled or start below a threshold distance from the edge, and drag-content, which enables whether content inside this directive can be dragged or not.

Other important directives

In order to work with side menus there are some more directives to be used: