Sign in

StencilJS is a great tool for making web apps, but it’s not always clearly documented. Here I go through how to (and how not to) include a working menu in an Ionic app that uses ion-router and ion-tab-bar.

Shows menu open on left side and tab bar present behind.
The app with a working tab bar and side menu.

TLDR: Below are the three relevant components. 🤙 Hope you like it.

The header component is used as the first element within the app-home and app-output components (which aren’t shown but can contain whatever you want). The reason I separated out the header is to reduce duplication and in my production version I use slots for additional elements that…

Lex Satre

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store