Add a sidemenu to the Ionic Blank template

Question

Hello!

I created my project using the ionic1 Blank template, but there was a need to add a sidemenu to my project. I could not at all add this menu and would like to know if anyone has done this and could share with us how it was done. As I already have most of it ready it is quite annoying to have to create a new project with sidemenu and go migrating. I appreciate the help of all.

Answer 1

Dude, I already made an app with side menu and it’s really simple.

Take a look at the documentation on him on this link

You just need to use Ionic’s own directives, take a look.

In this example below I took from a project of mine, basically you have:

• Container of Ionic menus: ion-side-menus
• Contents of the container: ion-side-menu-content
• Navigation bar, the app’s top bar: ion-nav-bar
  • Back button "native", responds to browsing history: ion-nav-back-button
  • A container of buttons to be inserted in the top bar: ion-nav-buttons
• Navigation component of the app views that I want to appear inside the menu container
• Out of the content container comes the menus and their contents: ion-side-menu

---

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-dark">
            <ion-nav-back-button></ion-nav-back-button>

            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
            </ion-nav-buttons>
        </ion-nav-bar>

        <ion-nav-view name="appView"></ion-nav-view> // nav view para trocar as telas mantendo o contexto do menu
    </ion-side-menu-content>

    <ion-side-menu side="left">
        <ion-content>
            <ion-list>
                <ion-item menu-close ui-sref="page2">
                    Página 1
                </ion-item>
                <ion-item menu-close ui-sref="page2">
                    Página 2
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>