# Create a side menu for a page

**URL:** <https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937>\
**Category:** ionic-v3\
**Created:** [September 11, 2017, 12:36pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937 "2017-09-11T12:36:34Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![tylkomat](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tylkomat](https://forum.ionicframework.com/u/tylkomat)\
**Post date:** [September 11, 2017, 12:36pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/1 "2017-09-11T12:36:34Z")

</div>

All the examples create the menu in the app.component.html which is global. Is it possible to create a local menu for a lazy loaded page?

---

<div class="post-metadata">

**Author:** ![temohpab](https://avatars.discourse-cdn.com/v4/letter/t/f0a364/32.png) [@temohpab](https://forum.ionicframework.com/u/temohpab)\
**Post date:** [September 11, 2017, 12:41pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/2 "2017-09-11T12:41:17Z")

</div>

Maybe this way?

```auto
<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button ion-item (click)="openPage(homePage)">
        Home
      </button>
      <button ion-item (click)="openPage(friendsPage)">
        Friends
      </button>
      <button ion-item (click)="openPage(eventsPage)">
        Events
      </button>
      <button ion-item (click)="closeMenu()">
        Close Menu
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav id="nav" #content [root]="rootPage"></ion-nav>

```

---

<div class="post-metadata">

**Author:** ![Sidharth\_1999](https://avatars.discourse-cdn.com/v4/letter/s/d78d45/32.png) [@Sidharth\_1999](https://forum.ionicframework.com/u/Sidharth_1999)\
**Post date:** [September 11, 2017, 12:42pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/3 "2017-09-11T12:42:15Z")

</div>

Would this be in the page.html or app.html?

---

<div class="post-metadata">

**Author:** ![temohpab](https://avatars.discourse-cdn.com/v4/letter/t/f0a364/32.png) [@temohpab](https://forum.ionicframework.com/u/temohpab)\
**Post date:** [September 11, 2017, 12:43pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/4 "2017-09-11T12:43:36Z")

</div>

Edit: Sorry, i think you nedd to do in app

> [@How to add SideBar Menu to my existing ionic project](https://forum.ionicframework.com/t/how-to-add-sidebar-menu-to-my-existing-ionic-2-project/56481):
>
> I am already working in an Ionic2 project, but I am facing difficulties in adding a sidebar menu. Currently my code looks like the following, when I click on the menu icon, the menu seems to show behind the navbar and the whole view itself. I believe the way I am following is a wrong way to implement the sidebar. Home.html \<ion-header\> \<ion-navbar mainPageNavBarColor\> \<button menuToggle start\> \<ion-icon name="menu"\>\</ion-icon\> \</button\> \<ion-…

Maybe can be done other way

---

<div class="post-metadata">

**Author:** ![Sidharth\_1999](https://avatars.discourse-cdn.com/v4/letter/s/d78d45/32.png) [@Sidharth\_1999](https://forum.ionicframework.com/u/Sidharth_1999)\
**Post date:** [September 11, 2017, 12:45pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/5 "2017-09-11T12:45:15Z")

</div>

What does the documentation mean when it says :

‘The menu element should be a sibling to the app’s content element’

---

<div class="post-metadata">

**Author:** ![temohpab](https://avatars.discourse-cdn.com/v4/letter/t/f0a364/32.png) [@temohpab](https://forum.ionicframework.com/u/temohpab)\
**Post date:** [September 11, 2017, 12:47pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/6 "2017-09-11T12:47:30Z")

</div>

Maybe here we could find another solution

> **[Ionic Framework](https://ionicframework.com/docs/api/components/menu/Menu/)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

---

<div class="post-metadata">

**Author:** ![tylkomat](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tylkomat](https://forum.ionicframework.com/u/tylkomat)\
**Post date:** [September 11, 2017, 12:53pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/7 "2017-09-11T12:53:52Z")

</div>

If it has to be inside app.html then it is global. So probably it is not possible to have a menu for just one page

---

<div class="post-metadata">

**Author:** ![Sidharth\_1999](https://avatars.discourse-cdn.com/v4/letter/s/d78d45/32.png) [@Sidharth\_1999](https://forum.ionicframework.com/u/Sidharth_1999)\
**Post date:** [September 11, 2017, 12:56pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/8 "2017-09-11T12:56:05Z")

</div>

As far as I know, I don’t think you can add a local menu for a page, the documentation clearly says :

“The menu element should be a sibling to the app’s content element”

However, if you’re looking to have specific menus open up in different pages, here’s how I would do it -

1)Create multiple menus in app.html and attach them to ion-nav as usual  
2)Give each menu an id  
Ex : page1menu, page2menu, etc  
3)Then add a button in that page whose click event links to a function in that page’s .ts file to open that page’s menu :

.html

```
 <button ion-button (click)="openPage1Menu()">Open Page 1 Menu</button>

```

.ts

```
import {MenuController} from 'ionic/angular';

export class Page1 {
     
    constructor(public menuCtrl : MenuController){
    }

    openPage1Menu(){
        this.menuCtrl.enable(false, page2menu); //disabling all other menus
        this.menuCtrl.enable(false, page3menu);
        this.menuCtrl.enable(true, page1menu);
        this.menuCtrl.open(page1menu);
    }
  
}

```

Adding an implementation like this in each page would allow you to open different menus depending on the page you’re in. Note that all other menus have to be disabled before you open a specific menu.

I guess this is how I would do it. Open to other more effective solutions!

---

<div class="post-metadata">

**Author:** ![tylkomat](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tylkomat](https://forum.ionicframework.com/u/tylkomat)\
**Post date:** [September 11, 2017, 1:04pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/9 "2017-09-11T13:04:35Z")

</div>

Yes this is also how the example on the components page does it, but it feels does not feel clean. The point of components or lazy loaded pages is that I have everything in one place. If I drop that page (and the link to it) nothing should break.

In my case it is a table of contents to quickly jump inside a page. I don’t see why I should add to the app startup time something that the user may never visit.

---

<div class="post-metadata">

**Author:** ![Sidharth\_1999](https://avatars.discourse-cdn.com/v4/letter/s/d78d45/32.png) [@Sidharth\_1999](https://forum.ionicframework.com/u/Sidharth_1999)\
**Post date:** [September 11, 2017, 1:21pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/10 "2017-09-11T13:21:42Z")

</div>

Yeah honestly, I’ve never been impressed with Ionic 2’s implementation of a menu. I find it unnecessarily complicated. It would have been a gazillion times easier if you could just add a menu component to a page like any other component. But now you have to set it up globally in app.html and then make the pages that use the menu root pages just so you can see the menu toggle button.

It was really a pain implementing the menu in my application. I hope the framework comes up with a simpler solution soon.

Let me know if you figure out an easier way to achieve this use case.

---

<div class="post-metadata">

**Author:** ![tylkomat](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tylkomat](https://forum.ionicframework.com/u/tylkomat)\
**Post date:** [September 11, 2017, 1:24pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/11 "2017-09-11T13:24:40Z")

</div>

I currently use a fab button that opens a popover. I was looking for the menu because the popover sometimes opens outside of the screen, but now I just force the position

---

<div class="post-metadata">

**Author:** ![Sidharth\_1999](https://avatars.discourse-cdn.com/v4/letter/s/d78d45/32.png) [@Sidharth\_1999](https://forum.ionicframework.com/u/Sidharth_1999)\
**Post date:** [September 11, 2017, 1:25pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/12 "2017-09-11T13:25:58Z")

</div>

Can I see how you did the popover implementation? Might be useful to my project

---

<div class="post-metadata">

**Author:** ![tylkomat](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tylkomat](https://forum.ionicframework.com/u/tylkomat)\
**Post date:** [September 11, 2017, 1:52pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/13 "2017-09-11T13:52:31Z")

</div>

Inject the PopoverController into your page

```auto
import { IonicPage, PopoverController } from 'ionic-angular';
import { Component } from '@angular/core';
@IonicPage()
@Component({
  selector: '...',
  templateUrl: '...'
})
export class MyPage {
  // inject PopoverController
  constructor(public popoverCtrl: PopoverController) {}
  presentPopover(ev): void {
    let popover = this.popoverCtrl.create('PopoverPage', {
      // dynamic data to display
    }, {
      // class to force positioning
      cssClass: 'my-class'
    });
    popover.present({ev; ev});
  }
}

```

In the page html I have the fab button, add whatever you like to open that popover:

```auto
<ion-header>
  ...
</ion-header>
<ion-content>
  <ion-fab top right>
    <button ion-fab mini (tap)="presentPopover($event)">
      <ion-icon name="list"></ion-icon>
    </button>
  </ion-fab>
</ion-content>

```

Then create the page that you want to present, in my example it is named `PopoverPage`. The html content of that page should not be wrapped in `ion-content`. In my case it is just a list:

```auto
<ion-list>
  <ion-list-header>table of contents</ion-list-header>
  ...
</ion-list>

```

---

<div class="post-metadata">

**Author:** ![temohpab](https://avatars.discourse-cdn.com/v4/letter/t/f0a364/32.png) [@temohpab](https://forum.ionicframework.com/u/temohpab)\
**Post date:** [September 11, 2017, 2:09pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/14 "2017-09-11T14:09:41Z")

</div>

You can’t do that with modals?

---

<div class="post-metadata">

**Author:** ![tylkomat](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tylkomat](https://forum.ionicframework.com/u/tylkomat)\
**Post date:** [September 11, 2017, 2:13pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/15 "2017-09-11T14:13:05Z")

</div>

You can, but modal is just for a message (text) it does not display another component/page.

I have interaction inside, like then you tab a toc-item the main view scrolls to that item.

---

<div class="post-metadata">

**Author:** ![temohpab](https://avatars.discourse-cdn.com/v4/letter/t/f0a364/32.png) [@temohpab](https://forum.ionicframework.com/u/temohpab)\
**Post date:** [September 11, 2017, 2:14pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/16 "2017-09-11T14:14:17Z")

</div>

Are you sure? i implemented the last week a search bar in a modal and you can navigate to another components or pages

---

<div class="post-metadata">

**Author:** ![Sidharth\_1999](https://avatars.discourse-cdn.com/v4/letter/s/d78d45/32.png) [@Sidharth\_1999](https://forum.ionicframework.com/u/Sidharth_1999)\
**Post date:** [September 11, 2017, 2:14pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/17 "2017-09-11T14:14:30Z")

</div>

I’ve used a modal like a page before. If i’m not mistaken an alert only shows a message

---

<div class="post-metadata">

**Author:** ![tylkomat](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tylkomat](https://forum.ionicframework.com/u/tylkomat)\
**Post date:** [September 11, 2017, 2:15pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/18 "2017-09-11T14:15:36Z")

</div>

My bad, you are right. I was confusing modal with alert. Yes probably can be used in the same way

---

<div class="post-metadata">

**Author:** ![tylkomat](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tylkomat](https://forum.ionicframework.com/u/tylkomat)\
**Post date:** [September 11, 2017, 2:17pm UTC](https://forum.ionicframework.com/t/create-a-side-menu-for-a-page/104937/19 "2017-09-11T14:17:21Z")

</div>

Would be great if menu would work in a similar way.