import { Badge } from 'terra-application-header-layout/package.json?dev-site-package';

import HeaderWireframe from '../example/HeaderWireframe?dev-site-example';

import HeaderLayoutSrc from 'terra-application-header-layout/src/ApplicationHeaderLayout.jsx?dev-site-props-table?dev-site-props-table';

<Badge />

# Terra Application Header Layout

This component renders an application header layout. To be used with a terra-layout or terra-navigation-layout.

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-application-header-layout`

## Features

### Skip to Content Button

To improve accessibility of our UI for users using a keyboard to navigate, we have implement a 'Skip to Content' button that focuses on the main content node.

To use it, just tab onto the page, and you will see it as the first item and 
- Press the Enter key to skip to the main content node, or
- Press the Tab key to ignore the 'Skip to Content' button.

#### Note: 
This feature is enabled by default and cannot be disabled.

<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
## Peer Dependencies

This component requires the following peer dependencies be installed in your app for the component to properly function.

| Peer Dependency | Version |
|-|-|
| react | ^16.8.5 |
| react-dom | ^16.8.5 |
| react-intl | ^2.8.0 |

<!-- AUTO-GENERATED-CONTENT:END -->

## Component Features
* [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
* [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
* [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)

## Examples
<HeaderWireframe title='Header - Wireframe' />

## Application Header Layout Props table
<HeaderLayoutSrc />