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

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

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

Breadcrumbs with back button

Live Editor
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

Live Editor
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
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
Result
Loading...

You can mange the tabs with activeTabValue and onTabChange props.

Live Editor
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
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
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
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
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
Result
Loading...

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