NavHeader is used for native app only.
NavHeader is used as a navigation bar at the top of the screen and provides the screen's title, helping people orient themselves in our app. It can include controls that affect the screen's content.
- Most all screens
- Web
- Modal journeys inc. multi-step

import { NavHeader } from '@ovotech/element-native';
<NavHeader
options={{
title: 'Screen title',
canGoBack: () => true,
goBack: () => {},
}}
/>
Availabile platforms
Platform |
Available |
---|---|
Figma |
v2+ |
Web (@ovotech/element) |
❌ |
App (@ovotech/element-native) |
v2+ |
How to use it
Writing a title
Use the title area to describe the current screen providing useful context. A screen’s title helps people confirm their location as they navigate your app.
Write a concise screen title. Aim for a word or short phrase that best describes the purpose of the screen. Ideally using no more than about 15 characters tends to work well in most screens.
Screen titles should dial up our straight-talking and inclusive traits. For a screen accessed by using the navigation bar, use the same words in your header.
- Use 1-3 words
- End headers in a full stop, which will display as the OVO square
- Use homepage copy should welcome the user
- Mirror the site map where possible and use headers that follow what’s in the nav
- Describe what the customer will find on the page
- Remember that app headers are different from body copy headlines (which are often longer or more expressive)
- Avoid using “your” or “my”
Examples
Energy use
Hi, Susan
Payments
Check your usage
OVO Energy Home
My payments and bills
Including the 'back' action
Screens which are navigated to by selecting a tab in the bottom navigation bar (e.g. Home, Usage) are called TabHome screens and should not have a back action.
Any screen internal to these (TabInternal screen) should have a back action, and take the user back to the relevant TabHome screen.
Properties
Name |
Values |
Default |
---|---|---|
headline stacks the title below the back button
|
Boolean |
false |
options: { title?: string; statusBarHeight?: number; header?(): ReactNode; headerLeft?(): ReactNode; headerRight?(): ReactNode; canGoBack(): boolean; goBack(): void; } |
Object contains the title copy and slots to allow for various nav header layouts and content.
canGoBack and the goBack functions are required. |
|