OLYSENSE Design System

In its simplest form, a page header consists of a page title. See further guidance below in the Page Title & Breadcrumbs usage section .

Page Title

<ods-page-header>
  <span>
    Page Title
  </span>
</ods-page-header>

import { OdsPageHeader } from '@ods/components/react.page-header';

const Example = () => {
  return (
    <OdsPageHeader>
      <span>
        Page Title
      </span>
    </OdsPageHeader>
  )
}

export default Example;

The right-aligned action slot allows for one or more page-level actions, like Save or Export. See further guidance below in the Action Slot usage section .

Page Title

Secondary Action

Primary Action

<ods-page-header>
  <span>
    Page Title
  </span>
  <span slot="page-header-actions">
    <div ods-layout="inline gap:md inline:end">
      <ods-button variant='secondary'>Secondary Action</ods-button>
      <ods-button variant='primary'>Primary Action</ods-button>
    </div>
  </span>
</ods-page-header>

import { OdsPageHeader } from '@ods/components/react.page-header';
import { OdsButton } from '@ods/components/react.button';

const Example = () => {
  return (
    <OdsPageHeader>
      <span>
        Page Title
      </span>
      <span slot="page-header-actions">
        <div ods-layout="inline gap:md inline:end">
        <OdsButton variant='secondary'>Secondary Action</OdsButton>
        <OdsButton variant='primary'>Primary Action</OdsButton>
      </div>
      </span>
    </OdsPageHeader>
  )
}

export default Example;

An overflow should be used in certain situations when adding additional elements that will take up too much space. See further guidance below in the Action Slot usage section .

Page Title

Cut

Copy

Paste

Primary Action

<ods-page-header class="example">
  <span>
    Page Title
  </span>
  <span slot="page-header-actions" ods-layout="inline gap:md">
    <ods-dropdown placement="top-end">
      <ods-icon-button variant='secondary' name="more-horiz" slot="trigger"></ods-icon-button>
      <ods-menu>
        <ods-menu-item value="cut">Cut</ods-menu-item>
        <ods-menu-item value="copy">Copy</ods-menu-item>
        <ods-menu-item value="paste">Paste</ods-menu-item>
      </ods-menu>
    </ods-dropdown>

    <ods-button variant='primary'>Primary Action</ods-button>
  </span>
</ods-page-header>

<style>
  .example {
    margin-bottom: 75px;
  }
</style>

import { OdsPageHeader } from '@ods/components/react.page-header';
import { OdsIconButton } from '@ods/components/react.icon-button';
import { OdsButton } from '@ods/components/react.button';
import { OdsDropdown } from '@ods/components/react.dropdown';
import { OdsMenu } from '@ods/components/react.menu';
import { OdsMenuItem } from '@ods/components/react.menu-item';

const css = `
  .example {
    margin-bottom: 75px;
  }
`;

const Example = () => {
  return (
    <>
      <OdsPageHeader className="example">
        <span>
          Page Title
        </span>
        <span slot="page-header-actions" ods-layout="inline gap:md">
          <OdsDropdown placement="top-end">
            <OdsIconButton variant='secondary' name="more-horiz" slot="trigger"></OdsIconButton>
            <OdsMenu>
              <OdsMenuItem value="cut">Cut</OdsMenuItem>
              <OdsMenuItem value="copy">Copy</OdsMenuItem>
              <OdsMenuItem value="paste">Paste</OdsMenuItem>
            </OdsMenu>
          </OdsDropdown>

          <OdsButton variant='primary'>Primary Action</OdsButton>
        </span>
      </OdsPageHeader>

      <style>{css}</style>
    </>
  )
}

export default Example;

The navigation slot can be used to open and close the side navigation container as shown here. See further guidance below in the Navigation Slot usage section .

Page Title

Primary Action

<ods-page-header expandContentEnabled>
  <span>
    <ods-icon name="settings"></ods-icon>
    Page Title
  </span>
  <span slot="page-header-actions">
    <ods-button variant='primary'>Primary Action</ods-button>
  </span>
</ods-page-header>

import { OdsPageHeader } from '@ods/components/react.page-header';
import { OdsButton } from '@ods/components/react.button';
import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  return (
    <OdsPageHeader expandContentEnabled>
      <span>
        <OdsIcon name="settings" slot='prefix'></OdsIcon>
        Page Title
      </span>
      <span slot="page-header-actions">
        <OdsButton variant='primary'>Primary Action</OdsButton>
      </span>
    </OdsPageHeader>
  )
}

export default Example;

The navigation slot can be used to provide a back action when in a focused view. See further guidance below in the Navigation Slot usage section .

<ods-page-header backEnabled id="page-header-example">
  <span>
    Page Title
  </span>
  <span slot="page-header-actions">
    <ods-button variant='primary'>Primary Action</ods-button>
  </span>
</ods-page-header>

<script>
  const pageHeaderExample = document.getElementById('page-header-example');

  pageHeaderExample.addEventListener('ods-layout-navigate-back', (event) => {
    alert('Navigate back to the parent page.');
  });
</script>

import { OdsPageHeader } from '@ods/components/react.page-header';
import { OdsButton } from '@ods/components/react.button';

const Example = () => {
  const navigateBack = () => {
    alert('Navigate back to the parent page.');
  }

  return (
    <OdsPageHeader backEnabled onOdsLayoutNavigateBack={navigateBack}>
      <span>
        Page Title
      </span>
      <span slot="page-header-actions">
        <OdsButton variant='primary'>Primary Action</OdsButton>
      </span>
    </OdsPageHeader>
  )
}

export default Example;

Breadcrumbs help orient a user whenever they navigate into focused views or subpages within a group. See further guidance below in the Page Title & Breadcrumbs usage section .

Page Title

Sub Page 1

Sub Page 2

Primary Action

<ods-page-header backEnabled>
  <ods-breadcrumb>
    <ods-breadcrumb-item>Page Title</ods-breadcrumb-item>
    <ods-breadcrumb-item>Sub Page 1</ods-breadcrumb-item>
    <ods-breadcrumb-item>Sub Page 2</ods-breadcrumb-item>
  </ods-breadcrumb>
  <span slot="page-header-actions">
    <ods-button variant='primary'>Primary Action</ods-button>
  </span>
</ods-page-header>

import { OdsPageHeader } from '@ods/components/react.page-header';
import { OdsButton } from '@ods/components/react.button';
import { OdsBreadcrumb } from '@ods/components/react.breadcrumb';
import { OdsBreadcrumbItem } from '@ods/components/react.breadcrumb-item';

const Example = () => {
  return (
    <OdsPageHeader backEnabled>
      <OdsBreadcrumb>
        <OdsBreadcrumbItem>Page Title</OdsBreadcrumbItem>
        <OdsBreadcrumbItem>Sub Page</OdsBreadcrumbItem>
        <OdsBreadcrumbItem>Sub Page</OdsBreadcrumbItem>
      </OdsBreadcrumb>
      <span slot="page-header-actions">
        <OdsButton variant='primary'>Primary Action</OdsButton>
      </span>
    </OdsPageHeader>
  )
}

export default Example;

The tabs-region slot can be used to provide Tabs in an Page or Focused View. See Tab Group for more information on using Tabs,

Page Title

Primary Action

Tab One

Tab Two

Tab Three

<ods-page-header>
  <span>
    Page Title
  </span>

  <span slot="page-header-actions" ods-layout="inline gap:md">
    <ods-button variant='primary'>Primary Action</ods-button>
  </span>

  <ods-tab-group slot="tab-region" hidetrack>
    <ods-tab slot="nav" panel="tabOne" selected>Tab One</ods-tab>
    <ods-tab slot="nav" panel="tabTwo">Tab Two</ods-tab>
    <ods-tab slot="nav" panel="tabThree">Tab Three</ods-tab>
  </ods-tab-group>
</ods-page-header>

import { OdsPageHeader } from '@ods/components/react.page-header';
import { OdsButton } from '@ods/components/react.button';
import { OdsTab } from '@ods/components/react.tab';
import { OdsTabGroup } from '@ods/components/react.tab-group';

const Example = () => {
  return (
    <>
      <OdsPageHeader>
        <span>
          Page Title
        </span>
        <span slot="page-header-actions" ods-layout="inline gap:md">
          <OdsButton variant='primary'>Primary Action</OdsButton>
        </span>

        <OdsTabGroup slot="tab-region" hidetrack>
          <OdsTab slot="nav" panel="tabOne">Tab One</OdsTab>
          <OdsTab slot="nav" panel="tabTwo">Tab Two</OdsTab>
          <OdsTab slot="nav" panel="tabThree">Tab Three</OdsTab>
        </OdsTabGroup>

      </OdsPageHeader>
    </>
  )
}

export default Example;

The tabs-region slot can be used to provide Tabs in an Page or Focused View. See Tab Group for more information on using Tabs,

<ods-page-header backEnabled id="page-header-example">
  <span>
    Page Title
  </span>
  <span slot="page-header-actions">
    <ods-button variant='primary'>Primary Action</ods-button>
  </span>

  <ods-tab-group slot="tab-region" hidetrack>
    <ods-tab slot="nav" panel="tabOne" selected>Tab One</ods-tab>
    <ods-tab slot="nav" panel="tabTwo">Tab Two</ods-tab>
    <ods-tab slot="nav" panel="tabThree">Tab Three</ods-tab>
  </ods-tab-group>
</ods-page-header>

<script>
  const pageHeaderExample = document.getElementById('page-header-example');

  pageHeaderExample.addEventListener('ods-layout-navigate-back', (event) => {
    alert('Navigate back to the parent page.');
  });
</script>

import { OdsPageHeader } from '@ods/components/react.page-header';
import { OdsButton } from '@ods/components/react.button';
import { OdsTab } from '@ods/components/react.tab';
import { OdsTabGroup } from '@ods/components/react.tab-group';

const Example = () => {
  const navigateBack = () => {
    alert('Navigate back to the parent page.');
  }

  return (
    <OdsPageHeader backEnabled onOdsLayoutNavigateBack={navigateBack}>
      <span>
        Page Title
      </span>
      <span slot="page-header-actions">
        <OdsButton variant='primary'>Primary Action</OdsButton>
      </span>

      <OdsTabGroup slot="tab-region" hidetrack>
        <OdsTab slot="nav" panel="tabOne">Tab One</OdsTab>
        <OdsTab slot="nav" panel="tabTwo">Tab Two</OdsTab>
        <OdsTab slot="nav" panel="tabThree">Tab Three</OdsTab>
      </OdsTabGroup>
    </OdsPageHeader>
  )
}

export default Example;

Importing

import '@ods/components/web.page-header';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Slots

Name	Description
(default)	The page headers' content.
page-header-actions	The page headers' action region.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Type	Default
expandContentEnabled	boolean	false
backEnabled	boolean	false
sticky	boolean	true

Events

React Event	Description	Event Detail
ods-layout-drawer-show	Emitted when the side navigation expand icon is clicked.	--
ods-layout-drawer-hide	Emitted when the side navigation collapse icon is clicked.	--
ods-layout-navigate-back	Emitted when the back button is clicked.	--

Parts

Name	Description
base	The component's base wrapper.
page-header-tab-region	The component's tab region.

Page Headers are crucial to helping users understand where they are within an application at any given time, with or without a side navigation structure present. As such they should be implemented accurately and in accordance with our guidelines in all instances. Page Headers are fixed by default but can be made to scroll if absolutely needed to accommodate more page content.

The Navigation Slot is used to open and close the Side Nav container or provide a back action when in a Focused View. If your application doesn’t have a Side Nav you can skip the Side nav container pattern and use a Page Title only variation.

Use the included nav drawer trigger action icon in the Page Header
Use the back arrow to navigate back up through a stack pages

Implement a different way to open/close side nav
Mix up the back and close actions from one page to the next

Page Title & Breadcrumbs

Page Titles can be used on top-level pages, but should switch to Breadcrumbs on sub pages to help keep user oriented.

Breadcrumbs help orient a user whenever they navigate into focused views or subpages within a Group. They should reflect the Side Nav hierarchy and terminology. See the breadcrumbs component for more info.

Use Breadcrumbs according to guidelines
Mimic hierarchy from Side Nav
Use Page Titles on parent pages only

Implement breadcrumbs that don’t follow guidelines
Switch terms between side nav and breadcrumbs/page titles
Use Page Titles on child pages

The right-aligned Action Slot allows for one or more page-level actions, like Save or Export. You can use up to 2 full-size buttons, 4 Icon Buttons, and leverage an overflow menu for any additional actions as needed. There is also space for a short message.

Use the Action Slot to host page-level actions like Save, End Procedure, Export, Add Group etc
Use an overflow for more than 2 button actions
Use an overflow menu for more than 4 Icon actions
Use a single Primary action plus an overflow for additional actions
Use a Secondary or Default style button for the page level action if the page action is not needed in order to advance the user. i.e., Export on an Insights page
Use the message space for page-level info like Last Updated timestamps, or procedure duration timers
Keep the message short, non-actionable info

Use action slot for actions that only relate to one part of the page content
Use an Overflow on it’s own - include at least one button
Use the message area for temporal alerts or notifications
Use the message area for Error messaging

Page Header

Examples

Basic

With Actions

With Overflow

With Side Navigation

With Back Button

With Tabs

With Tabs Back

Importing

Slots

Properties

Events

Parts

Usage

Navigation Slot

Do

Dont

Do

Dont

Action Slot

Do

Dont

Page Header

Examples

Basic

With Actions

With Overflow

With Side Navigation

With Back Button

With Breadcrumb

With Tabs

With Tabs Back

Importing

Slots

Properties

Events

Parts

Usage

Navigation Slot

Do

Dont

Page Title & Breadcrumbs

Do

Dont

Action Slot

Do

Dont