A website in an app often feels like a website. Native navigation fixes the first thing people notice: real tabs at the bottom, a real header, a real side menu. They're drawn by the phone, not by your site, and you set them up without code in the Shell Designer of your project.
Native navigation needs Android Build (Native), Android TV or iOS. The Android Build (Web) can't show it. In the docs, this native layer is called Shell V2.
Choose a navigation mode
| Mode | What it shows | Limits | Good for |
|---|---|---|---|
| Header | A top bar only | Menu of 1 to 8 items | Simple sites, content sites |
| Tabs | A bottom bar, with or without a header | 2 to 5 tabs | Most apps |
| Side menu | A sliding menu behind a burger button | 2 to 7 items | Many sections |
Start from a template
The Shell Designer offers 12 ready-made templates. Choosing one fills in the navigation mode, styles and layout, then you adjust anything. Your site, colors and logo don't change, and the preview next to the settings shows the result right away.
Set up your tabs
Open the Shell Designer
In the Configuration tab of your project, open the App phase.
Choose Tabs and add your pages
Each tab has a label, an icon from a library of 134, and the address it opens.
Set the active tab rule if needed
Each tab has a URL pattern. The app highlights the tab whose pattern matches the current page, so a tab stays active on its sub-pages.
Launch a new build
Navigation is part of the native app, so it reaches your app with the next build.
Styles
- Header: solid, transparent or floating, with your logo or your page title.
- Tab bar: flat, floating or transparent.
- Active tab: colored icon, capsule or circle.
- Center button: a raised middle button, for a main action.
- Header menu: overflow or burger, with 1 to 8 items. Each one navigates, opens an external link, shares or reloads.
Behavior
- Pull to refresh: reloads the page.
- Back button: shows up in the header when there's a page to go back to.
- Header title: uses your page's
document.title. - Single-page apps: React, Vue and Next.js work with no code. The app follows every change of address.
Control it from your site
Two calls of the JavaScript bridge cover the common needs: a badge on a tab, and moving to a page from your own code.
window.saastostore?.setTabBadge?.(2, unreadCount); // 3rd tab, 0 hides it
window.saastostore?.navigateTo?.("/cart"); // loads /cart
window.saastostore?.navigateTo?.("#/cart"); // hash routing (Bubble, Glide)Avoid a double navigation
If your site already has a header or a bottom menu, people will see both. Hide those elements inside the app: your website stays the same in a browser.
Full-screen apps
You can also turn the native shell off. The app then shows your site alone, edge to edge, with no native header, tabs or menu. That suits a site that has its own complete mobile navigation. Hidden elements don't apply in that mode.