Features
- The Header component has two main subcomponents: Top and Title group
- Supports optional elements like an Avatar, Icon Buttons, and a Subtitle
When to use
The Header component sits at the top of every screen from Pleo’s mobile app. Use the Header component to provide content and actions related to a screen’s experience, such as navigation, screen titles, and actions.
Composition
Top and Title group are always used together.
Top
The Top subcomponent provides key actions with icon buttons for navigating the app and disclosing interactions.
Title group
The Title Group subcomponent helps users understand where in the app they are by providing text elements like a title.
Spacing
Behaviour
When scrolling, the Top subcomponent should stay fixed by default, revealing the Title to keep it always visible.
The code version of the component still needs rework in order to handle the scroll behaviour out-of-the-box.
Examples
Back Icon Button
Use a Back Icon Button within the Top subcomponent with to help users navigate between main and sub screens.
Avatar
Use an Avatar within the Top subcomponent to provide users with quick account-related actions.
Primary & Secondary Icon Buttons
Use Primary and Secondary Icon Buttons in the Top subcomponent for high-priority actions.
Tertiary Icon Buttons
Use Tertiary Icon Buttons for situations where we need to provide users with non-essential elements, such as supplementary information.
Title at the Top
While scrolling, the Header should reveal a left-aligned Top Title to keep it visible.
Empty Top
Use the Header with an empty Top for main app screens or experiences that don’t require navigation or extra actions.
If the screen needs to be scrollable, the Title should still appear at the top of the Header to remain visible while scrolling.
Title
Always use a title to provide screens with semantic hierarchy and clearly communicate to users which screen they are on.
Subtitle
Only use a subtitles if a screen title is too little context for users to fully understand the experience.
Best practices
Use both Top and Title group subcomponents
Avoid using the Title group without the Top subcomponent (or vice-verse) to maintain a consistent layout across the app.
Use Titles for every screen
All screens should include a Title to ensure they carry a semantic hierarchy, and provide context to users about where in the app they’re in.
Do not make the Title group subcomponent fixed on scroll
While scrolling, the Title group should follow the rest of the scrollable content.
Do not use more than 3 Icon Buttons with Top’s far right
Use up to 3 Icon Buttons within Top’s far right.
Do not use an Avatar and a Back Icon Button simultaneously
Use an Avatar, a Back Icon Button or no elements within Top’s far left.
Content guidelines
Use clear and concise copy for Titles and Subtitles
Use up to 41 characters for the Title and 81 for the Subtitle.
Related components
- Avatar: A graphical representation of a user or entity - usually a photo or initials.
- Icon button: Enables users to control the visibility of other UI elements.
- Screen template: A utility component for designers to create mobile app Figma UI designs.