Anatomy
The Page consists of five primary elements that work together to create page layouts in Anvil2.
- Header
- Main content
- Footer
- Panel
- Sidebar
Options
The Page supports the following configurations to accommodate various page layout scenarios.
Title
With description
With breadcrumb
With chips
With actions
Main content
The main content area handles your primary content and, on its own, doesn’t have any specific options. You’ll always use it with a Layout component to get that consistent design you’re looking for. Plus, its padding dynamically adjusts based on available space for the best experience.
The Footer is designed as a sticky element, ensuring it’s always at the bottom of your page’s main content for a consistent user experience. Keep in mind, it doesn’t come with any individual options.
Panel
The Panel offers two distinct choices: a persistent option and a toggleable option. Each is designed for different use cases and should be implemented according to specific guidelines. It’s also important to note that the Panel behaves differently based on responsiveness.
The Sidebar itself doesn’t have individual options, but you can configure its openness. This is done by using its own state, which is stored with a localStorageKey. It’s designed specifically to house SideNav components.
Behavior
The Page responds to different screen sizes with responsive behaviors for header, panel, and sidebar while maintaining consistent layout structure.
The Header is designed to conform to the width of your page content, typically using a max-width of 1280px or a fluid setting from the Layout component. It will always fit within the padding provided by the Page component.
On larger screens, if content overflows, each section of the header will wrap as needed, but this happens after reaching a maximum of 6 columns.
Panel responsiveness
The Panel behaves differently in responsive mode depending on the option you choose. In persistent mode, the Panel moves below the main content, becoming a sequential part of the flow. However, in toggleable mode, its content shifts into a Dialog that appears on top of the page.
On smaller screens, the Sidebar adapts by transforming into a dropdown that appears at the top of the page.
Usage Guidelines
Use the Page as the foundation for all ServiceTitan application pages.
When to Use
The Page component is the foundation for all ServiceTitan application pages, ensuring a unified look and feel across the entire platform. With built-in features like a collapsible Sidebar for SideNavigation, and both toggleable and persistent panels, it gives you the functions needed to create robust applications while maintaining that consistent, unified design.
The PageHeader component is a required element for all ServiceTitan application pages with a header. It was created to eliminate inconsistencies and ensure a uniform appearance.
At its core, the PageHeader requires a title. However, it also includes various features to cover common use cases, such as:
- A description to provide additional context.
- Breadcrumbs for easy navigation.
- Chips to display statuses.
- Action sets to house primary and secondary page actions.
The Page footer is designed as a sticky element, positioned at the bottom of the screen to remain visible at all times. This makes it ideal for providing key page actions, such as “Save” or “Submit” buttons, that users need constant access to.
Panel
The Page panel gives you two options: a toggleable panel to provide details for a selected item in your main content, and a persistent panel to display additional content for the page itself. For instance, you would use a persistent panel to display a live activity feed or a tool palette that users need constant access to while they work on the main content.
The Page sidebar is built to host navigation, specifically using a SideNav component. It can also include a sidebar header for clear context. While you aren’t strictly restricted from adding other content, it’s highly recommended to use it for navigation and titles only. This helps maintain a consistent experience and ensures users can easily recognize its purpose.
How to Use
Panel
The persistent panel is designed to be self-contained and doesn’t require any additional methods to be used. However, a toggleable panel must be opened through an action on the page’s main content, such as clicking a button or a specific item. This ensures the panel only appears when it’s directly relevant to the user’s task.
Content
Content within the Page should be organized using the header, main content, footer, panel, and sidebar structure to create clear page hierarchy.
Keyboard Interaction
Users can navigate the Page using standard keyboard controls. Last modified on January 23, 2026
