Page

A page component defines the basic layout of a page, with either vertical or horizontal navigation.

  • All examples set the isManagedSidebar prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the isManagedSidebar prop and instead:

    1. Add an onNavToggle callback to PageHeader
    2. Pass a boolean into the isNavOpen prop to PageSidebar

Layouts

This demonstrates a variety of navigation patterns in the context of a full page layout. These can be used as a basis for choosing the most appropriate page template for your application.

Sticky section group

Sticky section group screenshot

Sticky section group (alternate syntax)

Sticky section group (alternate syntax) screenshot

Sticky section breadcrumb (with breakpoints)

Sticky section breadcrumb (with breakpoints) screenshot

Context selector/perspective switcher in sidebar

Context selector/perspective switcher in sidebar screenshot