- Tabs
- 3–5
- Each tab
- One URL
- Labels
- 1 short word
- Plan it
- Tab planner
Why tabs matter so much
On a phone, the bottom of the screen is where thumbs rest. Website menus live behind a hamburger at the top, two taps and a stretch away. A native tab bar puts your main sections one tap away — and it's the first thing Google Play reviewers and users notice as “app-like”.
Choosing the tabs
| Site type | Suggested tabs |
|---|---|
| Shop | Home · Categories · Cart · Orders · Account |
| News | Latest · Sections · Saved · Search |
| Course | Dashboard · Courses · Calendar · Messages |
| Restaurant | Menu · Order · Rewards · Account |
| Community | Latest · Categories · Notifications · Profile |
Rules of thumb: 3 to 5 tabs; one-word labels; the first tab is the start URL; never use a tab for “About us”.
Native tabs vs tabs in your CSS
A converter's native tab bar stays put while pages load and can't be broken by a theme update. A CSS bottom nav (shown only inside the app with an .in-app class) is more flexible and needs no rebuild. Either is far better than a hamburger alone. Don't do both — two nav bars stacked is worse than none.
Back button behaviour with tabs
Users expect back to step through pages within the current tab, then return to the first tab, then leave the app. A converter that exits the app the moment you press back on tab three feels broken.
Tab icons
Use simple outline icons with a filled or coloured active state, at least 24dp, and a label under each. Avoid icons only you understand.
Frequently asked
Can each tab open a different website?
Technically yes, but tabs should point to sections of your own site. Linking tabs to other people's sites invites a Play policy problem.
Do I need to rebuild to change tab destinations?
Yes, native tabs are part of the app. CSS tabs on your website change instantly.