Navigation
Masthead, side navigation and breadcrumb. Together they answer three questions a clinician asks constantly after an interruption: where am I, whose record is this, and who am I signed in as.
Overview
Navigation in consumer software helps people explore. In a clinical product almost nobody is exploring — they are returning. The design problem is re-orientation after ninety seconds away, not discovery.
Which means the important property is not that navigation is easy to use, but that current location is always stated, in the same place, without interaction.
Always answers "where"
Current location and current patient are visible without opening anything, on every screen, at every width.
Never conceals
Navigation does not overlay the alert region, and collapsing it never hides an alarm or the patient identity.
Leaving is deliberate
Moving out of a patient context is an explicit act with an explicit consequence for any unsaved work.
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.
Rules
- Never overlays the alert region. A collapsed side nav expanding pushes content or floats beside it — it never covers the docked alarms.
- Collapsing hides labels, never state. An icon-only rail still shows its counts and its current-item marker.
- Current item is marked by more than colour, and by
aria-current. - Leaving a patient context is explicit. Unsaved work prompts; it is never discarded silently — see Textarea.
- Never auto-navigate. Not on a new alarm, not on a completed background task, not on a colleague's action. Arriving alarms are announced; the clinician moves.
- The back button works. Sections are addressable; navigation state lives in the URL — the same rule as Tabs.
- No more than two levels in the side navigation. Deeper structure is a sign the product needs a different information architecture, not a nested tree.
Do's and don'ts
The patient is named in the path. A returning clinician re-orients from the top of the screen.
Generic labels. It says a patient is open without saying which, which is the question actually being asked.
Current item marked by fill, weight and an inset rule. Counts show what is waiting inside.
Current item by text colour alone, no counts. Gone in greyscale, and a section with two unreviewed results looks empty.
Name, role and workstation. On a machine twelve people share, all three are needed.
Initials in a circle. Two initials are not an identity, and the role that determines what can be attributed is nowhere.
Accessibility
- Real landmarks —
<header>and<nav>with distinctaria-labels, so a screen-reader user can jump between them. aria-current="page"on the current item, in addition to the visual treatment.- Breadcrumb is an ordered list inside a labelled
nav; separators arearia-hiddenso they are not announced. - Counts are in the accessible name — "Troponin, 2 items" — not a bare number beside the label.
- A skip link precedes the navigation, so keyboard users reach the content without traversing every section.
- Collapsed rails keep accessible names via
aria-label, and carry tooltips for sighted users — see Tooltip. - Touch targets meet the physical floor, which usually means a wider rail rather than shorter rows.
Outcomes of use
What this contributes to, in the terms of Usability & context of use. These are attributes believed to contribute to an outcome; the outcome itself is settled by observing real use in a specified context, not by this page.
- Effectiveness — actions land in the context the clinician believes they are in. Re-orientation after interruption is the whole job.
- Efficiency — no navigation needed to find out where you already are, which is otherwise a constant small tax.
- Satisfaction — confidence about identity and location without checking. A clinician who verifies the header after every return has been failed by the chrome.
Clinical safety notes
Trace these in your risk file (ISO 14971) and usability engineering file (IEC 62366-1).
- Patient named in the breadcrumb. Mitigates: acting in a context whose identity was assumed rather than read.
- Navigation never overlays the alert region. Mitigates: an alarm concealed by an expanded rail.
- Never auto-navigates. Mitigates: the record changing under a clinician mid-action.
- Leaving a context prompts on unsaved work. Mitigates: loss of a clinical note, or its misattribution.
- Current item not colour alone; counts on sections. Mitigates: unreviewed content in a section that looks empty.
- Signed-in user and role always visible. Mitigates: actions attributed to the wrong clinician on a shared workstation.
Implementation
$ npx shadcn@latest add https://md.notjustany.tech/r/navigation.json<Masthead product="AcuteLine" user={user} workstation={station} />
<Breadcrumb>
<Crumb href="/worklist">Triage worklist</Crumb>
<Crumb href={patientHref} subjectId={patient.mrn}> // renders name + MRN
{patient.display}
</Crumb>
<Crumb current>ECG review</Crumb>
</Breadcrumb>
// A patient-scoped breadcrumb must name the patient.
if (scope === "patient" && !subjectId) {
throw new Error("[Breadcrumb] a patient segment requires subjectId.")
}Related
- Patient header — the primary identity statement.
- Tabs — peer views within one context.
- Grid & layout — where these regions sit.
- Sign in / sign out — user and workstation in the masthead.