Websites · Glossary
What is a tab bar?
A tab bar is the row of buttons, usually at the bottom of a phone app, that switches between the app's main sections, such as Home, Bookings and Account. Each tab keeps its own place, so returning to a tab shows where you left it. Apple calls it a tab bar; Google's Material Design calls it a navigation bar.
The tab bar is the app's main menu, always one tap away. Choosing which three to five sections deserve a tab is one of the first design decisions in any app.
Nuwan Madhusanka · Co-founder
4 min read · Published
| Question | Apple tab bar | Material navigation bar |
|---|---|---|
| Purpose | Switch between top level sections | Switch between 3 to 5 primary destinations |
| Position on phones | Bottom of the screen | Bottom of the screen |
| Labels | Short label with an icon | Icon with a label |
| Keeps each section's state | Yes | Yes |
| Not for | Actions such as Add or Share | Single tasks or settings that belong in a menu |
What it is
A tab bar is persistent navigation for the top level of an app. Every tab represents a section, not an action: Timetable is a tab, Book a class is a button inside it. Apple's Human Interface Guidelines describe tab bars as a way to move between top level sections, and Google's Material Design navigation bar guidance targets three to five primary destinations on phones. In Expo Router, a tab bar comes from a layout file that returns the Tabs navigator, with one screen file per tab.
How it behaves
Tapping a tab shows that section where you left it, with its own history of screens. Tapping the current tab again usually scrolls to the top or returns to the section's first screen. The bar stays visible on the section's main screens and often hides on deep detail screens or during focused tasks such as checkout. Badges on a tab icon signal something new, such as unread messages. On tablets, the same destinations often move into a side rail or sidebar.
When it matters
Any app with more than one main area needs a predictable way between them, and the tab bar is the pattern people already know. It matters most for apps used often and briefly, such as checking the next class, today's roster or an order status, where one tap from anywhere matters. A single purpose app, such as a one screen calculator, does not need one. Deciding the tabs early also shapes the whole app, because each tab is a promise of a section worth visiting.
Common mistakes
Too many tabs, which crowd labels and push sections into a More menu. Putting an action, such as New booking, in the bar. Labels that are clever rather than clear. Icons with no labels. Hiding the tab bar on main screens. Tabs whose order changes depending on sign in state, which breaks people's habits. Reusing the same icon style for selected and unselected states, so people cannot tell where they are. And a tab that leads to an empty screen for people who are not signed in, without saying why.
Where it shows up in OneCraft
Phone apps generated by OneCraft have 3 to 5 tabs ending with an Account tab, where people choose Light, Dark or Follow device appearance, find a notifications switch, sign in or out when the app has a database, and read About. The app is planned with up to 14 screens and a design family, and every tab is checked at 390 and 768 pixels wide, with Home also checked in dark mode. Apps are Expo projects using Expo Router.
Questions people ask
How many tabs should an app have?
Three to five is the common guidance for phones. Fewer than three suggests the app may not need tabs; more than five leaves too little room for labels and pushes sections into overflow menus. If you have more sections, group related ones or move rarely used areas into the Account tab.
Should the Account or Profile tab be last?
By convention, yes. People expect Home or the main section first and settings and account matters at the far end. Keeping Account last also keeps the core sections nearest the thumb on most phones and matches what many familiar apps do, which lowers the learning curve.
Is a tab bar the same as a bottom navigation bar?
They are the same pattern under different names. Apple's guidelines say tab bar; Google's Material Design calls the component a navigation bar, earlier called bottom navigation. Both place a row of top level destinations at the bottom of the screen with icons and labels.
Can a website have a tab bar?
Yes. Mobile websites and installable web apps sometimes use a fixed bottom bar for main sections. It works well for app like web experiences, but it takes screen space and can clash with the browser's own toolbars, so a standard header menu is more common on websites.
Should the tab bar hide when scrolling?
Usually not on an app's main screens, because people rely on it being visible. Some apps hide it on long reading or media screens, or on detail screens deeper in a section. If you hide it, bring it back as soon as people scroll up or go back.
Make one with websites
The button opens the generator with this use case already described. Change the wording to match your own.
Create a website with OneCraftRelated questions
- What is Expo Router?What is Expo Router? The file based router for Expo and React Native apps: files become screens, folders become stacks and tabs, and every screen gets a link.
- What is a splash screen?What is a splash screen? The screen an app shows while it starts. iPhone launch screens, the Android 12 splash screen API and Expo's splash settings compared.
- App icon sizes for iPhone and AndroidApp icon sizes for iPhone and Android: the 1024 x 1024 App Store icon, the 512 x 512 Google Play icon, adaptive icon layers and safe zones.
- What is a staff roster app?What is a staff roster app? An app staff use to see shifts, swap them, ask for leave and clock in, compared with a spreadsheet roster and a group chat.
Written and checked by the OneCraft team. Last checked .