Navigation Bar
The bars at the top and bottom of almost every app screen. Learn iOS navigation and tab bars, Material top app bars and bottom navigation, web headers, safe areas and scroll behavior, and the back button, title and badge bugs testers find in them.
You open a pizza in a food delivery app. The button in the top-left corner says ‹ Restaurants, so you tap it, expecting the list of restaurants… and land on the pizzeria’s menu instead. Nothing crashed. But you no longer trust that button, and you start using the app more carefully. That small lie in the corner is a bug, and a very common one.
Navigation bars are on almost every screen, so users touch them hundreds of times a day. They tell people where they are, how to go back and where else they can go. When they’re wrong, users get lost. Let’s learn how they should behave.
What is a navigation bar?
“Navigation bar” is used for two different things, and you need to know both:
- Top bars sit at the top of a screen. They show the screen’s title, a back button (on deeper screens) and a few actions like Search or Share. iOS calls this the navigation bar; Android (Material Design) calls it the top app bar; on the web it’s the header.
- Bottom bars sit at the bottom and switch between the app’s main areas: Home, Search, Orders, Account. iOS calls this the tab bar; Material calls it the navigation bar (older name: bottom navigation).
Yes, “navigation bar” means a top bar on iOS and a bottom bar on Android. When a ticket says “the nav bar is broken”, ask which one.
Anatomy
iOS: navigation bar on top, tab bar at the bottom
- 1
Top safe area
Space for the status bar, notch or Dynamic Island. Nothing tappable belongs here.
- 2
Back button
Goes one screen back. On iOS it shows the previous screen’s title, so it must name the right screen.
- 3
Title
Names the current screen. Long names must truncate or wrap, never run into the buttons.
- 4
Actions
One to three icon buttons (Android moves extras into a ⋮ overflow menu). Each needs a 44 pt / 48 dp target and a name.
- 5
Destination
One main area of the app: icon plus a short label. Three to five of them.
- 6
Selected state
Shows where you are: tint on iOS, a pill-shaped indicator on Android.
- 7
Badge
A count or dot for new things. Must update when they are seen.
- 8
Bottom safe area
Room for the home indicator or gesture bar. Labels must sit above it.
How it differs from similar components
| Component | Where | What it does | Example |
|---|---|---|---|
| Top bar | Top of the screen | Title, back, actions for this screen | ‹ Pizza Roma · Margherita · ♡ |
| Bottom bar | Bottom of the screen | Jumps between the app’s main areas | Home / Search / Orders / Account |
| Tabs | Under the top bar | Switch sections of one screen | Overview / Specs / Reviews |
| Drawer | Slides in from the side | Many or secondary destinations | Settings, Help, Gift cards… |
Designs & variants
Scroll the lists, tap the destinations, and use the controls. Each variant has its own scroll behavior.
Orders
- Pizza Roma · €23.40
- Nordic Home · €54.90
- Sushi Kai · €31.00
- GreenLeaf · €12.80
- RunFast · €129.00
- BookNook · €18.50
- Café Mila · €7.20
- Toy Planet · €24.99
- Pixel Store · €19.99
- Kitchenly · €42.00
- PetPal · €16.40
- Sporty · €79.00
Navigation bar with large title
iOSScroll the list: the big “Orders” title slides away and reappears small, centered in the bar. The back button names the previous screen.
Trail runners
Trail runners
- Trail runner 2
- Ridge GTX
- Mudlark 5
- Summit Pro
- Forest Flow
- Rocky Mid
- Canyon Lite
- Peak Racer
- Moss Grip
- Alpine Zero
Top app bar
AndroidSmall and center-aligned bars keep one height. Medium and large bars start tall and shrink to a small bar as you scroll. A tint shows the bar is above content.
Home
Tab bar
iOSOpen a restaurant, switch tabs and come back: it’s still open. Tap the selected tab again to pop to the list, and once more to scroll to the top. The Orders badge clears once you visit.
Navigation bar (bottom)
Android3 to 5 destinations with icons and labels. The pill marks the current one. Visit a destination and Back takes you to Home first, then out of the app.
Top bars
- iOS navigation bar is 44 pt tall. The large title (big, bold, left-aligned) sits under the bar on main screens and collapses into a small centered title as you scroll. The back button shows a chevron plus the previous screen’s title. If that title doesn’t fit, iOS shortens it to “Back” or just the chevron.
- Material top app bar classically comes in four types: small (64 dp), center-aligned (for a main screen or a brand name), medium (112 dp) and large (152 dp). Medium and large start tall and shrink to small as you scroll. The 2025 Material 3 Expressive update renames it app bar, makes center alignment an option of the small bar, replaces medium and large with medium flexible and large flexible versions, and adds a search app bar, so newer apps may use those names. When content scrolls under it, the bar gets a tinted background. Actions that don’t fit go into the ⋮ overflow menu.
Bottom bars
- iOS tab bar: icon plus label, the selected tab tinted in the app color, red badges. On iPhone, up to five tabs; more go into a “More” tab. Since iOS 26, the Liquid Glass tab bar floats over the content and can shrink while you scroll.
- Material navigation bar: 3 to 5 destinations, icons with labels, and a pill-shaped indicator behind the selected icon. Fewer than three should be tabs or buttons; more than five should be a drawer or a navigation rail.
When to use it
- Top bar: on nearly every screen. It answers “where am I?” (title) and “how do I get out?” (back or close).
- Bottom bar: when the app has 3–5 top-level areas of similar importance that people switch between often, like Home, Search, Orders and Account in a shopping app. It must be visible on those top-level screens.
Good and bad uses
3–5 labeled destinations
Every destination has an icon and a word. Users don’t have to guess.
Eight unlabelled icons
Tiny targets and mystery icons. Move secondary destinations into a menu or drawer.
Long title truncated
The name ends with ”…” and the buttons stay usable. The full name is shown on the screen itself.
Long title runs under the buttons
The title and the icons overlap. Neither is readable, and a tap may hit the wrong one.
Also not a job for bars:
- Bottom bar for actions. “Add to cart” or “Delete” belong in buttons, not next to destinations.
- Bottom bar inside flows. Hide it during checkout, sign-up or a full-screen photo editor, where jumping away would lose the user’s work.
- Two stacked bottom bars, or a bottom bar on top of a cookie banner. The content gets squeezed into a strip.
How good bars behave
The back button tells the truth
On iOS the back button names the screen you’ll go back to. That’s a promise, and it breaks easily when screens are reused or pushed from different places (a dish opened from Search vs from Home). Check the label on every level of a flow, not just the first. On every platform, check that all the ways back lead to the same place:
- iOS: the back button and the edge swipe from the left.
- Android: the app’s ← arrow and the system Back (button or gesture from either edge).
- Web: the site’s back link and the browser Back button.
The differences between iOS and Android back behavior are explained in iOS vs Android. The short version: always test system Back on Android, never only the arrow on screen.
Titles fit, or truncate politely
Restaurant names, product names, people’s names and translations can be long. A title must truncateTruncationText that gets cut off because it doesn't fit its space.Open in glossary → with ”…” (or wrap, for large titles), and must never run under the back button or the actions. Test with a really long real name, in German, and at the largest text size (Dynamic TypeDynamic TypeThe phone setting that lets users make text bigger or smaller across apps.Open in glossary → on iOS, Font size on Android).
Re-tapping the selected destination
Tapping the destination you’re already on is a shortcut, not a dead button:
- On a deeper screen? Go back to that destination’s first screen (pop to root).
- Already on the first screen? Scroll to the top.
- Already at the top? Some apps focus the search field (Search tab) or refresh. Either way, nothing should break or reload twice.
This is a long-standing iOS convention, and Material apps do the same. If it does nothing, users with a long list have to scroll all the way back by hand.
Badges are counts, not decorations
A badge on Orders or Chats must equal the number of unread things, update when the user reads them (in any way: open the item, mark all as read, read it on another device) and disappear at zero. Re-opening something you’ve already read must not change the count. See Tabs › Badges stay current.
Safe areas and the home indicator
Modern phones have a notch or Dynamic Island at the top and a home indicator (iPhone) or gesture bar (Android) at the bottom. The space around them is the safe areaSafe areaThe part of the screen not covered by the notch, Dynamic Island, rounded corners or home indicator.Open in glossary →. Bars must extend their background into it, but keep their buttons and labels out of it:
- Labels under the home indicator are hard to read, and a tap there may start the system’s “go home” gesture instead.
- In landscape, the notch moves to the side: check the left and right edges too.
- On Android 15+, apps targeting the new SDK are drawn edge-to-edge by default. Apps that weren’t ready suddenly have bars under the status bar or the gesture bar. Test every new OS version.
The content is inset for the bars
A bar that floats over the content (blurred iOS bars, Liquid Glass, transparent Android bars) needs the content to have extra space at the end. Otherwise the last row of the list is hidden behind the bar forever. Scroll to the very end of every long list.
Behavior on scroll
Some apps hide the bars when you scroll down and bring them back when you scroll up, to give the content more room. That’s a design choice, and it has rules: the bars must come back on a small upward scroll, at the end of the list, and when the user taps the status bar or rotates. They must never stay hidden on a screen with no scrolling, and must not hide while a screen reader user is navigating.
The keyboard
When the keyboard opens (in Search, for example), the bottom bar is usually covered by the keyboard, which is fine. A bug is when the bar is pushed up above the keyboard, stealing space, or stays stuck halfway after the keyboard closes. Open and close the keyboard several times, in portrait and landscape.
Common bugs
| # | Bug | What you see | Typical severity |
|---|---|---|---|
| 1 | Back label lies | ”‹ Restaurants” goes back to the restaurant menu | Medium |
| 2 | Title overlaps actions | A long name runs under the ♡ and Share icons | Medium |
| 3 | Re-tap does nothing | Tapping the selected tab doesn’t pop to root or scroll to top | Low–Medium |
| 4 | Under the home indicator | Tab labels sit under the home bar; taps trigger “go home” | Medium–High |
| 5 | Last row hidden | The final list item is stuck behind the bottom bar | Medium–High |
| 6 | Wrong badge count | Orders 0 while an update is still unread, or a badge that never clears | Medium |
| 7 | System Back ≠ arrow | The ← arrow goes back one screen, system Back closes the app | High |
| 8 | Bars stay hidden | After scrolling, the bottom bar never comes back | High |
| 9 | Pushed up by the keyboard | The bottom bar floats above the keyboard, covering the field | Medium |
| 10 | Unnamed icon buttons | The screen reader says “button” for Search, Share and ⋮ | High (for affected users) |
Try it: the bars lab
Switch between iOS and Android, make the title long, add actions and increase the text size. Then switch the good behaviors off one at a time and scroll to the end of the list.
Order #48213 · Nordic Home Furniture
- Nordic Home #48213€14.00
- Pizza Roma #48202€21.15
- RunFast #48191€28.30
- BookNook #48180€35.45
- GreenLeaf #48169€42.60
- Pixel Store #48158€49.75
- Sushi Kai #48147€56.90
- Nordic Home #48136€64.05
- Pizza Roma #48125€71.20
- RunFast #48114€78.35
- BookNook #48103€85.50
- GreenLeaf #48092€92.65
- Pixel Store #48081€99.80
- Sushi Kai #48070€106.95
End of order history
Platform
Title
Actions
Text size
What a tester sees
- Title fits.
- Bottom bar sits above the home indicator.
- Content is inset: the last row can scroll above the bar.
Web headers
On websites, the top bar is the header, usually with a logo, a search icon, a cart and a hamburger menu. Many sites make it sticky, so it stays visible while you scroll. On a desktop that costs nothing. On a small phone in landscape, with a promo strip and a cookie bar, it can leave a tiny slit for the content.
Dev note
position: sticky or fixed.Screen
Header
Cookie bar
Promo strip
Text zoom
scroll-padding fix
New in: autumn
Warm layers for cold mornings. Free returns within 30 days.
We value your privacy
We use cookies to improve your experience and show relevant ads. You can change your choice at any time.
Room left for content
54%
Header 78 px · cookie bar 150 px · content 272 px of 500 px.
Keyboard focusClick into the page and press Tab to move through the links.
Tip: the first Tab inside the page shows a Skip to main content link. Press Enter on it and the next Tab lands on the first product, not in the header.
What to check on web headers:
- Space for content. Try the smallest phone, landscape, and 200% text zoom. If sticky bars take more than about a third of the screen, report it. Hiding the header on scroll down (and showing it on scroll up) is a common fix. WCAG’s Reflow criterion (1.4.10) expects content to work at 320 CSS px wide without scrolling in two directions.
- Focus not hidden. Press Tab through the page. When a focused link scrolls behind the sticky header or the cookie bar, keyboard users can’t see where they are. This fails WCAGWCAGThe Web Content Accessibility Guidelines, the main international standard for accessibility.Open in glossary → 2.2’s Focus Not Obscured (2.4.11).
Dev note
Developers fix it withscroll-padding-top/scroll-padding-bottom. - Skip link. The first Tab on the page should reveal a “Skip to main content” link, so keyboard users don’t tab through the whole header on every page (WCAG 2.4.1, Bypass Blocks).
- Anchors. Links to
#reviewsshould not land with the heading hidden under the sticky header. - Bottom bars on mobile web must stay above the iPhone home indicator, and must not jump around when the browser’s own toolbar shows and hides.
Dev note
They needenv(safe-area-inset-bottom).
Find the bug
This iOS food delivery app has five bugs in its bars. Explore it like a tester:
- Go three screens deep: a restaurant, then a dish. Read the back button on each level, then tap it.
- Open the Golden Dragon restaurant and scroll its menu.
- Scroll a long list, then tap the selected tab again. Try it on a deeper screen too.
- Look closely at the bottom edge of the screen.
- Open the updates in Orders, go back, and open the same one again. Watch the badge.
🐞 Bug hunt: Snackr food delivery
This demo has 5 hidden bugs. Explore it like a tester, then check your findings.
Restaurants
iPhone with Face ID · iOS
- 1
Hint: Open Pizza Roma, then the Margherita. Read the back button, then tap it.
- 2
Hint: Open Golden Dragon Noodle House & Dumplings and scroll its menu.
- 3
Hint: Scroll the restaurant list down (or open a restaurant), then tap Home in the tab bar.
- 4
Hint: Look at the very bottom of the phone screen.
- 5
Hint: Open the first update in Orders, go back, and open it again.
How to test it
Checklist
Navigation bar test checklist
0 of 14 checked
Example test cases
TC-NAV-001Back button label on every levelpositivemedium
Steps
- Home tab › open "Pizza Roma"
- Read the back button
- Open "Margherita"
- Read the back button and tap it
Expected result
On Pizza Roma the button says "‹ Restaurants", on Margherita it says "‹ Pizza Roma" (or "Back" if it doesn't fit). Tapping it returns to Pizza Roma.
TC-NAV-002System Back matches the on-screen arrow (Android)positivehigh
Steps
- Open a restaurant, then a dish
- Press system Back (button and gesture)
- Repeat with the app bar ← arrow
Expected result
Both return to the restaurant screen at the same scroll position. Neither closes the app.
TC-NAV-003Long title in the top baredgemedium
Preconditions
- Restaurant "Golden Dragon Noodle House & Dumplings" exists
Steps
- Open the restaurant
- Scroll until the small title appears
- Repeat at the largest text size and in German
Expected result
The title truncates with "…" between the back button and the actions. Nothing overlaps; all buttons stay tappable.
TC-NAV-004Re-tap the selected tabpositivelow
Steps
- Home tab › scroll the list down
- Tap "Home" in the tab bar
- Open a restaurant and a dish
- Tap "Home" again
Expected result
First tap scrolls the list to the top. On the dish screen, the tap returns to the restaurant list.
TC-NAV-005Badge after reading updatesedgemedium
Preconditions
- 2 unread order updates, Orders badge shows 2
Steps
- Open update 1, go back
- Open update 1 again, go back
- Open update 2, go back
Expected result
Badge: 1 after the first open, still 1 after the repeat, then disappears.
TC-NAV-006Bottom bar and the home indicatorpositivemedium
Preconditions
- iPhone with Face ID, and an iPhone SE (home button)
Steps
- Open each tab in portrait
- Rotate to landscape
- Tap each tab label near its bottom edge
Expected result
Labels sit fully above the home indicator on both devices and in both orientations. Taps select the tab and never trigger "go home".
TC-NAV-007Last list item is reachableedgemedium
Steps
- Open the longest list in the app (order history)
- Scroll to the very end
Expected result
The last row is fully visible above the bottom bar and can be tapped.
TC-NAV-008Sticky header on a small phone (web)edgemedium
Preconditions
- Cookie banner not yet accepted
Steps
- Open shop.example.com at 320×568 in landscape
- Set text zoom to 200%
- Press Tab through the product links
Expected result
Sticky bars take no more than about a third of the screen, so most of it shows content. Each focused link is fully visible, never behind the header or the cookie bar.
Tip: click a test case to expand it.
Tools
- iOS Simulator: test an iPhone with Face ID and an iPhone SE, rotate with Cmd+←/→, and raise the text size with the Accessibility Inspector (Xcode › Open Developer Tool) or Settings › Accessibility › Display & Text Size › Larger Text.
- Android Emulator: switch between gesture and 3-button navigation (Settings › System › Gestures › System navigation) and test Back in both. Raise Font size and Display size.
- Layout bounds (Android): Developer options › Show layout bounds draws every view’s edges, so overlaps and missing insets become obvious.
- Web: use the device toolbar in DevTools for small viewports and landscape, zoom the page to 200%, and press Tab from the address bar. On a real iPhone, check the bottom bar against the home indicator and Safari’s toolbar.
Accessibility
- Name every icon button. Search, Share, ♡ and ⋮ need accessible names (“Search”, “Share”, “Add to favorites”, “More options”). A screen readerScreen readerSoftware that reads the screen aloud for blind and low-vision users, like VoiceOver or TalkBack.Open in glossary → that only says “button” is a bug.
- Announce where you are. The screen title should be read when a new screen opens. Bottom bar destinations should be announced with their selected state (iOS: “Home, selected, tab, 1 of 4”).
Dev note
On the web, use<nav aria-label="Main">witharia-current="page"on the current link. - Badges need words. “Orders, 2 new”, not “Orders, 2” or just a red dot.
- Touch targetsTouch targetThe area of the screen that responds to a tap, which should be large enough for a finger.Open in glossary →: at least 44×44 pt (iOS) / 48×48 dp (Android) for the back button, actions and each destination, even when the icon itself is smaller.
- Large text. At the largest text size, iOS shows a big label popup when you long-press a tab bar item. Titles must still fit or truncate; labels must not overlap.
- Keyboard (web). A skip link, a logical focus order (header, then main content), visible focus, and focus never hidden behind sticky bars.
- Don’t hide bars from assistive tech users. Bars that hide on scroll must come back when focus moves into them.
Mobile vs web
- Navigation bar: back button with the previous title, large titles that collapse, edge swipe to go back.
- Tab bar: up to 5 tabs on iPhone, own stack per tab, re-tap to pop to root or scroll to top. On iOS 26 it floats and can minimize on scroll.
Dev note
Navigation bar:UINavigationBar/ SwiftUINavigationStackwith.navigationTitle. Tab bar:UITabBarController/TabView. - Test iPhones with and without a home button, landscape, and iPad, where a tab bar may appear at the top or turn into a sidebar.
- Top app bar (small, center-aligned, medium, large; in Material 3 Expressive: search, small, medium flexible, large flexible) with ← arrow, title and actions, plus the ⋮ overflow menu.
- Navigation bar (bottom) with 3–5 destinations and a pill indicator. On tablets and large screens, apps often switch to a navigation rail on the side: test both breakpointsBreakpointA screen width where a responsive layout changes, for example from one column to two.Open in glossary →.
- System Back in gesture and 3-button navigation: from a non-start destination it usually returns to the start destination, then leaves the app.
- Edge-to-edge: status bar and gesture bar insets, especially after an Android update.
- The header is usually sticky; on phones it often has a hamburger menu. Check room for content, focus not obscured, skip link and anchor links.
- Mobile web bottom bars must stay above the home indicator and cope with the browser toolbar appearing and disappearing.
Dev note
They needviewport-fit=coverandenv(safe-area-inset-bottom). - Browser Back must work like the site’s own back links.
Dev note
Navigation is a<nav>landmark with real links,aria-current="page"on the current one.
Check your understanding
Quick quiz
0/5 answered · 0 correct
1.You open Pizza Roma, then a pizza. The back button says "‹ Restaurants" and takes you back to Pizza Roma. What is wrong?
2.In an iOS app, you are on a long list in the Home tab, scrolled far down. You tap "Home" in the tab bar. What should happen?
3.How many destinations should a Material navigation bar (bottom) have?
4.On an iPhone with Face ID, the tab bar labels touch the home indicator. Why is this a bug?
5.On a website, you tab through product links and a focused link disappears behind the sticky header. What is this?
Key takeaways
- “Navigation bar” means a top bar on iOS and a bottom bar on Android. Top bars: title, back, actions. Bottom bars: 3–5 main destinations.
- The back button must tell the truth: right label, and every way back (arrow, edge swipe, system Back, browser Back) lands on the same screen.
- Long titles, translations and large text must truncate or wrap, never overlap the buttons.
- Respect safe areas and inset the content: labels above the home indicator, last row above the bar.
- Re-tapping the selected destination pops to root, then scrolls to top. Badges count unread items exactly.
- On the web, sticky headers must leave room for content on small phones, never hide focus, and come with a skip link.
Finished this page?Nice work, this page is complete!
Mark it as done to track your progress. It's saved in this browser, no account needed.
Its review cards are now in Bites ⚡