Skip to main content

Ionic 2 hide Tabs bar On Specific Tabs

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial, I will show you how you can hide the tabs bar for specific tabs. So by default the tab bar is displayed at the top or the bottom and when any one of the tab is clicked the view is navigated to it, but the tab bar is still displayed. There can be a use case where you would want to hide the tab bar when a specific tab is clicked.


Before going further let me tell you that instead of hiding the tab bar you should focus on making changes to your navigation flow so that you are showing a modal or another page instead of hiding the tab bar.

Having said that, hiding the tab bar is easy so let’s jump right into it.

Step 1)

We will start off by creating a new project. Make sure that you are creating the app using the tabs template. To do that we will run the following command

That’s the only command we will need to execute in the tutorial.


Step 2)

The default app has three tabs in the tab bar by default, namely home, about and contact. Let’s say that we want to hide the tab bar when the user navigates to the about tab. For that, we will need to make changes to the about.ts file which you can find at src\pages\about\about.ts

Open the file and put the following code in it.

Let’s understand what we are doing here. First of all, we are getting the tab bar element and storing it a variable called tabBarElement. Then we are hooking into the NavControllers lifecycle hooks. You can read more on lifecycle events here.

The ionViewWillEnter() method will be called when the view is about to be shown so we are hiding the tab bar by doing = 'none';.

Similarly, we want to unhide the tab bar element when the view is about to leave, we so that using ionViewWillLeave() and we set the display property to flex by doing = 'flex';

By doing just this we are hiding the tab bar effectively,you can stop right here the next step is optional.

Step 3)

We have successfully hidden the tab bar but there is one problem we no longer have any way to go back from the about tab because we have hidden the tab bar. The hardware back button will work but what if you want to have a back button in the navbar.

We can add a back button manually that will show up next to the page title of the about page. We add the button in the about.html file as follows


As shown we are adding the button with arrow-back icon. Notice that the button has menuToggle attribute applied to it. This will prevent the button to have any color. Also we are hooking up the takeMeBack() function to the click event of the button.


Step 4)

We have created the button, now it’s time to add the click functionality to it. We do that by adding the following to the about.ts file.

As tabs have a zero-based index,  we are navigating to the first tab by passing 0 in;.


And just like that, we have hidden the tab bar on a specific tab.


As you saw hidden tab bar for specific tabs is really simple. But as I mentioned you would be better off creating a separate page or a modal rather than hiding the tabs. Also, make sure that you are handling the history of the tabs properly because each tab under the tab bar has it’s own navigation stack that needs to be dealt with. But know how to hide tab bar is one of those tricks that is handy to have around


Download Code:

Code Will Be Sent Via Email


Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

Consider Subscribing / Donating
Subscribe To Mailing List
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

  • Riaz Uddin Masum

    Very Good

  • Luís Siza Jó

    Its work, thanks

  • Danillo Leão Lopes

    It’s not original code!

  • Ahmad Zulhilmi

    Thanks. It works. I only follow step 1 and 2.

  • Burhanuddin Lokhandwala

    we can use this…

    tabsHideOnSubPages: true

  • Bryan Hughes
  • Bryan Hughes
    • you can hide it using CSS. The margin that you see is not because of the tabs. But some other component. Check you view code and hide whatever is necessary using “dispaly=none”.

    • Omer Hussain

      Having same issue … Did you manage fixed it with css?

      • Bryan Hughes

        Try put
        .scroll-content {
        margin-top: 60px !important;

        • Omer Hussain

          Thanks worked like a charm … Just need to use the margin-bottom though 🙂


          • Bryan Hughes

            Perfect, you’re welcome!

    • Jacobo de la Rosa

      If your problem is on android, this could help you. In the ionic config.xml, add the following lines in the platform name=”android” tag.

      …the rest of the android configs…

      This will prevent the keyboard to push up everything and simple overlay the keyboard on the content. So the behaviour will be the same or similar to the ios keyboard

  • Omer Hussain

    Is there any way we can pass any parameter in;?

    Something like this: ,{segment: ‘Store-Front’});


    Sir,I had error TypeError: Cannot read property 'style' of null how to fix this

    • Can you check if this.tabBarElement = document.querySelector(‘’); gets a value or not. Just console log and see if you get the element or not.

      • VEMO MINE

        Sir, Thanks for your new method, but Its not work for Ionic-3 ,I’m always read your this website ,Please update and keep it up for Ionic-3,sir please upload new tutorial ,its help fully for beginner <3

        • The tutorial works on IONIC 3 and has been updated. You can download the code and test it. If you want upload your code to GitHub or ask a question on StackOverflow and I will be happy to answer.

%d bloggers like this: