Skip to content

Ionic 2 – Side Menu and Tabs

Posted in Javascript

Updated Oct 19 21:58 GMT: So Ionic 2 Final was released recently, and the adrenaline rush to get things building is high. Although late to the party, Ionic 2 Side Menu and Tabs repository has been updated to reflect how to create Side Menu and Tabs using the latest of Ionic 2. See the package.json file to learn the exact dependencies used.

Updated Aug 20, 2016. 01:10 GMT: The Ionic2-sidemenu-tabs repository has been updated to Ionic 2 beta.11 which goes all-out using Typescript. Check the ‘Typescript’ branch for the update. The article below has been updated to include the changes.

NOTE: The article below was written with this project repository in mind. See the other branches for recent changes.


‘The future is here!’, they say. In this case, Ionic 2 is ready and awesome. In this post, I won’t waste your time telling the awesome features Ionic 2 comes with, which you all probably know and love. If not, you wouldn’t be here to get your head around how to setup Ionic 2 Side Menu + Tabs.

Remember: The Ionic 2 Side Menu Tabs repository on Github are into 3 branches. Make sure you switch to the right branch, or after cloning, you checkout to the right branch

Depending on how complex you wish you app to be, having both Tabs and Side menu can be a useful experience for your users. The power of Side Menu and the easy figuring of tabs are a strong combined force for good, giving you more room to display your content.

Why am I still typing? I guess ‘am excited!

What we want and What we’ll do

It is simple. We want an Ionic 2 project with Tabs as well as a side menu. What will we do? Exactly that.

So, let’s get going.

Start Ionization

Install Ionic

Are you waiting for me to tell you how to install Nodejs or NPM? Okay, keep waiting…

We want to use Ionic version 2, so in your terminal, let’s get that up and running. Issuing the terminal command below walks through the end-to-end process of setting up the project, and installing all the Nodejs dependencies required. When the prompt returns, you’re good to simply enter the project folder directory and start the Hadron Collider. But… We won’t be starting the collider yet. Let’s finish with all, and we’re good to kick the collider to do its part.

We will be building the project from scratch, to help you get a feel for the entire process. That helps for a better understanding, sometimes.

Side Menu

First of all, with our project properly initialized, and changed into the SidemenuTabs directory, we want to create our side menu first.

By the way, the image below represents the default folder structure from which we’re going to build this sidemenutabs project on. This is pretty much what you should get after running the above commands up till now

 

folder structure ionic 2
Folder Structure

If you’ve seen how the ‘Tutorial’ template from Ionic handles the Side Menu, that’s exactly what we want to achieve.

 

 

Bring on the particles…

From here onwards, I will be giving the code snippets and provide short comments in them as to where to place the code and why

I’m sure the app.js pretty makes sense out of the box; I didn’t need to add more explanations. You might have seen the use of @app, export class MyApp and another kinda new-looking syntax. I didn’t add them. They’re the new cool kids you and I are gonna use. Check out the many changes coming through ES6 and implemented in Angular 1.5 -> and Ionic 2.

If you’re using Ionic 2 Beta.11 upwards, your app.ts (not app.js anymore) will look like this:

Quick notes to keep in mind:

  • We’re no longer doing the static get things. Just rock and roll when using TypeScript
  • Instead of let nav = this.app.getComponent('nav'); we do: this.nav.push(page.component); after we’ve referenced the NavController using the @ViewChild pointing to the id called nav on the rootPage in the template. See the new changes in the repository for clarification.
  • I did not use the setRoot function as it causes the tabs to not show. I’m open to ideas why that’s happening, and if there’s a fix, please lemme know.

Yeah! I know, they’re fancy, but it they get the job done, it is a win-win, right?

Next, let’s create our app.html file to handle the Side Menu.

If you’re wondering what exactly is the gibberish thing going there in the ngFor area, again, I’m not responsible for that. In conventional AngularJS, it could be written as:

So far up till now, why haven’t we tested what’ve done in the browser, are we on the right track? Why not! The Lake Wobegon Effect isn’t having an ‘effect’ on me now. Take it easy, dude!

Let’s create the tabs central page to handle the smooth navigation between each tab.

Makes sense, we’re letting Ionic help with creating a page called Tabs. It does a heavy lifting for us.

We are supposed to have the tabs folder in the pages directory. In the tabs folder, you’ll find tabs.html and tabs.js . Do the following in each file:

Now it is time to generate our tabs pages. And that’s the fun part because it is the laziest part. Run the command below in the SidemenuTabs project root.

Do so for tabtwo and tabthree. I know there’s the ionic generate tabs tabName command, but will do it the hard way, shall we?

Let us see what the tabone/tabone.html and tabone/tabone.js files will contain. Nothing special, just the autogenerated content, with a slight addition especially to the .html file

The autogenerated .js file should be fine for our needs as it points to the .html file appropriately, and doesn’t do anything.

Remember we had imported all the tabone, tabtwo, and tabthree .js’s in our tabs/tabs.js already. So we’re good to go.

Who did you give the ignition key of the Hadron Collider to? It is much needed now. Enter the root directory of the SidemenuTabs project, and run

The -l or --labs is for fun. If all went well, you should see something like this:

The -labs is a pretty neat option to Ionic 2 (available in ionic too?), and ever since I knew of it, use it very often. Simulates iOS and Android side by side. For the Linux distros who can’t build iOS app, at least, the Labs will offer the opportunity to get a better understanding of how their app will fare on other platforms.

Sidemenu Tabs ionic 2
Sidemenu Tabs ionic 2

Project code available at: https://github.com/seanmavley/ionic2-sidemenu-tabs. See the ‘Typescript’ branch for the update.

 

  • Pingback: Updated: Ionic 2 Forms - Getting Started on the Right Foot - Blog()

  • nadreal

    Is it possible to always have tab menu, even when you select page from side menu?

    • You mean, when you change to a different page using the sidemenu, you want the sidemenu still remain opened?

      Change this:

      to

      in the openPage() function

      • Juan Carlos

        Hello, how can I do the tabs bar stay static always?

        • The tabs bar already stays static, so I’m confused what you want to accomplish.

          • Juan Carlos

            Hi, I mind, when I navigate from slide menu, the tabs disappear, I want that tabs doesn’t disappear

          • Okay, you’re referring to the sidemenu, right? If you want it to stay permanent, you don’t have to call the

            Just simple as that.

          • Juan Carlos

            Hi, I need that tabs permanently showing always. It’s posible?

          • Adusumilli

            Hi, I have removed the this.menu.close() so it prevents me from closing side menu when clicking the menu item. but when I clicked on the main content the side menu is closing. How can I make The side menu not to be dismissed with tap outside of the menu in ionic 2.

  • Dдvid G-шнззz Цснеиид

    Please the splash screen shows then shows white screen after, what do I do?

  • Leonardo Benedeti

    Nkansah, do you tested this code for swipe tabs ? In android the tabs are swipeables but in your code, and default config cordova is impossible. You have any idea about this ?
    sorry my english, i’m brazilian and dont have pratice.

    • The last time I tried, ionic tabs are not swipable. Making tabs swipable is on the roadmap though.

  • Sergey Sob

    very cool, but if you want to write menu.html as standalone template, and import it in your app, to be accessible from main template – how do you do it?
    i mean like custom component like u write or something like that in your home.html, and it is there ( like you would create a component in sencha touch, etc)

  • exceptions one

    Hi ,
    As we can see above video , when i click menu’s option setting then tabs is going to be hide , but i want to get all tabs visible. So, what can we do in this case ?

    Thanks

    • There’s no secret to creating a tabs page. If you want the settings page to be of tabs, just replicate the current tabs into the settings page, pointing each tab page to the respective component.

  • Adusumilli

    Hi, For resolutions more than 768px can we make the side menu open by default in ionic 2 like in ionic 1.

    • I haven’t come across such a feature in Ionic 2 yet. Will love to know how you go about it.

      • Adusumilli

        I am also waiting for this feature in Ionic 2. If u acheived it please let me know.
        I need the side menu to be opened when resolution is more than 768px. But when tapping or clicking outside the side menu closes the side menu.

  • Veatrice Glenn

    Thanks for tut… I’ve noticed for all the examples I’ve seen on internet… in the app.components the rootPage is always set to TabsPage. I’m assuming this is how it hooks the tabs to each page – b/c there’s no reference to the tabs on the pages? However, my rootPage is a Login page. I do have a tabs page… and it’s pointing to the several pages, ie.. a feedPage.. however when I go to my feed page, the tab is not showing up. How do we hook the tabs page to display on other pages when it’s not the set as rootPage?

    • When you call the FeedPage, point it to the FeedPageTabs, which has each FeedPage1, FeedPage2 etc as the tabs.

      Try using the tabs generator and see how the code is structured, then you add the entry point to the Tabs AS your rootPage, in this case, the arbitary page, namely, FeedPage

      • Veatrice Glenn

        I would have never figured this out.. but it immediately made sense as I read your answer. I did it, and it works! I was stuck on this for several hours before finding your site… Thanks again

  • Daniel Albuquerque

    Awesome!

  • I’m currently creating with different approach. Start with sidemenu template then add tabs in one of menu content which require a tabs. Thanks, you’re inspiring me