Skip to content

[Updated] Ionic 2 – Side Menu and Tabs

Posted in Javascript

Updated 27 January: Ionic 2 Final, like the actual final, version 2.0.0, is here and ready. This article has been updated to reflect this change.

‘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.

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

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.component.ts pretty makes sense out of the box; I didn’t need to add more explanations.

Next, let’s create our app.component.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 Angular 1, 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.ts . Add the following in the tabs.html:

And then tabs.ts

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 same for contact and about pages.

Know that there’s the ionic generate tabs tabName command to generate a page and place under a tab.

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

The autogenerated .ts 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 home, about, and contact pages in our tabs/tabs.ts 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.


Updated Oct 19 21:58 GMT: So Ionic 2 Final release candidates 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.

  • 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.

          • Mike Libby

            I have the same issue with the tabs disappearing. Here’s how to reproduce 1) ionic serve -l 2) select menu item settings or account, tabs DISAPPEAR! 3) select menu item home, tabs REAPPEAR. 4) there is no issue when selecting tabs.

            THIS IS NOT A MENU ISSUES, THE TABS ARE DISAPPEARING WHICH MAKES THIS SOLUTION NOT USABLE.

          • Please, before you go all caps in a attempt to swallow me down, please check the attached video, which shows what the above code does.

            If you don’t get the result in it, make sure you’re using the exact code repository above OR make sure you’re doing it right.

            As and when this thing was done, it was working as seen in video.

          • Mike

            Thanks for your quick response Nkansah!

            This is the behavior that I’m seeing and how I believe your solution is designed to work – When the user clicks on the homepage the tab bar appears. When they click on another menu item the tab bar disappears. When any tab is clicked the tab bar remains visible. I believe this is the behavior in your video too.

            Is there a way that the menu and tab bar can contain the same page so that regardless of where the shared page is clicked the tab bar remains visible? For example, if I place Contact in the menu I would anticipate that the tab bar will remain visible regardless if the menu or tab Contact is clicked.

            For my own test I modified your code so that Contact could be selected as a menu item or tab. As expected, when the tab Contact is clicked the tab bar remains visible. However, when the menu item Contact is clicked the tab bar disappears.

          • Kevin Claveria

            i have the same problem with my application in Ionic 2+.

            The bottom tabs menu disappears when a side menu page is selected. It would be nice to have the tabs menu stay permanently when selecting a page from either menu.

  • 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.

      • james

        Did you manage. Best Regards

        • Nope. Haven’t. Sorry.

          • james

            The side menu in ionic 2 is also not swipable. Do you know how to go about it? Thanks

  • 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

  • Vivek B

    Hi,
    Thanks for the tutorial. I am just learning ionic and your tutorial is good for starters like me.

    I have a question, Is there a way to add submenu in ionic 2? If possible any pointer/suggestion?

    Googling didn’t help much.

  • Gerade Geldenhuys

    Hi Sean

    I have a problem, say you want to navigate from “Tab 2” to another page with a new set of tabs? Is this possible. Mine navigates to the new page, but the navigation and tabs do not update to the tabs on the new page.

    How can i resolve this?

    • I’m yet to try, but you might need to create another tabs page, and navigate to that tabs page, which will also come with its related pages.

  • Kishan Kant Kataria

    hello, your tutorial is awsome its working very well thanks alot for your help, i have need to implement swipeable tabs like in whats app how can we do that in ionic2.

  • Danillo Leão Lopes

    how i picker the actual rootpage in ionic ² i need use backbuttonaction

  • Gregory Steven Venezia

    I went though this tutorial through and through, and for the life of me I can’t seem to get the menu to show up.

  • Luziana dewi

    i have an error

    Runtime Error
    No template specified for component TabsPage

    how to fix it?
    help me please