Navigation
How the masthead, the side panel, the trail and the heading of a view fit together, and what has to happen when a clinician moves between screens.
Overview
Four components used to be documented here and delivered under one install command. They are four items and four pages now — Masthead, Side navigation, Breadcrumb and View heading — because nothing about wanting one implies wanting the others.
What is left here is the part that is genuinely about all of them: how they sit on a screen, how deep a hierarchy may go before “where am I” stops being answerable, and what has to happen on a route change. This page ships no component of its own.
Anatomy
| Element | Carries | Rule |
|---|---|---|
| Masthead | Product, signed-in user with role, workstation identity | Name and role, never an avatar alone. The workstation matters on a shared machine — see Sign in / sign out. |
| Breadcrumb | The path, including the patient | The patient segment shows name and MRN. Never truncated to fit. |
| Side navigation | Sections within the current context | Current item marked by fill, weight and an inset rule — never colour alone. Counts where a section holds unreviewed items. |
A breadcrumb reading Worklist / Patient / ECG review is decorative. One reading Triage worklist / HARLAND, A. · MRN 44 812 907 / ECG review is a second, independent statement of identity — which matters because a clinician returning to a screen reads whatever is nearest the top. It never replaces the patient header; it agrees with it.
Depth, grouping and width
Depth is where "where am I" gets lost, so it is bounded rather than left to grow.
- Two levels inside a context. A third is permitted only when the first level lives in the masthead, so the panel itself never shows more than two. Every level added is another step between the reader and knowing where they are.
- Group with a heading, not a bare divider. A line between groups says these differ without saying how, which leaves the reader to infer a distinction that may not exist. If the group is worth separating it is worth naming.
- Indent by level, consistently — a fixed step per level, applied with logical properties so it mirrors in RTL, per International design.
- Labels wrap; they never truncate. Two lines, and if that is not enough the panel is too narrow or the label is too long. An ellipsis with the full text on hover is the icon-rail failure in another costume — the text does not exist on touch, and a truncated section name is exactly the thing a returning reader is trying to read.
- Counts sit on the item that holds them, never on the parent. A count on a collapsed parent tells the reader something is inside without telling them where, which converts a glance into a search — and it follows Badge's rule about what a count is a count of.
Do's and don'ts
The pairs moved to the component they are about: Masthead, Side navigation, Breadcrumb and View heading.
Accessibility
- Landmarks are named and unique — one
banner, onemain, and everynavigationcarrying a label that says which navigation it is. - A skip link precedes them all, so a keyboard user is not walked through the whole panel on every view — see App layout.
- Depth is bounded because orientation is an accessibility question before it is an aesthetic one.
Outcomes of use
- Effectiveness — a clinician can answer “where am I, whose record is this, and what is waiting elsewhere” from the top of any screen.
- Efficiency — re-orientation after an interruption costs a glance rather than a navigation.
- Satisfaction — not getting lost, which is the whole of what this set is for. Attributes believed to contribute to an outcome; the outcome is settled by observing real use, not by this page — see Usability & context of use.
Clinical safety notes
Trace these in your risk file (ISO 14971) and usability engineering file (IEC 62366-1). Each component's own page carries the controls specific to it.
- Nothing in the navigation set overlays the docked alert region. (you) Mitigates: an alarm hidden by chrome.
- The patient is named in the trail and in the document title. (you name the patient; the breadcrumb never truncates it and the view heading sets the title) Mitigates: acting on the wrong record after an interruption or a tab switch.
- Depth is bounded at two levels inside a context. (you) Mitigates: a clinician who cannot say what they are looking at.
Related
- Masthead — product, environment and identity.
- Side navigation — destinations and what is waiting in them.
- Breadcrumb — where you came from.
- View heading — the end of a route change.
- Grid & layout — the regions all of this sits in.