Code

Common Examples

import { Page, SideNav, Text } from "@servicetitan/anvil2";

const ExampleComponent = () => (
  <Page>
    <Page.Sidebar>
      <Page.SidebarHeader>
        <Text variant="headline" el="h2">
          Sidebar Header
        </Text>
      </Page.SidebarHeader>
      <SideNav>
        <SideNav.Link id="01" href="#">
          Nav Link
        </SideNav.Link>
      </SideNav>
    </Page.Sidebar>

    <Page.Header title="Page Title" />

    <Page.Content>
      <Text>Page content.</Text>
    </Page.Content>
  </Page>
);

Page components

In Anvil2, the Page component is used to create full-page layouts, along with a few sub-components listed below. When implementing Page, ensure you are using the method defined by ST Platform.

Page: the parent component to configure full-page layouts.
Page.Sidebar: a collapsible section on the left side of the page.
Page.SidebarHeader: used as the first child of Page.Sidebar to format a header using a Text component.
Page.Header: top section of the page where page actions and title go.
Page.Content: wraps the primary content of the page, and renders as an HTML main element. It should be used with a Layout component to ensure a consistent and structured design with Page.Header.
Page.Panel: an optional section that takes up the right side of the page and can be expanded or collapsed programmatically. Panels render as HTML aside elements.

Adding side bars to the page

The Page.Sidebar component is usually the first child of a Page, and adds a collapsible section to the left of the rest of the page content.The Page.Sidebar should generally have a Page.SidebarHeader and SideNav as its children to create a consistent, responsive, and user-friendly in-page navigation experience.The sidebar can be omitted if the current page does not require a secondary navigation.

<Page>
  <Page.Sidebar>
    <Page.SidebarHeader>
      <Text variant="headline" el="h2">
        Sidebar Header
      </Text>
    </Page.SidebarHeader>
    <SideNav>{/* ... side nav links */}</SideNav>
  </Page.Sidebar>
  <Page.Content>{/* ... page content */}</Page.Content>
</Page>

In order to maintain the collapsed state of the page sidebar after refreshing or navigating to another page, a local storage value is saved to the "sidebar-collapsed" key. The key name can be overridden using the localStorageKey prop.

Adding the header to the page

The Page.Header component should go right above the Page.Content section to ensure proper placement. It houses the page title, breadcrumb navigation, page classifications via chips, page actions, page description, and the page preference/setting action trigger.The Page.header is responsive in nature and has the Layout component built into it. It accepts the same properties you would set on your Page.Content layout via its own layout property, and it is recommended that you keep these values in sync to ensure constraints for the sections remain the same.The title in the Page.Header will always be an h1 to adhere to SEO and accessibility best practices.While the page description is a ReactNode, it is recommended to keep the descriptions simple by using Text and Link components. If a page action needs to be made for the page, use the actions property and not the description area.

<Page>
  <Page.Sidebar>{/* ... sidebar content */}</Page.Sidebar>

  <Page.Header
    title="Title"
    breadcrumbs={breadcrumbs}
    chips={chips}
    actions={actions}
    preferenceAction={{
      "aria-label": "Open settings",
      onClick: () => {},
    }}
    description={
      <Text>
        This page demonstrates all header elements with
        <Text inline>
          <Link href="#" appearance="primary">
            standard actions
          </Link>
        </Text>
      </Text>
    }
  />

  <Page.Content>{/* ... page content */}</Page.Content>
</Page>

Adding panels to the page

The Page.Panel component can be used as a child of a Page, usually after the sidebar and content.Use the open prop to determine if the panel is displayed, and the size prop to change the width of the panel.By default, panels have padding around the inner content. To disable this, use the noPadding prop.

<Page>
  <Page.Sidebar>{/* ... sidebar content  */}</Page.Sidebar>
  <Page.Content>{/* ... page content */}</Page.Content>
  <Page.Panel open size="large">
    {/* ... panel content */}
  </Page.Panel>
</Page>

Best Practices

Use with Layout, Grid, and Flex components

The Page component is the first step in creating consistent and responsive page layouts using Anvil2. Three other component are available to configure dynamic layouts on a page:

Layout: define content max-width and column structure (usually the direct descendent of Page.Content) that matches Page.Header.
Grid: easily use CSS Grid to create dynamic content areas.
Flex: create CSS Flexbox containers for simple to moderate content layout.

<Page>
  <Page.Sidebar>...</Page.Sidebar>
  <Page.Header title="Page Title" />
  <Page.Content>...</Page.Content>
</Page>

`Page` Props

The Page component can accept any valid HTML div props.

<Page.Sidebar localStorageKey="sidebar-collapse">
  <Page.SidebarHeader>Header</Page.SidebarHeader>
  <SideNav>...</SideNav>
</Page.Sidebar>

In addition to the props listed below, the Page.Sidebar component can accept any valid HTML div props.

currentPageTitle

string

Title to display in the adaptive trigger button on mobile.

localStorageKey

string

default:"sidebar-collapsed"

See Sidebar collapsed state in local storage.

<Page.SidebarHeader>
  <Text variant="headline" el="h2">
    Header
  </Text>
</Page.SidebarHeader>

`Page.SidebarHeader` Props

The Page.SidebarHeader component can accept any valid HTML div props.

<Page.Header
  title="Page Title"
  breadcrumbs={breadcrumbs}
  chips={chips}
  description="Page description"
  actions={{
    primary: { label: "Primary Action", onClick: () => {} },
    secondary: [{ label: "Secondary Action", onClick: () => {} }],
  }}
  preferenceAction={{
    "aria-label": "Open settings",
    onClick: () => {},
  }}
  layout={{ fluid: false, variant: "default" }}
/>

The Page.Header component can accept any valid HTML header props, as well as the following:

title

string

required

The page title.

actions

{ primary?: ButtonProps & { label: string; }; secondary?: ButtonProps & { label: string; }[]; }

If there are more than 3+ actions of any combination, the secondary actions combine into a single menu. Label is required for actions.

breadcrumbs

BreadcrumbsLinkProps[]

chips

ChipProps[]

description

ReactNode

layout

LayoutProps

preferenceAction

(ButtonProps | ButtonLinkProps) & { aria-label: string }

Renders a preference/settings button in the header.This will only ever be an icon-only button or link, so aria-label is required.

<Page.Content>
  <Layout>
    <Layout.Item span={12}>Content</Layout.Item>
  </Layout>
</Page.Content>

`Page.Content` Props

The Page.Content component can accept any valid HTML main props.

<Page.Panel open={true} size="medium" noPadding={false}>
  Panel content
</Page.Panel>

`Page.Panel` Props

The Page.Panel component can accept any valid HTML aside props, as well as the following:

noPadding

boolean

open

boolean

size

"small" | "medium" | "large"

default:"medium"

Anvil2 Web

Resources

Common Examples

Page components

Adding side bars to the page

Sidebar collapsed state in local storage

Adding the header to the page

Adding panels to the page

Best Practices

Use with Layout, Grid, and Flex components

`Page` Props

`Page.Sidebar` Props

`Page.SidebarHeader` Props

`Page.Header` Props

`Page.Content` Props

`Page.Panel` Props

Anvil2 Web

Resources

​Common Examples

​Page components

​Adding side bars to the page

​Sidebar collapsed state in local storage

​Adding the header to the page

​Adding panels to the page

​Best Practices

​Use with Layout, Grid, and Flex components

​Page Props

​Page.Sidebar Props

​Page.SidebarHeader Props

​Page.Header Props

​Page.Content Props

​Page.Panel Props

Common Examples

Page components

Adding side bars to the page

Sidebar collapsed state in local storage

Adding the header to the page

Adding panels to the page

Best Practices

Use with Layout, Grid, and Flex components

`Page` Props

`Page.Sidebar` Props

`Page.SidebarHeader` Props

`Page.Header` Props

`Page.Content` Props

`Page.Panel` Props