Patterns
Common Header
The heading block at the top of every page in the suite, assembled from the Suite Header, Product Navigation and Page Heading. Twelve product variants.
Figma source: Common Header ★ ↗Structure
Original Figma description & what changed
From Figma: The Common Header Pattern is is the heading pattern found at the top of every page on the app. The Common Header is made up of two main components, the Product Header and the Header Navigation. The main variants are the logo in the Product Header and the Nav Items in the Header Navigation. All known variants are added to the Figma Pattern (as a component), add future ones to the component as a variant.
What changed: Kept the structure and the maintenance instruction — which is the most useful sentence in the original and easy to lose. Fixed the doubled “is”, and reconciled the component names with what the file actually contains: the pattern assembles three components, not two, since the Page Heading is part of it and carries the Show Page Heading? property.
| Layer | Component | Contains |
|---|---|---|
| 1 | Suite Header | Cayuse mark, product name, customer logo, User Menu. |
| 2 | Product Navigation | The sections of the current product, with submenus and a More overflow. |
| 3 | Page Heading | Breadcrumb, page title, Status Pill, subheading, page actions. |
Figma properties
| Property | Values | Notes |
|---|---|---|
Product | Default · Admin · Sponsored Projects · Human Ethics · Platform · Animal Procurement · Repository · Fund Manager · Outside Interests · My Profile · Home · Agreements | One variant per product. The file instructs: add future products as variants of this component, not as new components. |
Show Product Navigation? | boolean | Hidden on views with no sections — login, home. |
Show Page Heading? | boolean | Hidden where the view supplies its own title treatment. |
The Common Header offers 12 product variants; the Product Logos component offers 19. Costing, PhD Manager, Vivarium Operations, GEM, Ethics Monitor, Inventions, Proposals and Data Management have logos but no header variant.
That may be deliberate — not every product has shipped a header — but it is the kind of drift that produces a missing variant at the worst moment. Worth reconciling the two lists and recording which products are intentionally absent.
Usage
When to use it
- Use the assembled pattern rather than rebuilding it from the three components.
- Show all three layers on a standard product view.
- Hide Product Navigation on views with no sections, such as login and home.
- Add a new product as a variant of the existing component, as the file instructs.
When not to use it
- Do not duplicate navigation between the suite header and the product nav.
- Do not put page-level actions anywhere except the Page Heading.
- Do not detach the pattern to change one product’s header — add a variant.
- Do not stack more than one
<h1>in the assembled header.
Accessibility
- Three landmarks, and they must be distinguishable:
<header>for the suite header, and each<nav>labelled — “Sponsored Projects” for the product nav, “Breadcrumb” for the trail. - The Skip Link exists because this header is three layers deep. Without it, every keyboard user tabs through the entire header on every page.
- Exactly one
<h1>— the page title. - Only one element should carry
aria-current="page"per navigation region.