A custom implementation for the main AppBar within the Layout that will
be used instead of the default LayoutAppBar if it is not undefined.
This means that if you don't want to use an AppBar at all in your
application, set this value to null.
Using this prop will make the following props do nothing:
appBarPropscustomTitletitletitlePropsAny 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:
titletitlePropsThe 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}-mainAny 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.
Any additional props to provide to the <SkipToMainContent /> link that is
automatically rendered in the layout.
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
This used to just be the
LayoutPropsbut was split up to help with mini layouts.@since 2.7.0