Features still in consideration include:

• Responsive subnavigation variants (collapsing tabs into menu when space constrained)

Best Practices

Page headers should:

• Always provide a title for the page
• Optionally provide a description to provide more context about the page content
• Always provide a link back when a page has a parent page
• Offer common actions that apply to the whole page and are important enough to appear before the page content
• Display important status information

Content guidelines

• Use title case for the Page title, and describe the page in as few words as possible. Typically this will be the primary identifier or a pluralized name when the page is a list. Avoid truncating the page title.
• Use clear and predictable labels for page actions, favoring the {verb}+{noun} naming format where there may be ambiguity about the target of the action.
• Consider wrapping page header actions in a Layout to manage how they stack at smaller breakpoints.
• Avoid using interactive components for displaying status information

Examples

Basic Page header

Used for summary or detail pages with no further action to take.

Page header with breadcrumb

Used when a page belongs to a parent page or collection. The breadcrumb prop must include a label. Optionally, the breadcrumb may include an onClick to trigger navigation or support the handling side effects (such as logging page views).

Optionally, an accessibilityLabel to render a visibly hidden label for providing additional context to improve accessibility.

Page header with breadcrumb links

Instead of providing an onChange handler as demonstrated in the Page header with breadcrumb example, Page navigation can also be triggered using links.

The breadcrumb can be used to render a link by proving an href property.

Normally links render an anchor element, but in order to support client-side routing implementations, you can instead provide a Link component, such as react-router's Link to render via the optional as property. When using the as property, you must use the to prop in place of href to provide the destination url for the link.

Page header with status

Used to communicate brief, important and non-interactive status information about the page. The status appears immediately after the page title. The status prop accepts any ReactNode but should be used with EzChip status variants.

Page header with actions

While call to actions are typically found at the bottom of cards within the page content, the space in the top-right of a page header is ideal for common actions associated for the page as a whole.

Consider wrapping actions in an EzLayout to manage how they stack at smaller breakpoints.

Page header with subnavigation

Use page header with subnavigation to offer multiple views related to the page. To enable subnavigation, use the subnav prop.

The subnav prop should be provided an object that describes paths to related pages and the current selection.

The subnav object can have the following properties:

• tabs (required): an array that represents each of the related views available for navigation.
• selected: A tab from the tabs array that represents the currently displayed view.
• onChange: An event handler for notifying when the user has selected a link to view.

Each entry in the tabs array must provide a label for the related page and can optionally provide an accessibilityLabel for providing additional context to improve accessibility. Optionally, tabs may include an onClick handler to support the handling of actions that occur when tabs are clicked (such as logging page views);

The following example demonstrates how subnavigation can use onChange events to switch which view to display. Page navigation can also be triggered using links as shown in the Page header with subnavigation links example.

Page header with subnavigation links

Use page header with subnavigation to offer url-accessible related views.

Instead of providing an onChange handler as demonstrated in the Page header with subnavigation example, Page navigation can also be triggered using links.

Each entry in the tabs array can be used to render a link by proving an href property for each tab.

Normally links render an anchor element, but in order to support client-side routing implementations, you can instead provide a Link component, such as react-router's Link to render via the optional as property. When using the as property, you must use the to prop in place of href to provide the destination url for the link.

Page header with subheader

Use this pattern to present filters, related links or tertiary actions relating to the page-level content. Use the subheader pattern in favor of Page header actions in order to utilize the additional space provided by the subheader.

Subheader content is reserved for actions associated for the page as a whole. For actions that apply only to a single card, it’s best to use card actions instead.

• Use the subheader prop to provide filters, related links or actions to display within the subheader.
• One or more EzLayout components should be used to layout subheader content and manage how content should stack at smaller breakpoints.

Page header with subheader and tabs

Use this pattern to present filters, related links or tertiary actions relating to the tab-level content.

For filters or actions that apply only to a single card, it’s best to use card actions instead.

• Use the subheader prop to provide filters, related links or actions to display within the subheader.
• One or more EzLayout components should be used to layout subheader content and manage how content should stack at smaller breakpoints.
• Filters should be used with EzLabel[use=secondary] to provide appropriate labels to describe the filter.

Page with all header elements

Use for detail pages, which should have return links and may also often have related pages and page actions.

Browser support

The Page Header component internally uses Array.prototype.findIndex() and may require a polyfill to provide browser support depending on the specific requirements for your application. We recommend using Polyfill.io in your application to apply necessary polyfills only when they are needed for the requesting browser.

Related components

• Button
• Layout
• Link
• Page
• Chip
• Label