Page

Examples

Section with darker background

Section with dark background

Section with light background

Copied to clipboard

Section with darker background

Section with dark background

Section with light background

Copied to clipboard

The Page component accepts the following props.

Name	Type	Default	Description
children	node	null	Content rendered inside the main section of the page layout (e.g. <PageSection />)
className	string	''	Additional classes added to the page layout
header	node	null	Header component (e.g. <PageHeader />)
sidebar	node	null	Sidebar component for a side nav (e.g. <PageSidebar />)

The PageHeader component accepts the following props.

Name	Type	Default	Description
className	string	''	Additional classes added to the page header
logo	node	null	Component to render the logo/brand (e.g. <Brand />)
logoProps	object	null	Additional props passed to the logo anchor container
toolbar	node	null	Component to render the toolbar (e.g. <Toolbar />)
avatar	node	null	Component to render the avatar (e.g. <Avatar />
topNav	node	null	Component to render navigation within the header (e.g. <Nav />
showNavToggle	bool	false	True to show the nav toggle button (toggles side nav)
onNavToggle	func	() => undefined	Callback function to handle the side nav toggle button

The PageSidebar component accepts the following props.

Name	Type	Default	Description
className	string	''	Additional classes added to the page sidebar
nav	node	null	Component to render the side navigation (e.g. <Nav />
isNavOpen	bool	true	True if the side nav is shown

The PageSection component accepts the following props.

Name	Type	Default	Description
children	node	null	Content rendered inside the section
className	string	''	Additional classes added to the section
variant	enum: default, light, dark, darker	'default'	Section background color variant