Any additional props to provide to the default LayoutAppBar
The children to display within the layout. This is pretty much required since you'll have an empty app otherwise, but it's left as optional just for prototyping purposes.
A custom implementation for the button that closes the toggleable layouts.
If this is not undefined, it will be used instead of the default
implementation.
The default implementation for this component will be to only render for toggleable layouts and close the navigation panel once clicked.
Using this prop will make the closeNavProps do nothing.
Any additional props to provide to the default
LayoutCloseNavigationButton component.
A custom implementation for the main AppBarTitle within the Layout that
will be used instead of the default LayoutAppBarTitle if it is not
undefined. This means that if you don't want to have a title within the
main AppBar, set this value to null.
Using this prop will make the following props do nothing:
titletitlePropsThis prop is used to be able to update the toggleable layouts to start visible/expanded instead of requiring the toggle button to be pressed.
If this is:
"toggleable" - the "toggleable-mini" variant will still require a
button click to be visible"toggleable-mini" - the "toggleable" variant will still require a
button click to be visibletrue - both toggleable variants will start visiblefalse | undefined - both toggleable variants will require a button
click to be visibleThe type of layout to use when your app is viewed on a desktop sized screen.
The base id to use for everything within the layout component. The id
will be applied to:
LayoutAppBar as ${id}-headerAppBarTitle as ${id}-titleLayoutNavToggle as ${id}-nav-toggleLayoutMain element as ${id}-mainThe type of layout to use when your app is viewed on a landscape tablet sized screen.
The type of layout to use when your app is viewed on a large desktop sized screen.
Note: Unlike all the other layout types, this one will automatically
inherit the desktopLayout if it is omitted.
Any optional props to provide to the <main> element of the page.
A custom implementation for the main mini navigation component within the
Layout. If this is not undefined, it will be used instead of the
default implementation.
Using this prop will make the following props do nothing for the mini nav:
navPropsnavHeadernavHeaderPropsnavHeaderTitlenavHeaderTitlePropscloseNavcloseNavPropstreePropsAn optional tree to use for the mini navigation pane since the default behavior of rendering mini tree items might hide content in an undesirable way.
This prop allows you to provide additional props to the <div> surrounding
the LayoutMain and mini LayoutNavigation components.
Note: This additional <div> will only be rendered if:
miniminiNav prop has not been definedtreeProps have been providedA custom implementation for the main navigation component within the
Layout. If this is not undefined, it will be used instead of the
default implementation.
Using this prop will make the following props do nothing:
navPropsnavHeadernavHeaderPropsnavHeaderTitlenavHeaderTitlePropscloseNavcloseNavPropstreePropsBoolean if the main app bar should appear after the navigation component. It is generally recommended to enable this prop if the navigation component as a focusable element in the header since it will have a better tab focus order.
A custom implementation for the main navigation component's header element
within the Layout. If this is not undefined, it will be used instead of
the default implementation.
Using this prop will make the following props do nothing:
navHeaderPropsnavHeaderTitlenavHeaderTitlePropscloseNavcloseNavPropsAny additional props to provide to the default LayoutNavigation
component.
An optional title to display within the LayoutNavigation's header
component. This will be defaulted to being wrapped with an AppBarTitle
component for additional styling.
Any additional props to provide to the AppBarTitle surrounding the
navHeaderTitle.
Any additional props to provide to the default LayoutNavigation.
An optional custom nav toggle to use within the Layout or LayoutAppBar
instead of the default implementation.
Any optional props to provide to the default LayoutNavToggle
implementation.
The type of layout to use when your app is viewed on a phone sized screen.
Any additional props to provide to the <SkipToMainContent /> link that is
automatically rendered in the layout.
The type of layout to use when your app is viewed on a portrait tabled sized screen.
An optional main title to display in the Layout. This should normally be
something like the page title since it will be rendered in the default
AppBar for the Layout.
Any additional props that should be applied to the layout's default
AppBarTitle.
This is the most important prop within the Layout if you want to have a
navigation tree. This prop should normally be created by using the
useLayoutNavigation hook but you can always provide any additional props
that are required to style or customize your tree.
Example:
<Layout
treeProps={useLayoutNavigation(navItems, window.location.pathname)}
{...props}
/>
or with additional props:
<Layout
treeProps={{
...useLayoutNavigation(navItems, window.location.pathname),
...otherTreeProps
}}
{...props}
/>
Please see the useLayoutNavigation hook for additional documentation.
Generated using TypeDoc
A custom implementation for the main
AppBarwithin theLayoutthat will be used instead of the defaultLayoutAppBarif it is notundefined. This means that if you don't want to use anAppBarat all in your application, set this value tonull.Using this prop will make the following props do nothing:
appBarPropscustomTitletitletitleProps