Skip to main content

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
  };

  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
Loading...

App Icon​

App Icon is a part of the title. To display App Icon with the title, you can add the appIcon (ReactNode) to title config. It's an external component (mfe-components) and recommended size is small.

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

import { AppIcon } from '@adjust/mfe-components ';

function MyPageHeader() {
  const titleConfig = {
    text: 'Page Title',
    appIcon: <AppIcon appId="com.adjust.insights" appName="adjust Insights" size="small" />
  };

  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
    />
  );
}

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.

  1. 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.

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

  2. 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
    />
  );
}
Result
Loading...

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, appIcon, 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
    />
  );
}
Result
Loading...

Breadcrumbs with back button

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

  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
Loading...

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
    />
  );
}
Result
Loading...

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
    />
  );
}
Result
Loading...

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
    />
  );
}
Result
Loading...

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
    />
  );
}
Result
Loading...

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
    />
  );
}
Result
Loading...

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
    />
  );
}
Result
Loading...

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'
  };

  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
Loading...

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
    />
  );
}
Result
Loading...

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
    />
  );
}
Result
Loading...

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
    />
  );
}
Result
Loading...

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
      />
    </>
  );
}
Result
Loading...

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
    />
  );
}
Result
Loading...

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
    />
  );
}
Result
Loading...

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
    />
  );
}
Result
Loading...

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
    />
  );
}
Result
Loading...

Props​

NameTypeDefault
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.