Skip to main content

Page Header

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

Purpose​

Page Headers help users to orient themselves, to navigate through the application, and to take actions.

Title and Breadcrumbs tell the user where they are inside an application at any time. The Page Menu lets them access sub-pages and the Page Actions offer page-level operations, e.g. Share, Export, Filter.

The call-to-action Buttons either show actions to enter a user-flow, e.g. Add New Data Set, or actions within such flow, e.g. Cancel, Save.

Anatomy​

Composition​

  • 1 Page Title (required)
  • 2 Admin Actions (optional)
  • 3 Page Actions (optional)
  • 4 Breadcrumb (optional)
  • 5 Filter Bar (optional)

The Page Header has at least a Page Title. All other components are optional — they only make sense in a certain context or scenario as explained further below.

Variants​

The Page Header has different content depending on the context. Most Page Header instances will fall into two variants: The most basic, featuring only Title and possibly Breadcrumbs 1 and Page Headers with menus and page action buttons 2. The width is always flexible, the height is always fixed.

Usage​

There is only one Page Header per Page, placed at the very top.

Page Headers always have a fixed height but flexible width. The Breadcrumbs, Page Title and Page Menu are always left-aligned. The Primary and Secondary Buttons, as well as the Page Action Buttons are always right-aligned.

Very long Page Titles get truncated with an ellipsis, the full Title reveals inside a Tooltip on mouse-over.