AppShell

Responsive shell for your application with header and navbar

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

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

Go back

use-form schema – @mantine/form

Up next

AspectRatio – @mantine/core

Build fully functional accessible web applications faster than ever

About

Contribute Media assets Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter