NavHeader

NavHeader conains a screen heading
and actions for the native OVO app.

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
Ref to 87:9367

                                                        
                                                        
                                                            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.

 


Related components