Ionic Menus
The Menu component is the most used Ionic component. It is a navigation drawer which slides left or right from the side of the current view. By default, it slides in the left of the current view, but you can also swipe it in the right direction. The menu can be displayed differently based on the modes. However, it can be changed to any of the available menu types. You can attach any number of menus to the content element.
The Ionic uses a standard <ion-menu> component that enables you to create a side menu for navigation easily. The menu component can be controlled from the templates, or programmatically by using the MenuController. The menu content will be hidden when the menu is closed.
The Menu component contains the following elements
Menu-Button: It is a component which automatically creates the icon and functionality to open a menu on a page.
Menu Controller: It is used to control the menu. It provides the method to display the menu, enable the menu, toggle the menu, and many more. It will take a reference to the menu by the side, or ID. If neither side nor ID passed to it, it would grab the first menu it finds.
Menu Toggle: It is used to toggle a menu open or closed. It is visible only when the selected menu is active. The menu is active when it is opened or closed. If the menu is disabled or presented as a split-pane, it is marked as non-active and <ion-menu-toggle> element hides itself.
Split-pane: It is useful when you want to create a multi-view layout. It allows UI elements to be displayed as the view-port with the increases width. If the device’s screen width is small, the split-pane will collapse, and the menu will be hidden. It is ideal for an app that will be served in a browser and deployed through the app store to mobile phones and tablets.
Create Menu
Let us see how we can create the side menu in the Ionic.
Step 1: First, create the blank Ionic project. By default, this project contains only one page, which is the home page. Now, here we are going to create two other pages, which makes it easy to use a side menu to navigate to other pages. The following commands create pages in your Ionic app.
Step 2: Next, go to the root component, which is app.component.ts. Then, create a function sideMenu(), which contains an array of objects. The array of objects includes the different pages in the project. It also contains the icons and the URL of each page. Now, include the following code snippets.
Step 3: Next, we need to add the <ion-menu> component in the app.component.html file to create a side menu. Add the following code snippets in this HTML file.
In the above code snippets, the <ion-menu> with side= “start” will create a side menu which starts from left to right. It also contains the contentId attribute, which is the Id of the menu.
The line <ion-item [routerLink]=”pages.url” routerDirection=”forward”> where routerLink allows the navigation to the specified url and outerDirection determines the animation that takes place when the page changes.
The <ion-menu-toggle> component is used to open and close the side menu. So when you click on the menu, it will close the side menu automatically.
Step 4: After creating the side menu in the root component, we can open or close it in each page. To do that we need to use the <ion-menu-button> component in the html of each page, that is able to create an icon and functionality to open a menu on each page
Step 5: Now, execute the Ionic project in your terminal. It will give the following output.
If you click on the three blue lines menu button on the top left corner of the screen, it will give the following output.
The following table shows the important methods used in the Ionic menu component.
| SN | Method | Signature | Description |
|---|---|---|---|
| 1. | Close() | close(animated?: boolean) => Promise<boolean> | It closes the menu. If the menu is already closed, or it cannot be closed, it returns false. |
| 2. | isActive() | isActive() => Promise<boolean> | It returns true, if the menu is active. |
| 3. | isOpen() | isOpen() => Promise<boolean> | It returns true, if the menu is open. |
| 4. | Open() | open(animated?: boolean) => Promise<boolean> | It opens the menu. If the menu is already open, or it cannot be opened, it returns false. |
| 5. | setOpen() | setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean> | It is used to open or close the button. It returns false, if the operation is not completed. |
| 6. | Toggle(() | toggle(animated?: boolean) => Promise<boolean> | It is used to toggles the menu. It returns false, if the operation is not completed successfully. |