AppShell

Responsive shell for your application with header and navbar
Import

Usage

AppShell is a layout component that can be used to create a common Header - Navbar - Footer - Aside - Content layout pattern. AppShell, Header, Footer, Aside and Navbar components include bare minimum default styles to simplify customization. View full source code

Your application goes here
import { AppShell, Navbar, Header } from '@mantine/core';
function Demo() {
return (
<AppShell
padding="md"
navbar={<Navbar width={{ base: 300 }} height={500} p="xs">{/* Navbar content */}</Navbar>}
header={<Header height={60} p="xs">{/* Header content */}</Header>}
styles={(theme) => ({
main: { backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0] },
})}
>
{/* Your application here */}
</AppShell>
);
}

Responsive styles

Open responsive example in new tab
import React, { useState } from 'react';
import {
AppShell,
Navbar,
Header,
Footer,
Aside,
Text,
MediaQuery,
Burger,
useMantineTheme,
} from '@mantine/core';
export default function AppShellDemo() {
const theme = useMantineTheme();
const [opened, setOpened] = useState(false);
return (
<AppShell
styles={{
main: {
background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
},
}}
navbarOffsetBreakpoint="sm"
asideOffsetBreakpoint="sm"
fixed
navbar={
<Navbar p="md" hiddenBreakpoint="sm" hidden={!opened} width={{ sm: 200, lg: 300 }}>
<Text>Application navbar</Text>
</Navbar>
}
aside={
<MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
<Aside p="md" hiddenBreakpoint="sm" width={{ sm: 200, lg: 300 }}>
<Text>Application sidebar</Text>
</Aside>
</MediaQuery>
}
footer={
<Footer height={60} p="md">
Application footer
</Footer>
}
header={
<Header height={70} p="md">
<div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
<MediaQuery largerThan="sm" styles={{ display: 'none' }}>
<Burger
opened={opened}
onClick={() => setOpened((o) => !o)}
size="sm"
color={theme.colors.gray[6]}
mr="xl"
/>
</MediaQuery>
<Text>Application header</Text>
</div>
</Header>
}
>
<Text>Resize app to see responsive navbar in action</Text>
</AppShell>
);
}

Navbar and Aside components

Navbar and Aside components can be used outside of AppShell context (View full source code):

import { Navbar } from '@mantine/core';
function Demo() {
return (
<Navbar height={600} p="xs" width={{ base: 300 }}>
<Navbar.Section>{/* Header with logo */}</Navbar.Section>
<Navbar.Section grow mt="md">{/* Links sections */}</Navbar.Section>
<Navbar.Section>{/* Footer with user */}</Navbar.Section>
</Navbar>
);
}

Navbar.Section and Aside.Section

import { Navbar } from '@mantine/core';
function Demo() {
// Same can be applied to Aside component with Aside.Section component
return (
<Navbar>
{/* First section with normal height (depends on section content) */}
<Navbar.Section>First section</Navbar.Section>
{/* Grow section will take all available space that is not taken by first and last sections */}
<Navbar.Section grow>Grow section</Navbar.Section>
{/* Last section with normal height (depends on section content) */}
<Navbar.Section>Last section</Navbar.Section>
</Navbar>
);
}

Responsive width

import { Navbar } from '@mantine/core';
function Demo() {
// Same can be applied to Aside component
return (
<Navbar
width={{
// When viewport is larger than theme.breakpoints.sm, Navbar width will be 300
sm: 300,
// When viewport is larger than theme.breakpoints.lg, Navbar width will be 400
lg: 400,
// When other breakpoints do not match base width is used, defaults to 100%
base: 100,
}}
/>
);
}

Fixed position

To make Navbar or Aside fixed (like in Mantine docs) set fixed and position props:

import { Navbar } from '@mantine/core';
function Demo() {
return <Navbar fixed position={{ top: 0, left: 0 }} />;
}

Custom scrollbars

Navbar.Section and Aside.Section components can be used with ScrollArea component (View full source code):

import { Navbar, ScrollArea } from '@mantine/core';
function Demo() {
return (
<Navbar height={600} p="xs" width={{ base: 300 }}>
<Navbar.Section mt="xs">{/* Header with logo */}</Navbar.Section>
<Navbar.Section grow component={ScrollArea} mx="-xs" px="xs">
{/* scrollable content here */}
</Navbar.Section>
<Navbar.Section>{/* Footer with user */}</Navbar.Section>
</Navbar>
);
}

Semantic elements

  • Header and Navbar components root element is nav
  • Footer component root element is footer
  • Aside component root element is aside
  • AppShell wraps content with main tag – !important do not use main tag inside AppShell