Components / Navigation / Record headerOpen in Figma

Record header

Ready

Opens a record detail screen: the record name, the way back, its menu and who it belongs to.

Platforms Phone · TabletGroup NavigationUpdated 26 Oct 2026

When to use

  • A record screen where the brief asks for the navy header.
  • The record has an owner worth naming at the top.

When not to use

If people need toUse
Any other record screenRecord layout, default version
Show a list, a form or settingsTop bar
Show the outcome of a checkResult layout

Anatomy

arrow_backTitlemore_vert
AB
Name
Secondary line
  1. Back · required
  2. Title · required; centred, or left with a subtitle
  3. More icon · optional, opens the menu
  4. Initials avatar · with the person row
  5. Person row · optional: name and one secondary line
  6. Content sheet · required, overlaps the header with round top corners

Variants

VariantPurposeFigma
Centred titleShort titles such as a record numberDesigned
Left title with subtitleWhen the record needs a second line, such as its typeDesigned
With person rowShows who raised or owns the recordDesigned

States

StateWhenWhat changesFigma
DefaultAlwaysAs specifiedDesigned
Icon pressedFinger is down on back or moreA 20% black circle behind the iconTemporary rule

Behaviour

  • The header scrolls away with the content; the sheet slides up over it.
  • Back returns to the list the record was opened from.
  • Centred or left title is chosen per screen, and the same choice is kept across one module.

Phone and tablet

PhoneTablet
Bar padding32 top, 12 bottom, 16 sides24 top, 12 bottom, 20 sides
Gap in the bar812
TitleCentred or leftUsually left with a subtitle

Content

PartRule
TitleThe record ID or name; never the screen type ("Details")
SubtitleOne fact that tells records apart, such as the type
Person rowName, then one line such as the organisation; no labels like "Requested by"

Do and don't

arrow_backTitlemore_vert
DoKeep the header in Navy with white text and icons.
arrow_backTitlemore_vert
Don'tRecolour the header to show status. Status belongs in a status label.
Top barRecord layoutMenuStatus label
← Top barPrimary tabs →