Skip to content
PatternFly logo


The page component is used to define 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
  • To make the page take up the full height, it is recommended to set the height of all ancestor elements up to the page component to 100%


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 group (using PageHeader)

This demo is provided becuase PageHeader and PageHeaderTools are still in use; however, going forward Masthead and Toolbar should be used to make headers rather than PageHeader and PageHeaderTools.

Sticky section group (using PageHeader) screenshot

Sticky section breadcrumb (with breakpoints)

Sticky section breadcrumb (with breakpoints) screenshot

View source on GitHub