React

Page layout

Examples

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%

Using simple navigation

Simple Nav
Copied to clipboard

Using default navigation

Default Nav
Copied to clipboard

Using expandable navigation

Expandable Nav
Copied to clipboard

Using grouped navigation

Grouped Nav
Copied to clipboard

Using horizontal navigation

Horizontal Nav
Copied to clipboard

Programmatically toggle the sidebar

Manual Nav
Copied to clipboard

Using legacy/light theme

This Preview can only be accessed in full page mode.
Copied to clipboard