AppShell component overview
AppShell is a layout component for creating Header / Navbar / Footer / Aside layout patterns. All AppShell components have position: fixed styling and do not scroll with the page.
appshell
26 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
AppShell sub-components
AppShell includes six sub-components: AppShell.Header (fixed header at top, controlled by header prop), AppShell.Navbar (fixed navbar on left, controlled by navbar prop), AppShell.Aside (fixed aside on right, controlled by aside prop), AppShell.Footer (fixed footer at bottom, controlled by footer prop), AppShell.Main (main content area, statically positioned and offset by other sections), and AppShell.Section (utility for grouping content inside Navbar or Aside, useful for scrollable areas).
AppShell header configuration interface
The header prop uses a Configuration object with these properties: height (AppShellSize | AppShellResponsiveSize, required) - height of the section as number, string, or object with breakpoints as keys and heights as values; collapsed (boolean, optional) - when true, section is hidden from viewport and doesn't affect AppShell.Main offset; offset (boolean, optional) - controls whether AppShell.Main should be offset by this section, useful for hiding header based on scroll position.
AppShell footer configuration interface
The footer prop uses the same Configuration object type as header: height (AppShellSize | AppShellResponsiveSize, required) - height of the section as number, string, or object with breakpoints as keys and heights as values; collapsed (boolean, optional) - when true, section is hidden from viewport and doesn't affect AppShell.Main offset; offset (boolean, optional) - controls whether AppShell.Main should be offset by this section.
AppShell navbar configuration interface
The navbar prop uses a Configuration object with these properties: width (AppShellSize | AppShellResponsiveSize, required) - width of the section as number, string, or object with breakpoints as keys and widths as values; breakpoint (MantineBreakpoint | string | number, required) - breakpoint at which section switches to mobile mode, where it always has 100% width and collapsed state is controlled by collapsed.mobile instead of collapsed.desktop; collapsed (optional object) - determines whether the section should be collapsed, accepts { desktop?: boolean; mobile?: boolean }.
AppShell aside configuration interface
The aside prop uses the same Configuration object type as navbar: width (AppShellSize | AppShellResponsiveSize, required) - width of the section as number, string, or object with breakpoints as keys and widths as values; breakpoint (MantineBreakpoint | string | number, required) - breakpoint at which section switches to mobile mode with 100% width and collapsed.mobile control; collapsed (optional object) - { desktop?: boolean; mobile?: boolean } to determine collapsed state.
AppShell layout prop values
The layout prop controls positioning of Header/Footer and Navbar/Aside. It accepts two values: 'alt' - Navbar/Aside extends full viewport height while Header/Footer width equals viewport width minus Navbar/Aside widths; 'default' - Navbar/Aside height equals viewport height minus Header/Footer height, and Header/Footer spans full viewport width.
AppShell height configuration with numbers
When passing a number to the height property in header or footer configuration, the value is converted to rem and used as the height at all viewport sizes.
AppShell height configuration with breakpoints
To change height based on viewport width in header or footer configuration, use an object with breakpoints as keys and height as values. This works the same way as responsive style props. For example, { base: 48, sm: 60, lg: 76 } sets height to 48 when viewport width is < theme.breakpoints.sm, 60 when >= theme.breakpoints.sm and < theme.breakpoints.lg, and 76 when >= theme.breakpoints.lg.
AppShell width configuration with numbers
When passing a number to the width property in navbar or aside configuration, the value is converted to rem and used as the width when viewport is larger than breakpoint. The width is always 100% when viewport width is less than breakpoint.
AppShell width configuration with breakpoints
To change width based on viewport width in navbar or aside configuration, use an object with breakpoints as keys and width as values. Note that width is always 100% when viewport is smaller than breakpoint. For example, { sm: 200, lg: 300 } with breakpoint 'sm' sets width to 100% when viewport < theme.breakpoints.sm, 200 when >= theme.breakpoints.sm and < theme.breakpoints.lg, and 300 when >= theme.breakpoints.lg.
AppShell padding prop behavior
The padding prop controls the padding of AppShell.Main component. It must be used instead of setting padding directly on AppShell.Main because this padding is also used to calculate offsets for AppShell.Header, Navbar, Aside, and Footer components. It works the same way as responsive style props and accepts numbers, strings, and objects with breakpoints as keys.
AppShell withBorder prop default behavior
By default, withBorder prop is true on AppShell and all sections (Header, Navbar, Aside, Footer). Each component has a border on the side adjacent to AppShell.Main: Header has bottom border, Navbar has right border, Aside has left border, Footer has top border.
AppShell withBorder prop usage
Set withBorder={false} on AppShell to remove borders from all sections. To remove border from a specific component only, set withBorder={false} on that individual section component (e.g., AppShell.Header).
AppShell zIndex default value
By default, all AppShell sections (Header, Navbar, Aside, Footer) have a z-index of 100.
AppShell zIndex prop usage
Set the zIndex prop on AppShell component to change z-index of all sections globally. To change z-index of a specific section, set the zIndex prop on that individual section component (e.g., AppShell.Navbar).
AppShell transition control props
Use transitionDuration and transitionTimingFunction props on AppShell component to control section animations. For example, transitionDuration={500} and transitionTimingFunction="ease".
AppShell disabled prop
Set the disabled prop on AppShell component to prevent all sections except AppShell.Main from rendering. This is useful when hiding the shell on certain pages of an application.
AppShell.Section grow and scrolling
AppShell.Section with the grow prop expands to fill available space. It can be made scrollable by setting component={ScrollArea}. Sections are flexbox containers with flex-direction: column.
AppShell semantic HTML elements
AppShell components render specific semantic HTML elements: AppShell.Header renders <header>, AppShell.Footer renders <footer>, AppShell.Main renders <main>, AppShell.Navbar renders <nav>, AppShell.Aside renders <aside>, AppShell.Section renders <div>. Important: do not use a <main> element inside AppShell.Main, as only one <main> element is allowed per page.
AppShell CSS variables
AppShell provides these CSS variables: --app-shell-navbar-width (navbar width), --app-shell-navbar-offset (navbar offset), --app-shell-aside-width (aside width), --app-shell-aside-offset (aside offset), --app-shell-header-height (header height), --app-shell-header-offset (header offset), --app-shell-footer-height (footer height), --app-shell-footer-offset (footer offset). Example usage in styles: min-height: calc(100dvh - var(--app-shell-header-height)).
AppShell basic example with header and navbar
Example showing AppShell with header height 60, navbar width 300 at breakpoint 'sm', with navbar hidden on mobile and togglable via burger button using useDisclosure hook: import { AppShell, Burger } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; function Demo() { const [opened, { toggle }] = useDisclosure(); return ( <AppShell padding="md" header={{ height: 60 }} navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: !opened }, }} > <AppShell.Header> <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" /> <div>Logo</div> </AppShell.Header> <AppShell.Navbar>Navbar</AppShell.Navbar> <AppShell.Main>Main</AppShell.Main> </AppShell> ); }
AppShell header offset example with useHeadroom
Example using header offset property to control AppShell.Main offset when collapsing header based on scroll position with useHeadroom hook: import { AppShell, rem } from '@mantine/core'; import { useHeadroom } from '@mantine/hooks'; function Demo() { const { pinned } = useHeadroom({ fixedAt: 120 }); return ( <AppShell header={{ height: 60, collapsed: !pinned, offset: false }} padding="md" > <AppShell.Header>Header</AppShell.Header> <AppShell.Main pt={`calc(${rem(60)} + var(--mantine-spacing-md))`} > {/* Content */} </AppShell.Main> </AppShell> ); }
AppShell separate mobile and desktop collapse states example
Example with separate collapsed states for mobile and desktop using useDisclosure hook twice: import { AppShell, Button } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; export function CollapseDesktop() { const [mobileOpened, { toggle: toggleMobile }] = useDisclosure(); const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true); return ( <AppShell padding="md" header={{ height: 60 }} navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: !mobileOpened, desktop: !desktopOpened }, }} > <AppShell.Header>Header</AppShell.Header> <AppShell.Navbar>Navbar</AppShell.Navbar> <AppShell.Main> <Button onClick={toggleDesktop} visibleFrom="sm"> Toggle navbar </Button> <Button onClick={toggleMobile} hiddenFrom="sm"> Toggle navbar </Button> </AppShell.Main> </AppShell> ); }
AppShell.Section with grow and ScrollArea example
Example creating organized navbar sections with header, expandable scrollable main section, and footer: import { AppShell, ScrollArea } from '@mantine/core'; function Demo() { return ( <AppShell navbar={{ width: 300, breakpoint: 0 }}> <AppShell.Navbar> <AppShell.Section>Navbar header</AppShell.Section> <AppShell.Section grow component={ScrollArea}> Navbar main section that will expand to fill available space </AppShell.Section> <AppShell.Section> Navbar footer – always at the bottom </AppShell.Section> </AppShell.Navbar> <AppShell.Main>Main</AppShell.Main> </AppShell> ); }
AppShell configuration required
To use a specific AppShell component (Header, Navbar, Aside, Footer), you must first set the corresponding configuration prop on the AppShell root component. For example, to use AppShell.Header, you need to set the header prop on AppShell.