When to use
- Long, complex content
- Flows (2+ steps)
- Medium or long forms, which require multiple inputs from the user
- Content that demands a lot of focus, such as checkout flows
- Content that may be simple today but that you envision growing to require a child page in the short/medium term
Layout and functionality
- They can contain any type of content or component, just like a regular page
- They support scrolling
- They can trigger a dialogue or side panel
- They don’t appear on the side nav
- They don’t collapse the side nav
Breadcrumbs
Always include a dynamic breadcrumb on the top-left corner to anchor the user about where they are.
- Clicking on the breadcrumb takes you back to the original page (entry point to the child page).
- For stepped experiences, the breadcrumb never takes you back to the previous step. Use buttons for that.
- The breadcrumb must specify what that previous page is, e.g. “Back to Payroll Dashboard”
- Copy: “Back to {{previous page name}}”
Stepped experiences
Child pages are a great way to make users go through a stepped flow, as they focus the user’s experience on the task at hand.
To allow users to move through the stepped experience, do:
- Include buttons to move within the steps of the child page
- Stack these buttons side by side on a sticky bottom bar (color: White Stripes)
- Copy: Back / Next
