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:

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.