Page header
A page header defines the top of a page. It contains a title and can be optionally combined with breadcrumbs buttons, search, and filters.Installation
| Install | yarn add @atlaskit/page-header |
|---|---|
| Source | Bitbucket.org, (opens new window) |
| npm | @atlaskit/page-header, (opens new window) |
| Bundle | unpkg.com, (opens new window) |
Props
| Description | Contents of the action bar to be rendered next to the page title. |
|---|---|
| Type | React.ReactElement<any, string | React.JSXElementConstructor<any>> |
| Description | Contents of the action bar to be rendered next to the page title. Typically a button group. |
|---|---|
| Type | React.ReactElement<any, string | React.JSXElementConstructor<any>> |
| Description | Contents of the bottom bar to be rendered below the page title. Typically contains a search bar and/or filters. |
|---|---|
| Type | string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal |
| Description | Content of the page title. The text wraps by default. |
|---|---|
| Default | false |
| Type | boolean |
| Description | Used as the ID of the inner h1 tag. This is exposed so the header text can be used as label of other elements by aria-labelledby. |
|---|---|
| Type | string |
| Description | Returns the inner ref to the DOM element of the title. This is exposed so the focus can be set. |
|---|---|
| Type | (element: HTMLElement) => void |
| Description | A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests. |
|---|---|
| Type | string |
| Description | Prevent the title from wrapping across lines. Avoid using this wherever possible, as truncation can make page headings inaccessible. |
|---|---|
| Default | false |
| Type | boolean |