# Top Navigation

TopNavigation provides a heading component for the entire page.

![](https://1974771079-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LK6D3dfAKckmlwkiENO%2F-MGmdhd73qWg_lPPzHFf%2F-MGxGTRZXs5MV4FttG_f%2FSimulator%20Screen%20Shot%20-%20iPhone%2011%20-%202020-09-08%20at%2012.30.54.png?alt=media\&token=fbc8e998-15e8-485a-868d-a7968576ab32)

In basic example TopNavigation contains a title and actions.

```jsx
    <TopNavigation>
          <Image source={topNavArrow} height={20} style={{position: "absolute", left: 0}}/>
          <View style={{ justifyContent: 'center' }}>
              <Text style={styles.topNavTitle}>Title</Text>
          </View>
    </TopNavigation>
```

TopNavigation may contain the right action on the left.

```jsx
    <TopNavigation>
          <View style={{ justifyContent: 'center' }}>
              <Text style={styles.topNavTitle}>Title</Text>
          </View>
          <Image
              source={topNavContextMenu}
              style={{ height: 20, position: "absolute", right: 0 }}
            />
    </TopNavigation>
```

## Properties

| Name           | Type                                       | Description                                                                                                                 |
| -------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
| title          | `ReactText \| (TextProps) => ReactElement` | String, number or a function component to render within the top navigation. If it is a function, expected to return a Text. |
| subtitle       | `ReactText \| (TextProps) => ReactElement` | String, number or a function component to render within the top navigation. If it is a function, expected to return a Text. |
| accessoryLeft  | `() => ReactElement`                       | Function component to render to the left edge the top navigation.                                                           |
| accessoryRight | `() => ReactElement`                       | Function component to render to the right edge the top navigation.                                                          |
| ...ViewProps   | `ViewProps`                                | Any props applied to View component.                                                                                        |