React

Page layout

Examples
  • All but the last example 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 in a boolean into the isNavOpen prop to PageSidebar

    The last example demonstrates this.

  • 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%

Examples

Basic nav

Skip to Content

Main Title

Body text should be Overpass Regular at 16px. It should have leading of 24px because
of it’s relative line height of 1.5.

Default nav

Skip to Content

Main Title

Body text should be Overpass Regular at 16px. It should have leading of 24px because
of it’s relative line height of 1.5.

Expandable nav

Skip to Content

Main Title

Body text should be Overpass Regular at 16px. It should have leading of 24px because
of it’s relative line height of 1.5.

Grouped nav

Skip to Content

Main Title

Body text should be Overpass Regular at 16px. It should have leading of 24px because
of it’s relative line height of 1.5.

Light
Dark
Darker
Content

Horizontal nav

Skip to Content

Main Title

Body text should be Overpass Regular at 16px. It should have leading of 24px because
of it’s relative line height of 1.5.

Manual nav

Skip to Content

Main Title

Body text should be Overpass Regular at 16px. It should have leading of 24px because
of it’s relative line height of 1.5.

Legacy/Light Nav

Skip to Content

Main Title

Body text should be Overpass Regular at 16px. It should have leading of 24px because
of it’s relative line height of 1.5.