# Header

The topmost element displaying the screen title and optional design elements such as subtitle, avatar, and icon buttons. It helps users navigate the app and access key actions easily.

[View in Figma](https://www.figma.com/design/Tj2TZLpFbMqr4QZ6GMInxF/%F0%9F%94%AD-Mobile-Components---Telescope?node-id=7778-68141&t=6kX3DAdTa1d8chgr-0)[View on Github](https://github.com/pleo-io/pleo-mobile/tree/main/app/packages/telescope/header)[Open in Storybook](https://main--6388c33b05864304c7f3d666.chromatic.com/?path=/docs/telescope-header)[View metrics](https://reimagined-spoon-6841wle.pages.github.io/)

## Features

- The Header component has two main subcomponents: [Top](/components/mobile/header/header.guidelines#1b653cae7a66809ba447ef8101f7530f) and [Title group](/components/mobile/header/header.guidelines#1b653cae7a66806589b4f109f27dd687)
- Supports optional elements like an [Avatar](/components/mobile/header/header.guidelines#1ac53cae7a6680d8b96fe1804b6e3eec), [Icon Buttons](/components/mobile/header/header.guidelines#1ac53cae7a66804db60ec5f55aef45ec), and a [Subtitle](/components/mobile/header/header.guidelines#1ac53cae7a6680f9b5e2c026f7a50f31)

## 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.

**Do:**

### Use Titles for every screen

All screens [should include a Title](https://www.w3.org/WAI/WCAG21/Understanding/page-titled) to ensure they carry a semantic hierarchy, and provide context to users about where in the app they’re in.

**Do:**

### Do not make the Title group subcomponent fixed on scroll

While scrolling, the Title group should follow the rest of the scrollable content.

**Don't:**

### Do not use more than 3 Icon Buttons with Top’s far right

Use up to 3 Icon Buttons within Top’s far right.

**Don't:**

### 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.

**Don't:**

## Content guidelines

### Use clear and concise copy for Titles and Subtitles

Use up to 41 characters for the Title and 81 for the Subtitle.

**Do:**

## Related components

- [Avatar](/components/mobile/avatar/avatar.guidelines): A graphical representation of a user or entity - usually a photo or initials.
- [Icon button](/components/mobile/icon-button/icon-button.guidelines): Enables users to control the visibility of other UI elements.
- [Screen template](/components/mobile/screen-template/screen-template.guidelines): A utility component for designers to create mobile app Figma UI designs.