terra-application-header-layout
Version:
This component renders an application header layout. To be used with a layout.
54 lines (34 loc) • 1.89 kB
text/mdx
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 />