How to Combine Ionic Side Menu and Tabs Navigation

Let's build an Ionic app and combine Ionic Side menu with Tabs and highlight the right items!
🔥 Learn to build mobile apps with Ionic in my Ionic Academy: ionicacademy.com/
💎 Get the Built with Ionic Book: builtwithionic...
#############################
Want to read instead of watch? Here's the full tutorial: devdactic.com/...
Want more tutorials? Here you go! devdactic.com/
Just getting started? Take my 7 Day Ionic Crash Course: ionicacademy.c...
#############################
My Private Daily Vlog: / @solopreneuradventures...
You can also find me
on / schlimmson
on / devdactic
on / simongrimm_
#############################

[@heartpyrate]

Indeed very well explained and you one of the few i seen, who can actually just type in the entire code just like that.. too good :)

[@whyneil]

There seems to be a problem for pages in the sidemenu that are not part of the tabs. How do you get the tabs on sidemenu pages that are not part of the tabs?

[@manwaicheuk3045]

Thanks for ur really good tutorial I have a question Can i click Special page then the bottom tab will not disappear? Thanks~

[@nubecaz]

Tu muy bien , había probado directamente con la app que creaba con ionic start sidemenu pero no me funcionaba, ya con tu ejemplo ya todo bien muchas gracias.

[@kingandrew1024]

Thank you Simon, it was very well explained

[@leahluecking3051]

ionic 3 menu example

[@dianabanana3596]

I followed the tutorial exactly and my tabs(tab 1 and tab 2 ) do not show at the bottom of the page even if i can see It's navigated to the tabs page. help

[@abahkonan6041]

thank you very much for this lesson on tabs. I would like to learn how to do facial recognition with ionic

[@chethannp5981]

Hi Simon, Can you please make a video on how to use routes, passing params, retrieving it, lifecycle events for Ionic 4 please. super confused with the new navigation approach :(

[@peterborinski]

Hi Simon! Great tutorial thank you very much, works like a charm. Unfortunately this tutorial will not work for long. I get the console warning: (getActiveChildNav) is deprecated and will be removed in the next major release. Use getActiveChildNavs instead. Could you update your tutorial with getActiveChildNavs please? :)

[@babbintandukar9959]

yeah now it says getactivenavchild is not a function

[@spidernethtoys7522]

Hi Simon, thanks for sharing this tutorial!

[@Myrreina_]

I am find a problem, this is a "ViewChild is not defined". How the solution about my problem sir?

[@m8_981]

dude ur a legend! thanks so much for the effort!!!

[@galaxies_dev]

Thank you so much!

[@chill2469]

Mantul pak eko .. lanjutkan tutorial nya. i like this tutorial . ty

[@HazrulAiman]

mantul boss

[@hakangoker9712]

I was wondering why we need this // Set the active tab based on the passed index from menu.ts this.myIndex = navParams.data.tabIndex || 0; since we can set it active with this this.nav.getActiveChildNav().select(page.index); I assume this will select the tab and make it active.

[@andaeiii]

Hello simon, i just went thru your tutorial and its cool, but i'm trying to create an ionic app, that utilizes the right and left side menu's, the left side menu shows on all the pages, but the right side menu shows on only one of the pages, so you have two menus on that page, one on the left (the default) and the one on the right.. but i dont know how to go about it... thanks.

[@lingeshwaran123]

Im new in ionic i have a error in No component factory found for Tab1Page. Did you add it to @ NgModule.entryComponents

[@fxess9468]

Thank you, very nice tutorial!!!

[@lucassrt007]

what if I only have 2 buttons not a menu? getActiveChildNav() will this still work?

[@Wulanmaulida30]

at special page can u put tabs like another page tab1 and tab2? i want to put tabs in every page on side menu

[@King_Eke]

Hey man, great video.. but assuming you actually created a real login page, when you create a log out button that'll log the user out and nav back to the login screen.. then tabs still go with it and show on the login screen.. and the user can still access those other pages.. without being logged in

[@arunsainaik6301]

hi Simon...can u plz name which visual studio editor theme you are using??

[@heavybitentertainment6718]

thanks for this tut. why is it that my side menus and tabs cant coexist? my code looks exactly like u've explained here. when i run the app the first time, both side menus and tabs show fine. But when i refresh the app, the side menus disappear.always have to restart the component for the side menus to display again!! I later realize that the behavior is the same even if i build run the app on a physical device! What could be the problem?

[@mohameddahshan9486]

thank you..

[@galaxies_dev]

Welcome!

[@nazehabel]

Thanks simon for the tutorial... meanwhile i have a challenge in getting the app runin as i keep getting Error: No component factory found for LoginPage. Did you add it to @NgModule.entryComponents? Error: No component factory found for LoginPage. Did you add it to @NgModule.entryComponents? and the styling seems not to be working infact

[@sweetvibrations]

Excellent tutorial

[@LeandroLima-ew7tl]

Exatamente o que eu estava procurando... Tks a lot... :)

[@pj7876]

can u show the tabs in standed alone page?

[@marwanyousry1033]

Hello Simon what should I do if I want to show tab-bar in the special page, I need serious help, please.

[@casvantrierum1894]

Did you find a solution for this? Beacause I need this too!

[@amanullahaman8750]

Thank you sir. It's awesome. It save my day.

[@galaxies_dev]

Happy to help Amanullah!

[@Sarah_42]

Great video! Thanks a lot!!!!

[@tonocampa7254]

Bro! How can I open a link in the side menu?

[@charlesleybaldemor4413]

How to change icon when I click the icon of the tab?

[@lilililliilil]

Thank you Simon! I have one question which is how to hide tabs after logging out? Instead of using getRootNav()

[@galaxies_dev]

Just set a new RootPage (perhaps a LoginPage) that is not included in a Tab Bar interface!

[@lilililliilil]

Simon Grimm I solved the problem a few days ago. Thanks for the reply me back:)

[@seferderya2318]

a great tutorial, thx!

[@bikerhunt]

Hi Simon you are doing good boss please make side bat with submemu i think i dind't get this kind of video on youtube we need all this please will you tech us

[@jhanreygonzales1510]

Is there a github link or something?

[@rishabhkumar8376]

Can u please show me how to add submenu with submenu

[@galaxies_dev]

Take a look at this perhaps: ionicacademy.com/ionic-side-menu-with-sub-items/

[@desmopassie]

Very good, well explained, thank you!

[@gabrielsoares7516]

Nice your video ... Why not release the code version in github? #imdev

[@farooqsheikh8707]

Thanks but how to keep tabs on special page also, without special page in tabs? I need serious help please.

[@jhanreygonzales1510]

@Farooq The special page is designed to be a page where tabs are not present.

[@farooqsheikh8707]

Thanks sir, but i needed to show tabs also on the special page as in case of large scale app where there are more menu(special pages) than few tabs and the need is to maintain tabs on all pages through out the app (in general) except few. However i manged it by adding the footer to all special pages but i didn't like the approach as of redundant code result on each special page. but works!

[@jhanreygonzales1510]

Maybe show me some screenshots? I can't quite get what you are up to.

[@karenab9527]

Hey super good tutorial but I've a cuestion, I'm trying to return to the login page after entering but I can't cause it has .../#/menu/Tab I tried with this.navCtrl.setRoot('LoginPage'); but it does not work

[@galaxies_dev]

Karen AB you might need to get the rootNav controller of your app for that!

[@karenab9527]

thaks for answering, an other question do you have any idea how to make a backround service in my app with ionic 3 and cordova?

[@galaxies_dev]

Check out this Plugin for using the Background mode: ionicframework.com/docs/native/background-mode/

[@jorgeeliecerfonsecaluna4488]

Gracias! Excelente

[@BboyMay]

how to update getActiveChildNav.getSelected to getActiveChildNavs because getActiveChildNav is deprecated

[@Chinjj]

hi, as you mention, so do I put [0] on every getActiveChildNavs()?

[@TheNgrjn]

Thanks man...

[@IvanchoDiaz]

SPANISH : Hola es importante la tecnologia solo permite la parte de acceso especial de manera push y no root de resto funciona perfecto gracias por el contenido

[@venkateshvoona7680]

Its nice video and very good explanation. I had the similar issue. In my case I have few tab Items, if I click on one of the tab item it will open menu. So far its working fine but when I select menu item it should navigate to new page. The page is navigating but somehow the tab bar is missing. Could you please help me out on the same. stackoverflow.com/questions/57073691/tab-bar-is-missing-when-navigating-to-another-page-in-ionic-3 Thank you.

[@saladBhai]

woah your other name must be massiah

[@galaxies_dev]

A_ Maz thanks! Glad you enjoyed it :)