The top bar carries title, back, and global actions
Aliases: app bar · navigation bar · top chrome slots
What it is
A top app bar is a persistent strip at the top of the viewport that does three jobs at once: the title answers “where am I”, Back answers “how do I leave this level”, and the trailing actions answer “what can I do to this page as a whole”. It is not content. It pins orientation, retreat, and page-level operations into one stable set of slots. Move the title into the first line of body copy, bury Back in a gesture, and scatter share and search, and the bar stops being a wayfinding device.
Why it happens
People scan the top edge on arrival. The title names the current entity or view, the leading control says where retreat still goes, and the trailing cluster holds operations on this page’s object that are not part of the content stream. Those three roles are learned because the same layout is reused across pages, so the eyes do not relearn “where is Back, where is the name”. A slogan or brand name in the title slot fails orientation. A control that closes the whole flow or jumps home fails the retreat model. Trailing slots filled with unrelated destinations turn the bar into another nav, not a handle on this page.
Slots have capacity. A long title crowds actions; too many actions crowd the title. When they collide, keep Back and a short title: a page with no exit traps people, a page with no name cannot be described.
Studying it
Use first fixation and spoken orientation: show newcomers a screenshot with the body blanked and ask where they are, how they leave, and what the page can do. Independent variables: title type (entity / brand / empty), Back semantics (up one level / dismiss the flow / absent), and trailing-action count. Dependent variables: orientation accuracy, time to point at Back, and whether trailing actions are mistaken for destinations.
Cross-page consistency is more diagnostic: open three detail levels in a row, vary only slot assignment, and watch whether people still go to the top-leading corner for retreat. Once a layer commandeers that slot, backtracking errors cluster on later layers.
Where it stops holding
Fullscreen media, games, and immersive reading may hide the bar; orientation then rides on other cues, provided a gesture can restore the same slots. Desktop windows already have a system title bar and menu bar; a second row of window controls fights those roles. Single-screen tools with no hierarchy (a calculator, a timer) can omit Back, though a title and page actions may still earn their keep. Screen-reader users do not use “the top edge” as a spatial slot; they use heading level and the accessible name of Back. Correct visual slots do not imply correct names.
Applying it
- Label three slots on every level: the title is the current object or view, the leading control only leaves this level, trailing actions only act on this page’s object.
- Do not put the product name, a marketing line, or a paragraph that repeats the body into the title. Do not make Back both “abandon the task” and “go to the parent”.
- If trailing actions exceed two, fold them into an overflow that still holds actions, not new top-level destinations.
- How to check: blank the body, keep the bar, and ask someone new to name place, exit, and page-level capability. A wrong slot is a role that got stolen. Then walk three levels and confirm the top-leading corner still means leave-this-level.