Components

AppShell

The application frame: a collapsible sidebar, a menu drawer on mobile, a top bar and the page content.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls. The example opens full screen; change pages from the menu to see the indicator slide and narrow the sidebar to icons with the collapse button.

Live example, StorybookOpen in Storybook

Default

AppShell places the sidebar, the top bar and the content. The current page is marked with current; a bar on the left follows it. Below 1024 px the sidebar hides and a button in the top bar opens the menu drawer.

import { AppShell, NavGroup, NavItem, PageHeader, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <AppShell
        mainId="default-example-main"
        className="h-[28rem] min-h-0"
        brand={<strong>Product name</strong>}
        nav={
          <>
            <NavGroup label="General">
              <NavItem href="#" label="Home" icon="home" current />
              <NavItem href="#" label="Inbox" icon="mail" badge={3} />
              <NavItem href="#" label="Reports" icon="layout-grid" />
            </NavGroup>
            <NavGroup label="Administration" collapsible>
              <NavItem href="#" label="Team" icon="user" />
              <NavItem href="#" label="Settings" icon="settings" />
            </NavGroup>
          </>
        }
      >
        <PageHeader title="Home" description="Page content sits here." />
      </AppShell>
    </Provider>
  );
}

Collapsed

The button at the bottom narrows the sidebar to icons. Labels stay for screen readers and show as browser tooltips.

import { AppShell, NavGroup, NavItem, PageHeader, Provider } from '@bigbang/ui';

export default function Collapsed() {
  return (
    <Provider locale="en-GB">
      <AppShell
        defaultCollapsed
        mainId="collapsed-example-main"
        className="h-[28rem] min-h-0"
        brand={<strong>Product name</strong>}
        nav={
          <>
            <NavGroup label="General">
              <NavItem href="#" label="Home" icon="home" current />
              <NavItem href="#" label="Inbox" icon="mail" badge={3} />
              <NavItem href="#" label="Reports" icon="layout-grid" />
            </NavGroup>
            <NavGroup label="Administration" collapsible>
              <NavItem href="#" label="Team" icon="user" />
              <NavItem href="#" label="Settings" icon="settings" />
            </NavGroup>
          </>
        }
      >
        <PageHeader title="Home" description="Page content sits here." />
      </AppShell>
    </Provider>
  );
}

Inset

variant="inset" shows the top bar and content as a rounded, shadowed panel on the sidebar fill from 1024 px. On narrower screens the shell looks like the default one.

import { AppShell, NavGroup, NavItem, PageHeader, Provider } from '@bigbang/ui';

export default function Inset() {
  return (
    <Provider locale="en-GB">
      <AppShell
        variant="inset"
        mainId="inset-example-main"
        className="h-[28rem] min-h-0"
        brand={<strong>Product name</strong>}
        nav={
          <>
            <NavGroup label="General">
              <NavItem href="#" label="Home" icon="home" current />
              <NavItem href="#" label="Inbox" icon="mail" badge={3} />
              <NavItem href="#" label="Reports" icon="layout-grid" />
            </NavGroup>
            <NavGroup label="Administration" collapsible>
              <NavItem href="#" label="Team" icon="user" />
              <NavItem href="#" label="Settings" icon="settings" />
            </NavGroup>
          </>
        }
      >
        <PageHeader title="Home" description="Page content sits here." />
      </AppShell>
    </Provider>
  );
}

Light and dark mode

Colours come from semantic tokens; neither mode needs extra settings.

import { AppShell, NavGroup, NavItem, PageHeader, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <AppShell
        mainId="default-example-main"
        className="h-[28rem] min-h-0"
        brand={<strong>Product name</strong>}
        nav={
          <>
            <NavGroup label="General">
              <NavItem href="#" label="Home" icon="home" current />
              <NavItem href="#" label="Inbox" icon="mail" badge={3} />
              <NavItem href="#" label="Reports" icon="layout-grid" />
            </NavGroup>
            <NavGroup label="Administration" collapsible>
              <NavItem href="#" label="Team" icon="user" />
              <NavItem href="#" label="Settings" icon="settings" />
            </NavGroup>
          </>
        }
      >
        <PageHeader title="Home" description="Page content sits here." />
      </AppShell>
    </Provider>
  );
}