Use a header or top app bar for current-view title, navigation affordance, and view-level actions; use global navigation for top-level product destinations; use bottom navigation for compact mobile destination switching.
Use a header or top app bar for current-view title, navigation affordance, and view-level actions; use global navigation for top-level product destinations; use bottom navigation for compact mobile destination switching.
Practice the judgment: Imagine this situation: The bar shows a brand or app name but omits the current view title on deep screens. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Header / top app bar | Global navigation | Bottom navigation |
|---|---|---|---|
| UI or UX | UI + UX - Current-view top bar with title, navigation affordance, actions, and overflow | UI + UX - Persistent top-level navigation shell | UI + UX - Persistent mobile primary navigation |
| UI guidance | Render a top surface that clearly identifies the current view, provides one leading navigation affordance when needed, exposes a small number of view-level actions, and groups secondary actions behind a labeled overflow control. | Render product or service identity, a compact set of top-level destination links, current-section state, separate utility controls, and responsive overflow behavior. | Render three to five bottom destinations with stable touch targets, labels or accessible names, reinforcing icons, selected state, optional badges, and safe-area spacing. |
| UX guidance | When selection, search, or editing changes the command set, switch to an explicit contextual bar and provide a clear way back to the normal title/actions. | Help users move between major product or service areas while preserving orientation, local state, and confidence that they are in the right service. | Support rapid switching between top-level mobile sections while preserving each section's local navigation, scroll, filters, and drafts. |
| Good UI | A project detail screen shows Back, Project Apollo, Search, Share, and a More menu for secondary commands. | A header shows the product name, Dashboard, Projects, Reports, Billing, a More overflow, and separate Help and account controls. | Selected state uses shape, weight, and text color instead of relying on color alone. |
| Bad UI | A header shows the app brand, five section links, account settings, export, delete, help, and sign out in one row. | A crowded row mixes every page, account action, language selector, and sign-out link. | Six tiny icon-only items and a center plus button compete for space. |
| Good UX | Users switch from Details to Files and the title and primary action change together from Share to Upload. | Users switch from Projects to Reports, return to Projects, and find their project draft count preserved. | Switching from Home to Saved and back preserves each section's scroll count and draft state. |
| Bad UX | The same Save icon appears in the header on screens where it saves, exports, or opens settings. | Navigation opens external or utility destinations as if they were service sections. | Tapping Search clears the Home feed position and opens a one-off command instead of a destination. |
| Best fit | A screen needs a current title plus back, close, menu, search, save, share, edit, or overflow actions. | Users revisit several top-level product or service areas. | A compact mobile app has three to five high-frequency top-level destinations. |
| Avoid when | The page is a public document where a simple site header and page heading are enough. | The flow has a single ordered transaction where navigation would distract or cause abandonment. | There are fewer than three or more than five primary destinations. |
| Required state | Default state with current view title and correct leading affordance. | Default state with product or service identity and top-level links. | Default state with all primary destinations visible. |
| Accessibility burden | Use semantic header, banner, navigation, and button roles only where their landmarks match the page structure. | Use a labeled navigation landmark for primary navigation. | Every icon must have a visible label or accessible name. |
| Common misuse | Using the top app bar as a dumping ground for every global destination and account utility. | Listing every page or admin object in the global nav. | Putting too many destinations into the bar. |