The Page Header represents the top section of the site, directly below the global header. High level informational displays, actions, and navigation may exist in the page header.
Most pages in the application have a repeatable pattern of components. This documentation provides the general best practice for what can be added to a header, where in it, and when to use it. This pattern is used in conjunction with our Page component.
Consistency in structure and page relation. On any given page, how the header arranges descriptions, actions, and navigation should be similar across the application.
Prioritize small vertical height. Many pages in the ServiceTitan app are dense. Headers should help users complete their tasks on a page, but should get out of the way for the page’s main content.
Consistency in foundational styles. There are many ways to subtly visualize the same header. Standardizing the foundational choices, from text sizes to button variations, improves familiarity to users.
Page Headers are broken up into three general functions: The description of the page, actions on the page, and navigation within the page.
Most pages will provide a basic amount of information in the header, typically just a page title.
Most pages should have a title. The title should represent the main content of the page itself, including user-generated titles.
Descriptions provide a more detailed overview of what the page is about. In general this will be a single line of text, but can be customized to fit the specific needs of a page. A title should always be used with a description.
Tags provide useful metadata about the page. The relative importance of this data varies from page to page: the visual variations provided by Tags can help prioritize them in the header.