Page Header

The Page Header helps users to navigate an Adjust application and gives quick access to page-level actions.

The Page Header has three main types: Default, Edit, and Wizard Page Headers.

You can use the kind prop to specify the page header type. For the Edit Page Header, you can use the (kind="edit"), and for the Wizard Page Header, you can use the (kind="wizard").

If you want to use the Default Page Header, you don't need to use the kind prop.

Example

Live Editor

function MyPageHeader() {
  const breadcrumbsData = [
    { label: 'Deliverables', url: '/deliverables' },
    { label: 'NetworkD', url: '/networkd' },
    { label: 'Creative_H' }
  ];

  const titleConfig = {
    text: 'Page Title',
    isEditable: true,
    appIcon: {
      appId: 'com.adjust.insights',
      appName: 'adjust Insights'
    }
  };

  const actions = {
    iconActions: [
      {
        id: 'fav',
        name: 'Star',
        tooltip: {
          content: 'Rate us'
        },
        onClick: () => console.log('fav is clicked')
      },
      {
        id: 'settings',
        name: 'CogWheel',
        tooltip: {
          content: 'App settings'
        },
        onClick: () => console.log('settings is clicked')
      },
      {
        id: 'share',
        name: 'Share',
        tooltip: {
          content: 'Share with your connection'
        },
        onClick: () => console.log('share is clicked')
      },

      {
        id: 'download',
        name: 'Download',
        tooltip: {
          content: 'Download report'
        },
        onClick: () => console.log('download is clicked')
      },
      {
        id: 'DotsHorizontal',
        name: 'DotsHorizontal',
        actionMenu: {
          items: [
            { label: 'Accept', onClick: () => {}, iconName: 'Check' },
            { label: 'Decline', onClick: () => {}, iconName: 'Cross' }
          ],
          placement: 'bottom-end'
        }
      }
    ],
    buttonActions: {
      primaryAction: {
        label: 'Primary',
        isLoading: true,
        disabled: true,
        tooltip: {
          content: 'Please wait...'
        },
        onClick: () => console.log('primary action clicked')
      },
      secondaryAction: {
        label: 'Secondary',
        onClick: () => console.log('secondary action clicked')
      }
    }
  };

  const notificationsInitial = [
    {
      id: '1',
      title: 'Warning 1',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    },
    {
      id: '2',
      title: 'Warning 2',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    },
    {
      id: '3',
      title: 'Warning 3',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    },
    {
      id: '4',
      title: 'Warning 4',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    }
  ];

  const tabs = [
    { id: '1', label: 'Examples' },
    { id: '2', label: 'Components' },
    { id: '3', label: 'Design Tokens' },
    { id: '4', label: 'Patterns' }
  ];

  const [activeTab, setActiveTab] = useState(tabs[0].id);

  const initialSearchTerms = {
    1: { value: '' },
    2: { value: '' },
    3: { value: '' },
    4: { value: '' }
  };

  const [searchTerms, setSearchTerms] = useState(initialSearchTerms);

  const { value } = searchTerms[activeTab];

  const onChangeHandler = (event) => {
    const searchValue = event.target.value;
    setSearchTerms({ ...searchTerms, [activeTab]: { value: searchValue } });
  };

  const onClearHandler = () =>
    setSearchTerms({ ...searchTerms, [activeTab]: { value: '' } });

  const search = {
    value: value,
    onChange: onChangeHandler,
    onClear: onClearHandler,
    placeholder: 'Search...',
    dataTestId: 'search-test-id'
  };

  const FilterComponents = () => {
    const items = [
      {
        label: 'apple',
        value: 'apple'
      },
      {
        label: 'banana',
        value: 'banana'
      }
    ];

    const [selectedItems, setSelectedItems] = useState(items);

    return (
      <>
        <FilterButton
          name="Fruits"
          items={items}
          selectedItems={selectedItems}
          onApply={setSelectedItems}
          showResetButton
        />
        <FilterButton
          name="Fruits"
          items={items}
          selectedItems={selectedItems}
          onApply={setSelectedItems}
          showResetButton
        />
      </>
    );
  };

  const onTitleEdit = (updatedTitleValue) => {
    return console.log('edited title value', updatedTitleValue);
  };

  const onTabChangeHandler = (id) => {
    setActiveTab(id);
    setSearchTerms({ ...searchTerms, [activeTab]: { value: '' } });
  };

  const [notifications, setNotifications] = useState(notificationsInitial);

  const onCloseNotification = (id) => {
    if (id === 'all') {
      return setNotifications([]);
    }
    const modified = notifications.filter(
      (a) => a.id.toString() !== id.toString()
    );
    return setNotifications(modified);
  };
    const MyComponent = () => {
   return ( 
    <ActionMenu
          items={[
            {
              label: "save",
              iconName: 'DocumentSave',
            },
            {
              label: "Save as new",
              iconName: 'DocumentCopy',
            },
          ]}
        >
           <Tooltip content="save">
            <Button
              label="Save"
              kind="primary"
              iconName='ChevronDown'
              iconAlignment='right'
            />
          </Tooltip>
        </ActionMenu>
        )
  }
  return (
    <PageHeader
      breadcrumbs={breadcrumbsData}
      title={titleConfig}
      customActions={<MyComponent />}
      actions={actions}
      onTitleEdit={onTitleEdit}
      tabs={tabs}
      activeTabValue={activeTab}
      onTabChange={(id) => onTabChangeHandler(id)}
      search={search}
      filters={<FilterComponents />}
      notifications={notifications}
      notificationDismissBtnLabel="Dismiss All"
      onCloseNotification={onCloseNotification}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
      data-testid="atlas-page-header"
    />
  );
}

function MyPageHeader() {
  const breadcrumbsData = [
    { label: 'Deliverables', url: '/deliverables' },
    { label: 'NetworkD', url: '/networkd' },
    { label: 'Creative_H' }
  ];

  const titleConfig = {
    text: 'Page Title',
    isEditable: true,
    appIcon: {
      appId: 'com.adjust.insights',
      appName: 'adjust Insights'
    }
  };

  const actions = {
    iconActions: [
      {
        id: 'fav',
        name: 'Star',
        tooltip: {
          content: 'Rate us'
        },
        onClick: () => console.log('fav is clicked')
      },
      {
        id: 'settings',
        name: 'CogWheel',
        tooltip: {
          content: 'App settings'
        },
        onClick: () => console.log('settings is clicked')
      },
      {
        id: 'share',
        name: 'Share',
        tooltip: {
          content: 'Share with your connection'
        },
        onClick: () => console.log('share is clicked')
      },

      {
        id: 'download',
        name: 'Download',
        tooltip: {
          content: 'Download report'
        },
        onClick: () => console.log('download is clicked')
      },
      {
        id: 'DotsHorizontal',
        name: 'DotsHorizontal',
        actionMenu: {
          items: [
            { label: 'Accept', onClick: () => {}, iconName: 'Check' },
            { label: 'Decline', onClick: () => {}, iconName: 'Cross' }
          ],
          placement: 'bottom-end'
        }
      }
    ],
    buttonActions: {
      primaryAction: {
        label: 'Primary',
        isLoading: true,
        disabled: true,
        tooltip: {
          content: 'Please wait...'
        },
        onClick: () => console.log('primary action clicked')
      },
      secondaryAction: {
        label: 'Secondary',
        onClick: () => console.log('secondary action clicked')
      }
    }
  };

  const notificationsInitial = [
    {
      id: '1',
      title: 'Warning 1',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    },
    {
      id: '2',
      title: 'Warning 2',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    },
    {
      id: '3',
      title: 'Warning 3',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    },
    {
      id: '4',
      title: 'Warning 4',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    }
  ];

  const tabs = [
    { id: '1', label: 'Examples' },
    { id: '2', label: 'Components' },
    { id: '3', label: 'Design Tokens' },
    { id: '4', label: 'Patterns' }
  ];

  const [activeTab, setActiveTab] = useState(tabs[0].id);

  const initialSearchTerms = {
    1: { value: '' },
    2: { value: '' },
    3: { value: '' },
    4: { value: '' }
  };

  const [searchTerms, setSearchTerms] = useState(initialSearchTerms);

  const { value } = searchTerms[activeTab];

  const onChangeHandler = (event) => {
    const searchValue = event.target.value;
    setSearchTerms({ ...searchTerms, [activeTab]: { value: searchValue } });
  };

  const onClearHandler = () =>
    setSearchTerms({ ...searchTerms, [activeTab]: { value: '' } });

  const search = {
    value: value,
    onChange: onChangeHandler,
    onClear: onClearHandler,
    placeholder: 'Search...',
    dataTestId: 'search-test-id'
  };

  const FilterComponents = () => {
    const items = [
      {
        label: 'apple',
        value: 'apple'
      },
      {
        label: 'banana',
        value: 'banana'
      }
    ];

    const [selectedItems, setSelectedItems] = useState(items);

    return (
      <>
        <FilterButton
          name="Fruits"
          items={items}
          selectedItems={selectedItems}
          onApply={setSelectedItems}
          showResetButton
        />
        <FilterButton
          name="Fruits"
          items={items}
          selectedItems={selectedItems}
          onApply={setSelectedItems}
          showResetButton
        />
      </>
    );
  };

  const onTitleEdit = (updatedTitleValue) => {
    return console.log('edited title value', updatedTitleValue);
  };

  const onTabChangeHandler = (id) => {
    setActiveTab(id);
    setSearchTerms({ ...searchTerms, [activeTab]: { value: '' } });
  };

  const [notifications, setNotifications] = useState(notificationsInitial);

  const onCloseNotification = (id) => {
    if (id === 'all') {
      return setNotifications([]);
    }
    const modified = notifications.filter(
      (a) => a.id.toString() !== id.toString()
    );
    return setNotifications(modified);
  };
    const MyComponent = () => {
   return ( 
    <ActionMenu
          items={[
            {
              label: "save",
              iconName: 'DocumentSave',
            },
            {
              label: "Save as new",
              iconName: 'DocumentCopy',
            },
          ]}
        >
           <Tooltip content="save">
            <Button
              label="Save"
              kind="primary"
              iconName='ChevronDown'
              iconAlignment='right'
            />
          </Tooltip>
        </ActionMenu>
        )
  }
  return (
    <PageHeader
      breadcrumbs={breadcrumbsData}
      title={titleConfig}
      customActions={<MyComponent />}
      actions={actions}
      onTitleEdit={onTitleEdit}
      tabs={tabs}
      activeTabValue={activeTab}
      onTabChange={(id) => onTabChangeHandler(id)}
      search={search}
      filters={<FilterComponents />}
      notifications={notifications}
      notificationDismissBtnLabel="Dismiss All"
      onCloseNotification={onCloseNotification}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
      data-testid="atlas-page-header"
    />
  );
}

Result

App Icon

The AppIcon is part of the Title. To display AppIcon with the Title, you can provide the appId and appName inside the title object, as in the example below.

AppIcon can be used only with the default and Edit-Page (kind='edit') Header types.

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    appIcon: {
      appId: 'com.adjust.insights',
      appName: 'adjust Insights'
    }
  };

  return (
    <PageHeader
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    appIcon: {
      appId: 'com.adjust.insights',
      appName: 'adjust Insights'
    }
  };

  return (
    <PageHeader
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

Actions

Actions are displayed on the right side of the header. There are three types of actions in this area: icon actions, button actions and custom actions.

You can provide the icon actions by adding prop actions as an object. Each action object has id (required), name (required), onClick (optional) and onIconActionClick (optional callback to get the id of clicked icon action).

The icon actions can be used as:

A dropdown content with dropdownContent (optional) props. You also can custom your dropdown by adding isDropdownOpen: boolean and dropdownContent: ReactNode to your icon action object. isDropdownOpen gives you the ability to control the visibility of the dropdown area.
An action menu with actionMenu (optional) props. You can use all the features of Action Menu.

You can provide the button actions by adding actions as an object. Each action object has label (required), onClick (required).
You can provide the custom actions by adding customActions as a ReactNode.

info

You can use both props actions and customActions with the Default header type only.

Live Editor

function MyPageHeader() {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  
  const CustomComponent = ({ setIsDropdownOpen }) => {
    return (
      <Tile>
        <div style={{ display: 'flex', width: '100%', marginBottom: '20px' }}>
          dropwdown content
        </div>
        <Button
          label="Close"
          kind="primary"
          onClick={() => setIsDropdownOpen(false)}
        />
      </Tile>
    );
  };
  const [isLoading, setIsLoading] = useState(false);
  const actions = {
    iconActions: [
      {
        id: 'fav',
        name: 'Star',
        onClick: () => setIsDropdownOpen(true),
        isDropdownOpen: isDropdownOpen,
        dropdownContent: (
          <CustomComponent setIsDropdownOpen={setIsDropdownOpen} />
        )
      },
      {
        id: 'settings',
        name: 'CogWheel',
        onClick: () => console.log('settings is clicked')
      },
      {
        id: 'share',
        name: 'Share',
        isDisabled: isLoading,
        isLoading: isLoading,
        onClick: () => setIsLoading(!isLoading)
      },
      {
        id: 'download',
        name: 'Download',
        onClick: () => console.log('download is clicked')
      },
      {
        id: 'DotsHorizontal',
        name: 'DotsHorizontal',
        actionMenu: {
          items: [
            { label: 'Accept', onClick: () => {}, iconName: 'Check' },
            { label: 'Decline', onClick: () => {}, iconName: 'Cross' },
            { type: 'divider' },
            { label: 'Abort', onClick: () => {} }
          ],
          offset: [0, 0],
          placement: 'bottom-end'
        }
      }
    ],
    buttonActions: {
      primaryAction: {
        label: 'Primary',
        onClick: () => console.log('primary action clicked')
      },
      secondaryAction: {
        label: 'Secondary',
        onClick: () => console.log('secondary action clicked')
      }
    }
  };

  const titleConfig = {
    text: 'Page Title'
  };

  const onIconActionClick = (id) => {
    return console.log('clicked icon action id', id);
  };
 
  const MyComponent = () => {
   return ( 
     <ActionMenu
          items={[
            {
              label: "save",
              iconName: 'DocumentSave',
            },
            {
              label: "Save as new",
              iconName: 'DocumentCopy',
            },
          ]}
        >
           <Tooltip content="save">
            <Button
              label="Save"
              kind="primary"
              iconName='ChevronDown'
              iconAlignment='right'
            />
          </Tooltip>
        </ActionMenu>
        )}

  return (
    <PageHeader
      actions={actions}
      customActions={<MyComponent />}
      title={titleConfig}
      onIconActionClick={onIconActionClick}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  
  const CustomComponent = ({ setIsDropdownOpen }) => {
    return (
      <Tile>
        <div style={{ display: 'flex', width: '100%', marginBottom: '20px' }}>
          dropwdown content
        </div>
        <Button
          label="Close"
          kind="primary"
          onClick={() => setIsDropdownOpen(false)}
        />
      </Tile>
    );
  };
  const [isLoading, setIsLoading] = useState(false);
  const actions = {
    iconActions: [
      {
        id: 'fav',
        name: 'Star',
        onClick: () => setIsDropdownOpen(true),
        isDropdownOpen: isDropdownOpen,
        dropdownContent: (
          <CustomComponent setIsDropdownOpen={setIsDropdownOpen} />
        )
      },
      {
        id: 'settings',
        name: 'CogWheel',
        onClick: () => console.log('settings is clicked')
      },
      {
        id: 'share',
        name: 'Share',
        isDisabled: isLoading,
        isLoading: isLoading,
        onClick: () => setIsLoading(!isLoading)
      },
      {
        id: 'download',
        name: 'Download',
        onClick: () => console.log('download is clicked')
      },
      {
        id: 'DotsHorizontal',
        name: 'DotsHorizontal',
        actionMenu: {
          items: [
            { label: 'Accept', onClick: () => {}, iconName: 'Check' },
            { label: 'Decline', onClick: () => {}, iconName: 'Cross' },
            { type: 'divider' },
            { label: 'Abort', onClick: () => {} }
          ],
          offset: [0, 0],
          placement: 'bottom-end'
        }
      }
    ],
    buttonActions: {
      primaryAction: {
        label: 'Primary',
        onClick: () => console.log('primary action clicked')
      },
      secondaryAction: {
        label: 'Secondary',
        onClick: () => console.log('secondary action clicked')
      }
    }
  };

  const titleConfig = {
    text: 'Page Title'
  };

  const onIconActionClick = (id) => {
    return console.log('clicked icon action id', id);
  };
 
  const MyComponent = () => {
   return ( 
     <ActionMenu
          items={[
            {
              label: "save",
              iconName: 'DocumentSave',
            },
            {
              label: "Save as new",
              iconName: 'DocumentCopy',
            },
          ]}
        >
           <Tooltip content="save">
            <Button
              label="Save"
              kind="primary"
              iconName='ChevronDown'
              iconAlignment='right'
            />
          </Tooltip>
        </ActionMenu>
        )}

  return (
    <PageHeader
      actions={actions}
      customActions={<MyComponent />}
      title={titleConfig}
      onIconActionClick={onIconActionClick}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

Breadcrumbs

To display Breadcrumbs inside the header, you can use the breadcrumbs prop. The data that breadcrumbs prop waits is described in the example below.

You can also use the label, url, appId, appName, iconName, dataTestId, onClick props for your breadcrumb item. Which is also using for the Breadcrumbs component.

You can use the breadcrumbs only with the default and Edit-Page (kind='edit') header.

Live Editor

function MyPageHeader() {
  const breadcrumbsData = [
    { label: 'Deliverables', url: '/deliverables' },
    { label: 'NetworkD', url: '/networkd' },
    { label: 'Creative_H' }
  ];

  const titleConfig = {
    text: 'Page Title'
  };

  return (
    <PageHeader
      breadcrumbs={breadcrumbsData}
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const breadcrumbsData = [
    { label: 'Deliverables', url: '/deliverables' },
    { label: 'NetworkD', url: '/networkd' },
    { label: 'Creative_H' }
  ];

  const titleConfig = {
    text: 'Page Title'
  };

  return (
    <PageHeader
      breadcrumbs={breadcrumbsData}
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

Breadcrumbs with back button

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    appIcon: {
      appId: 'com.adjust.insights',
      appName: 'adjust Insights'
    }
  };

  const breadcrumbs = [
    { label: 'Deliverables', url: '/deliverables' },
    { label: 'NetworkD', url: '/networkd' },
    { label: 'Creative_H' }
  ];

  return (
    <PageHeader
      breadcrumbs={breadcrumbs}
      backButton={{ label: 'Back', url: '/' }}
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    appIcon: {
      appId: 'com.adjust.insights',
      appName: 'adjust Insights'
    }
  };

  const breadcrumbs = [
    { label: 'Deliverables', url: '/deliverables' },
    { label: 'NetworkD', url: '/networkd' },
    { label: 'Creative_H' }
  ];

  return (
    <PageHeader
      breadcrumbs={breadcrumbs}
      backButton={{ label: 'Back', url: '/' }}
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

Editable Title

The title supports inline editing. To make the title editable, you can provide isEditable: true in the title object, as in the example below.

To get the title value from input at onChange, you can use the onTitleEdit prop. as in the example below.

You can use the title editing only with the default page header. Also, you can use the onTitleBlur prop as a callback when Title is blured.

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    isEditable: true
  };

  const onTitleEdit = (title) => {
    return console.log('title', title);
  };

  return (
    <PageHeader
      title={titleConfig}
      onTitleEdit={onTitleEdit}
      onTitleBlur={(text) => console.log('blured', text) }
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    isEditable: true
  };

  const onTitleEdit = (title) => {
    return console.log('title', title);
  };

  return (
    <PageHeader
      title={titleConfig}
      onTitleEdit={onTitleEdit}
      onTitleBlur={(text) => console.log('blured', text) }
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

Filters

You can use your filter components inside the Filters area shown in the example below. The filters prop accepts the ReactNode. you can send your custom component via the filters prop to the header to use filter components in this area.

You can use the filters only with the default page header.

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title'
  };

  const FilterComponents = () => {
    const items = [
      {
        label: 'apple',
        value: 'apple'
      },
      {
        label: 'banana',
        value: 'banana'
      }
    ];

    const [selectedItems, setSelectedItems] = useState(items);
    const [dateRange, setDateRange] = useState({
      startDate: new Date(),
      endDate: new Date(),
      period: 'last-7-days'
    });
    const customDateFormat = (date) => {
      return date.toLocaleDateString();
    };

    const { startDate, endDate, period } = dateRange;
    return (
      <>
        <FilterButton
          name="Fruits"
          items={items}
          selectedItems={selectedItems}
          onApply={setSelectedItems}
          showResetButton
        />
        <DatePickerButton
          customDateFormat={customDateFormat}
          startDate={startDate}
          endDate={endDate}
          period={period}
          onApply={setDateRange}
        />
        <FilterButton
          name="Country"
          items={items}
          selectedItems={selectedItems}
          onApply={setSelectedItems}
          showResetButton
        />
        <FilterButton
          name="Partner"
          items={items}
          selectedItems={selectedItems}
          onApply={setSelectedItems}
          showResetButton
        />
      </>
    );
  };

  return (
    <PageHeader
      title={titleConfig}
      filters={<FilterComponents />}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title'
  };

  const FilterComponents = () => {
    const items = [
      {
        label: 'apple',
        value: 'apple'
      },
      {
        label: 'banana',
        value: 'banana'
      }
    ];

    const [selectedItems, setSelectedItems] = useState(items);
    const [dateRange, setDateRange] = useState({
      startDate: new Date(),
      endDate: new Date(),
      period: 'last-7-days'
    });
    const customDateFormat = (date) => {
      return date.toLocaleDateString();
    };

    const { startDate, endDate, period } = dateRange;
    return (
      <>
        <FilterButton
          name="Fruits"
          items={items}
          selectedItems={selectedItems}
          onApply={setSelectedItems}
          showResetButton
        />
        <DatePickerButton
          customDateFormat={customDateFormat}
          startDate={startDate}
          endDate={endDate}
          period={period}
          onApply={setDateRange}
        />
        <FilterButton
          name="Country"
          items={items}
          selectedItems={selectedItems}
          onApply={setSelectedItems}
          showResetButton
        />
        <FilterButton
          name="Partner"
          items={items}
          selectedItems={selectedItems}
          onApply={setSelectedItems}
          showResetButton
        />
      </>
    );
  };

  return (
    <PageHeader
      title={titleConfig}
      filters={<FilterComponents />}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

Tab Bar

You can use the tabs as navigation in the header by using the tabs prop as in the below example.

You can use the tab bar only with the default page header.

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title'
  };

  const tabs = [
    { id: '1', label: 'Examples', url: '#' },
    {
      id: '2',
      label: 'Components',
      url: 'https://atlas.adjust.com/docs/components/introduction'
    },
    {
      id: '3',
      label: 'Design Tokens',
      url: 'https://atlas.adjust.com/docs/design-tokens/introduction'
    },
    {
      id: '4',
      label: 'Patterns',
      url: 'https://atlas.adjust.com/docs/patterns/introduction'
    }
  ];

  return (
    <PageHeader
      title={titleConfig}
      tabs={tabs}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title'
  };

  const tabs = [
    { id: '1', label: 'Examples', url: '#' },
    {
      id: '2',
      label: 'Components',
      url: 'https://atlas.adjust.com/docs/components/introduction'
    },
    {
      id: '3',
      label: 'Design Tokens',
      url: 'https://atlas.adjust.com/docs/design-tokens/introduction'
    },
    {
      id: '4',
      label: 'Patterns',
      url: 'https://atlas.adjust.com/docs/patterns/introduction'
    }
  ];

  return (
    <PageHeader
      title={titleConfig}
      tabs={tabs}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

You can mange the tabs with activeTabValue and onTabChange props.

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title'
  };

  const tabs = [
    { id: '1', label: 'Examples' },
    { id: '2', label: 'Components' },
    { id: '3', label: 'Design Tokens' },
    { id: '4', label: 'Patterns' }
  ];

  const [value, setValue] = useState(tabs[0].id);

  const handleChange = (id) => {
    setValue(id);
  };

  return (
    <PageHeader
      title={titleConfig}
      tabs={tabs}
      activeTabValue={value}
      onTabChange={(id) => handleChange(id)}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title'
  };

  const tabs = [
    { id: '1', label: 'Examples' },
    { id: '2', label: 'Components' },
    { id: '3', label: 'Design Tokens' },
    { id: '4', label: 'Patterns' }
  ];

  const [value, setValue] = useState(tabs[0].id);

  const handleChange = (id) => {
    setValue(id);
  };

  return (
    <PageHeader
      title={titleConfig}
      tabs={tabs}
      activeTabValue={value}
      onTabChange={(id) => handleChange(id)}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

Search

You can use the search input in the header by using the search prop as in the below example. You can also use the following props inside your search object: value, disabled, placeholder, onChange, onClear, onBlur, onFocus, onKeyDown. Which is also using for the Input component.

You can use the search only with the default page header.

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title'
  };

  const [searchValue, setSearchValue] = useState('Joe Doe');

  const onChangeHandler = (event) => {
    const searchValue = event.target.value;
    setSearchValue(searchValue);
  };

  const onClearHandler = () => setSearchValue('');

  const search = {
    value: searchValue,
    onChange: onChangeHandler,
    onClear: onClearHandler,
    placeholder: 'Search...'
  };

  return (
    <PageHeader
      title={titleConfig}
      search={search}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title'
  };

  const [searchValue, setSearchValue] = useState('Joe Doe');

  const onChangeHandler = (event) => {
    const searchValue = event.target.value;
    setSearchValue(searchValue);
  };

  const onClearHandler = () => setSearchValue('');

  const search = {
    value: searchValue,
    onChange: onChangeHandler,
    onClear: onClearHandler,
    placeholder: 'Search...'
  };

  return (
    <PageHeader
      title={titleConfig}
      search={search}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

Title Actions

You can use the additional actions with the title area by adding actions to your title object, as in the below example. Title actions are limited with two action.

You can use the title actions only with the default page header.

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    actions: [
      {
        id: 'refetch',
        label: 'Refetch',
        iconName: 'ArrowCircleRight',
        onClick: () => {
          console.log('clicked to refetch');
        }
      },
      {
        id: 'external',
        label: 'External',
        iconName: 'LinkExternal',
        onClick: () => {
          console.log('clicked to external');
        }
      }
    ]
  };

  return (
    <PageHeader
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    actions: [
      {
        id: 'refetch',
        label: 'Refetch',
        iconName: 'ArrowCircleRight',
        onClick: () => {
          console.log('clicked to refetch');
        }
      },
      {
        id: 'external',
        label: 'External',
        iconName: 'LinkExternal',
        onClick: () => {
          console.log('clicked to external');
        }
      }
    ]
  };

  return (
    <PageHeader
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

Edit Page Header

Edit Page Header is another kind of page header component. You can see the features of this header type in the following.

Example

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    appIcon: {
      appId: 'com.adjust.insights',
      appName: 'adjust Insights'
    }
  };

  const breadcrumbs = [
    { label: 'Deliverables', url: '/deliverables' },
    { label: 'NetworkD', url: '/networkd' },
    { label: 'Creative_H' }
  ];

  return (
    <PageHeader
      kind="edit"
      breadcrumbs={breadcrumbs}
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    appIcon: {
      appId: 'com.adjust.insights',
      appName: 'adjust Insights'
    }
  };

  const breadcrumbs = [
    { label: 'Deliverables', url: '/deliverables' },
    { label: 'NetworkD', url: '/networkd' },
    { label: 'Creative_H' }
  ];

  return (
    <PageHeader
      kind="edit"
      breadcrumbs={breadcrumbs}
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

Back Button

The back button feature is an element to navigate the user to the previous page. You can use the backButton prop to provide a back button label and URL properties as in the below example.

You can use the back button only with the Edit-Page (kind='edit') header.

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title'
  };

  const backButton = { label: 'Back', url: '/' };

  return (
    <PageHeader
      kind="edit"
      backButton={backButton}
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title'
  };

  const backButton = { label: 'Back', url: '/' };

  return (
    <PageHeader
      kind="edit"
      backButton={backButton}
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

Breadcrumbs

To display Breadcrumbs inside the header, you can use the breadcrumbs prop. The data that breadcrumbs prop waits is described in the example below.

You can use the breadcrumbs only with the default and Edit-Page (kind='edit') header.

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title'
  };
  const breadcrumbs = [
    { label: 'Deliverables', url: '/deliverables' },
    { label: 'NetworkD', url: '/networkd' },
    { label: 'Creative_H' }
  ];

  return (
    <PageHeader
      kind="edit"
      breadcrumbs={breadcrumbs}
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title'
  };
  const breadcrumbs = [
    { label: 'Deliverables', url: '/deliverables' },
    { label: 'NetworkD', url: '/networkd' },
    { label: 'Creative_H' }
  ];

  return (
    <PageHeader
      kind="edit"
      breadcrumbs={breadcrumbs}
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

AppIcon

The AppIcon is part of the Title. You can provide the appId and appName inside the title object, as in the example below, to display AppIcon with the Title.

AppIcon can be used only with the default and Edit-Page (kind='edit') Header types.

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    appIcon: {
      appId: 'com.adjust.insights',
      appName: 'adjust Insights'
    }
  };

  return (
    <PageHeader
      kind="edit"
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change values to: position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    appIcon: {
      appId: 'com.adjust.insights',
      appName: 'adjust Insights'
    }
  };

  return (
    <PageHeader
      kind="edit"
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change values to: position: 'fixed', zIndex: 200
    />
  );
}

Result

Wizard Page Header

Wizard Page Header is another kind of page header component. You can see the features of this header type in the following.

Example

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    badgeLabel: 'Optional',
    previousButton: {
      label: 'Previous',
      onClick: () => console.log('Close action clicked')
    }
  };

  const actions = {
    buttonActions: {
      closeAction: {
        label: 'Close',
        onClick: () => console.log('Close action clicked')
      }
    }
  };

  return (
    <PageHeader
      kind="wizard"
      title={titleConfig}
      actions={actions}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    badgeLabel: 'Optional',
    previousButton: {
      label: 'Previous',
      onClick: () => console.log('Close action clicked')
    }
  };

  const actions = {
    buttonActions: {
      closeAction: {
        label: 'Close',
        onClick: () => console.log('Close action clicked')
      }
    }
  };

  return (
    <PageHeader
      kind="wizard"
      title={titleConfig}
      actions={actions}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

Layout

The content fixed width of the Wizard header can be managened by layout prop.

The prop accepts 2 variant large and x-large

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    badgeLabel: 'Optional',
    previousButton: {
      label: 'Previous',
      onClick: () => console.log('Close action clicked')
    }
  };

  const actions = {
    buttonActions: {
      closeAction: {
        label: 'Close',
        onClick: () => console.log('Close action clicked')
      }
    }
  };

  return (
    <>
      <PageHeader
        kind="wizard"
        title={titleConfig}
        actions={actions}
        layout="large"
        css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
      />
      <br />
      <PageHeader
        kind="wizard"
        title={titleConfig}
        actions={actions}
        layout="x-large"
        css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
      />
    </>
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    badgeLabel: 'Optional',
    previousButton: {
      label: 'Previous',
      onClick: () => console.log('Close action clicked')
    }
  };

  const actions = {
    buttonActions: {
      closeAction: {
        label: 'Close',
        onClick: () => console.log('Close action clicked')
      }
    }
  };

  return (
    <>
      <PageHeader
        kind="wizard"
        title={titleConfig}
        actions={actions}
        layout="large"
        css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
      />
      <br />
      <PageHeader
        kind="wizard"
        title={titleConfig}
        actions={actions}
        layout="x-large"
        css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
      />
    </>
  );
}

Result

Close Button

The close button action is part of the actions area and can be used only with the Wizard-type page header.

To use the close action button on your header, you can add the closeAction values (label, onClick) to your actions object as in the below example.

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title'
  };

  const actions = {
    buttonActions: {
      closeAction: {
        label: 'Close',
        onClick: () => console.log('Close action clicked')
      }
    }
  };

  return (
    <PageHeader
      kind="wizard"
      actions={actions}
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title'
  };

  const actions = {
    buttonActions: {
      closeAction: {
        label: 'Close',
        onClick: () => console.log('Close action clicked')
      }
    }
  };

  return (
    <PageHeader
      kind="wizard"
      actions={actions}
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

Optional Badge

You can use the optional badge by adding the badge label value to your title object, as in the below example.

Badge can be used only with the Default-Page or Wizard-Page (kind='wizard') Header types.

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    badgeLabel: 'Optional'
  };

  return (
    <PageHeader
      kind="wizard"
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    badgeLabel: 'Optional'
  };

  return (
    <PageHeader
      kind="wizard"
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

Previous Button

The previous button action is part of the title and can be used only with the Wizard-type page header.

To use the previous button on your header, you can add the previousButton values (label, onClick) to your title object as in the below example.

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    previousButton: {
      label: 'Previous',
      onClick: () => console.log('Previous button clicked')
    }
  };

  return (
    <PageHeader
      kind="wizard"
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    previousButton: {
      label: 'Previous',
      onClick: () => console.log('Previous button clicked')
    }
  };

  return (
    <PageHeader
      kind="wizard"
      title={titleConfig}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

Notifications

The header can include a button responsible for showing warning banners related to reports, accounts, connections, etc. To using notifications feature. You can use the following props as described in following example.

notifications: The prop for providing notification items data. We are using the Atlas Banner component as a notification item. The notification item object contains the same properties as the Banner component. Ps: (you need to use a unique 'id' for your banner items.)
onCloseNotification: the callback for getting information about closed item id.
notificationDismissBtnLabel: Dismiss all button label value
notificationBtnTooltipContent: The prop helps to show the tooltip with the notification panel button.

Live Editor

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title'
  };

  const notificationsInitial = [
    {
      id: '1',
      title: 'Warning 1',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    },
    {
      id: '2',
      title: 'Warning 2',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    },
    {
      id: '3',
      title: 'Warning 3',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    },
    {
      id: '4',
      title: 'Warning 4',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    },
    {
      id: '5',
      title: 'Warning 5',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    }
  ];

  const [notifications, setNotifications] = useState(notificationsInitial);

  const onCloseNotification = (id) => {
    if (id === 'all') {
      return setNotifications([]);
    }
    const modified = notifications.filter(
      (a) => a.id.toString() !== id.toString()
    );
    return setNotifications(modified);
  };

  return (
    <PageHeader
      title={titleConfig}
      notifications={notifications}
      onCloseNotification={onCloseNotification}
      notificationDismissBtnLabel="Dismiss All"
      notificationBtnTooltipContent={<>See the notifications</>}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title'
  };

  const notificationsInitial = [
    {
      id: '1',
      title: 'Warning 1',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    },
    {
      id: '2',
      title: 'Warning 2',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    },
    {
      id: '3',
      title: 'Warning 3',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    },
    {
      id: '4',
      title: 'Warning 4',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    },
    {
      id: '5',
      title: 'Warning 5',
      description:
        'To load your report, we removed these invalid metrics: Rejected Installs, Rejected Reattributions.',
      kind: 'warning',
      primaryAction: {
        label: 'Primary Action',
        onClick: () => console.log('Clicking Primary button')
      },
      secondaryAction: {
        label: 'Secondary Action With Icon',
        iconName: 'Copy',
        onClick: () => console.log('Clicking Secondary button')
      },
      closable: true
    }
  ];

  const [notifications, setNotifications] = useState(notificationsInitial);

  const onCloseNotification = (id) => {
    if (id === 'all') {
      return setNotifications([]);
    }
    const modified = notifications.filter(
      (a) => a.id.toString() !== id.toString()
    );
    return setNotifications(modified);
  };

  return (
    <PageHeader
      title={titleConfig}
      notifications={notifications}
      onCloseNotification={onCloseNotification}
      notificationDismissBtnLabel="Dismiss All"
      notificationBtnTooltipContent={<>See the notifications</>}
      css={{ position: 'sticky', zIndex: 100 }} // to fit with Preview Container. To see header fixed to top of the page, change position: 'fixed', zIndex: 200
    />
  );
}

Result

Props

Name	Type	Default
title * Page header title	TitleConfig	—
actions Displays Icon and Button actions	ActionsType	—
backButton Displays back button on the breadcrumb area	(Pick<BreadcrumbsItemType, "url" \| "as" \| "dataTestId"> & Pick<ButtonProps, "disabled" \| "label" \| "onClick">)	—
breadcrumbs Array of breadcrumbs items. See the structure of `BreadcrumbsItemType`. The last item represents the current page within a set of pages	HeaderBreadCrumbsItem[]	—
filters Displays custom filter components inside the filter area	ReactNode	—
kind Kind of the Page Header	"wizard" \| "default" \| "edit"	—
tabs Displays items for Tab bar	TabItemType[]	—
onIconActionClick callback for getting clicked icon action item id	((actionId: string) => void)	—
onTitleEdit callback for getting onChange value on title editing	((value: string) => void)	—
search Displays search input on the filter area	SearchProps	—
onTabChange onChange handler for tabs	((itemId: string) => void)	—
activeTabValue Id of selected item	string	—
layout Layout is to set inner max-width	"large" \| "x-large"	—
notifications Notification items	BannerProps[]	—
notificationBtnTooltipContent Notifications toggle button tooltip content	ReactNode	—
notificationDismissBtnLabel Notification dismiss all button label value	string	—
isNotificationsDisabled A boolean prop to define the Notifications button as disabled	boolean	—
onCloseNotification Callback to get information about closed notification item	((id?: string) => void)	—
customActions Page Header Custom component	ReactNode	—
onTitleBlur onTitleBlur Callback	((title: string) => void)	—
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

Example​

App Icon​

Actions​

info

Breadcrumbs​

Editable Title​

Filters​

Tab Bar​

Search​

Title Actions​

Edit Page Header

Example​

Back Button​

Breadcrumbs​

AppIcon​

Wizard Page Header

Example​

Layout​

Close Button​

Optional Badge​

Previous Button​

Notifications​

Props​

Example

App Icon

Actions

Breadcrumbs

Editable Title

Filters

Tab Bar

Search

Title Actions

Example

Back Button

Breadcrumbs

AppIcon

Example

Layout

Close Button

Optional Badge

Previous Button

Notifications

Props