Responsive shell for your application with header, navbar, aside and footer
This page contains documentation only. All AppShell components have a fixed position; examples are included in a separate documentation section.
AppShell is a layout component that can be used to create a common Header / Navbar / Footer / Aside layout pattern. All AppShell components have position: fixed styling, so they do not scroll with the page.
Basic AppShell example with header and navbar. The navbar is hidden on mobile by default and can be toggled with the burger button.
The AppShell component accepts header , footer , navbar , and aside props to configure the corresponding sections. You must set these props if you want to use the corresponding components. For example, to use the AppShell.Header component, you need to set the header prop on the AppShell component.
header and footer configuration objects share the same type:
navbar and aside configuration objects type:
layout prop controls how AppShell.Header / AppShell.Footer and AppShell.Navbar / AppShell.Aside are positioned relative to each other. It accepts alt and default values:
The height property in header and footer configuration objects works as follows:
Example with height as a number: height is converted to rem , and height remains the same at all viewport sizes:
Example with height as an object with breakpoints:
The width property in navbar and aside configuration objects works as follows:
Example with width as a number: width is converted to rem , and width remains the same at viewport sizes larger than breakpoint . The width is 100% when viewport width is less than breakpoint :
Example with width as an object with breakpoints:
The padding prop controls the padding of the AppShell.Main component. It's important to use this prop instead of setting padding directly on AppShell.Main because this padding is also used to calculate offsets for the AppShell.Header , AppShell.Navbar , AppShell.Aside , and AppShell.Footer components.
The padding prop works the same way as style props and accepts numbers, strings, and objects with breakpoints as keys and padding values. You can reference theme.spacing values or use any valid CSS value.
Example with static padding prop:
Example with responsive padding prop:
The header prop includes an offset property that allows you to control whether the AppShell.Main component is offset by the header's height. This is particularly useful when you want to collapse the AppShell.Header based on scroll position. For example, you can use the use-headroom hook to hide the header when the user scrolls down and show it when they scroll up ( example ).
The navbar and aside props include a collapsed property that accepts an object with the format { mobile: boolean; desktop: boolean } . This allows you to configure the collapsed state differently based on viewport width.
Example with separate collapsed states for mobile and desktop:
The withBorder prop is available on AppShell and associated sections: AppShell.Header , AppShell.Navbar , AppShell.Aside and AppShell.Footer . By default, withBorder prop is true – all components have a border on the side that is adjacent to the AppShell.Main component. For example, AppShell.Header is located at the top of the page – it has a border on the bottom side, AppShell.Navbar is located on the left side of the page – it has a border on the right side.
To remove the border from all components, set withBorder={false} on the AppShell :
To remove the border from a specific component, set withBorder={false} on that component:
The zIndex prop is available on AppShell and its associated sections: AppShell.Header , AppShell.Navbar , AppShell.Aside , and AppShell.Footer . By default, all sections have a z-index of 100 .
To change the z-index of all sections, set the zIndex prop on the AppShell component:
To change z-index of a specific section, set zIndex prop on that section:
Use the transitionDuration and transitionTimingFunction props on the AppShell component to control section animations:
Set the disabled prop on the AppShell component to prevent all sections except AppShell.Main from rendering. This is useful when you want to hide the shell on certain pages of your application.
AppShell.Section is used to create organized areas within AppShell.Navbar and AppShell.Aside . Since these components are flexbox containers with flex-direction: column , the AppShell.Section component with the grow prop will expand to fill the available space and can be made scrollable by setting component={ScrollArea} .
In the following example:
Important: do not use a <main> element inside AppShell.Main , as only one <main> element is allowed per page.
Example of using CSS variables in styles: