App Bar

An AppBar displays information and actions relating to the current screen or displays navigation and key actions at the bottom of mobile screens. It can also be thought of as a flex container that can render actions and a title.

Check out the Layout, useTemporaryLayout, useExpandableLayout, useResizableLayout pages to see how to use the AppBar in a global layout.

Simple Example

The AppBar normally renders a title using the AppBarTitle and additional actions.

Title

import { AppBar } from "@react-md/core/app-bar/AppBar";
import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
import { Button } from "@react-md/core/button/Button";
import MoreVertOutlinedIcon from "@react-md/material-icons/MoreVertOutlinedIcon";
import SearchIcon from "@react-md/material-icons/SearchIcon";
import { type ReactElement } from "react";

export default function SimpleExample(): ReactElement {
  return (
    <AppBar>
      <AppBarTitle>Title</AppBarTitle>
      <Button aria-label="Search" buttonType="icon">
        <SearchIcon />
      </Button>
      <Button aria-label="Options" buttonType="icon">
        <MoreVertOutlinedIcon />
      </Button>
    </AppBar>
  );
}

import { AppBar } from "@react-md/core/app-bar/AppBar";
import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
import { Button } from "@react-md/core/button/Button";
import MoreVertOutlinedIcon from "@react-md/material-icons/MoreVertOutlinedIcon";
import SearchIcon from "@react-md/material-icons/SearchIcon";
import { type ReactElement } from "react";

export default function SimpleExample(): ReactElement {
  return (
    <AppBar>
      <AppBarTitle>Title</AppBarTitle>
      <Button aria-label="Search" buttonType="icon">
        <SearchIcon />
      </Button>
      <Button aria-label="Options" buttonType="icon">
        <MoreVertOutlinedIcon />
      </Button>
    </AppBar>
  );
}

App Bar Themes

The AppBar supports all the normal theme colors using the theme prop.

primary

secondary

warning

success

error

surface

clear

import { AppBar } from "@react-md/core/app-bar/AppBar";
import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
import { type ReactElement } from "react";

export default function AppBarThemesExample(): ReactElement {
  return (
    <>
      <AppBar theme="primary">
        <AppBarTitle>primary</AppBarTitle>
      </AppBar>
      <AppBar theme="secondary">
        <AppBarTitle>secondary</AppBarTitle>
      </AppBar>
      <AppBar theme="warning">
        <AppBarTitle>warning</AppBarTitle>
      </AppBar>
      <AppBar theme="success">
        <AppBarTitle>success</AppBarTitle>
      </AppBar>
      <AppBar theme="error">
        <AppBarTitle>error</AppBarTitle>
      </AppBar>
      <AppBar theme="surface">
        <AppBarTitle>surface</AppBarTitle>
      </AppBar>
      <AppBar theme="clear">
        <AppBarTitle>clear</AppBarTitle>
      </AppBar>
    </>
  );
}

import { AppBar } from "@react-md/core/app-bar/AppBar";
import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
import { type ReactElement } from "react";

export default function AppBarThemesExample(): ReactElement {
  return (
    <>
      <AppBar theme="primary">
        <AppBarTitle>primary</AppBarTitle>
      </AppBar>
      <AppBar theme="secondary">
        <AppBarTitle>secondary</AppBarTitle>
      </AppBar>
      <AppBar theme="warning">
        <AppBarTitle>warning</AppBarTitle>
      </AppBar>
      <AppBar theme="success">
        <AppBarTitle>success</AppBarTitle>
      </AppBar>
      <AppBar theme="error">
        <AppBarTitle>error</AppBarTitle>
      </AppBar>
      <AppBar theme="surface">
        <AppBarTitle>surface</AppBarTitle>
      </AppBar>
      <AppBar theme="clear">
        <AppBarTitle>clear</AppBarTitle>
      </AppBar>
    </>
  );
}

App Bar Heights

The AppBar supports multiple heights by using the height prop

"dense" - Defaults to 3rem
"normal" (default) - Defaults to 3.5rem
"prominent-dense" - Defaults to 6rem
"prominent" - Defaults to 7rem
"auto" - Height is based on the content

dense

normal

prominent-dense

prominent

auto

import { AppBar } from "@react-md/core/app-bar/AppBar";
import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
import { type ReactElement } from "react";

export default function AppBarHeightsExample(): ReactElement {
  return (
    <>
      <AppBar height="dense">
        <AppBarTitle>dense</AppBarTitle>
      </AppBar>
      <AppBar height="normal">
        <AppBarTitle>normal</AppBarTitle>
      </AppBar>
      <AppBar height="prominent-dense">
        <AppBarTitle>prominent-dense</AppBarTitle>
      </AppBar>
      <AppBar height="prominent">
        <AppBarTitle>prominent</AppBarTitle>
      </AppBar>
      <AppBar height="auto">
        <AppBarTitle>auto</AppBarTitle>
      </AppBar>
    </>
  );
}

import { AppBar } from "@react-md/core/app-bar/AppBar";
import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
import { type ReactElement } from "react";

export default function AppBarHeightsExample(): ReactElement {
  return (
    <>
      <AppBar height="dense">
        <AppBarTitle>dense</AppBarTitle>
      </AppBar>
      <AppBar height="normal">
        <AppBarTitle>normal</AppBarTitle>
      </AppBar>
      <AppBar height="prominent-dense">
        <AppBarTitle>prominent-dense</AppBarTitle>
      </AppBar>
      <AppBar height="prominent">
        <AppBarTitle>prominent</AppBarTitle>
      </AppBar>
      <AppBar height="auto">
        <AppBarTitle>auto</AppBarTitle>
      </AppBar>
    </>
  );
}

Stacked App Bars

It's recommended to stack app bars when the desired height is "prominent" or "prominent-dense". It allows each app bar to act as a row of content.

Title

import { AppBar } from "@react-md/core/app-bar/AppBar";
import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
import { Button } from "@react-md/core/button/Button";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";

export default function StackedAppBarsExample(): ReactElement {
  return (
    <AppBar stacked theme="surface">
      <AppBar height="dense" theme="clear">
        <AppBarTitle>Title</AppBarTitle>
      </AppBar>
      <AppBar height="dense" theme="clear">
        <AppBarTitle as="span" />
        <Button aria-label="Favorite" buttonType="icon" iconSize="small">
          <FavoriteIcon />
        </Button>
      </AppBar>
    </AppBar>
  );
}

import { AppBar } from "@react-md/core/app-bar/AppBar";
import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
import { Button } from "@react-md/core/button/Button";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";

export default function StackedAppBarsExample(): ReactElement {
  return (
    <AppBar stacked theme="surface">
      <AppBar height="dense" theme="clear">
        <AppBarTitle>Title</AppBarTitle>
      </AppBar>
      <AppBar height="dense" theme="clear">
        <AppBarTitle as="span" />
        <Button aria-label="Favorite" buttonType="icon" iconSize="small">
          <FavoriteIcon />
        </Button>
      </AppBar>
    </AppBar>
  );
}

App Bar Title Keyline

The AppBarTitle supports applying additional spacing to align itself with other content on the page using the keyline prop.

"small" (default) - Applies 0.75rem spacing so there is a total distance of 1rem from the edge of the AppBar
"nav" - Applies spacing so the title aligns with the list keyline when there is a navigation button before the title
"list" - Applies spacing so the title aligns with the list keyline when there is no content before the title

Small keyline

Item 1
Item 2
Item 3

Nav keyline

Item 1
Item 2
Item 3

List keyline

Item 1
Item 2
Item 3

import { AppBar } from "@react-md/core/app-bar/AppBar";
import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
import { type AppBarTitleKeyline } from "@react-md/core/app-bar/styles";
import { Button } from "@react-md/core/button/Button";
import { Card } from "@react-md/core/card/Card";
import { List } from "@react-md/core/list/List";
import { ListItem } from "@react-md/core/list/ListItem";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import MenuIcon from "@react-md/material-icons/MenuIcon";
import MoreVertOutlinedIcon from "@react-md/material-icons/MoreVertOutlinedIcon";
import { type ReactElement, type ReactNode } from "react";

export default function AppBarTitleKeylineExample(): ReactElement {
  return (
    <>
      <Layout keyline="small">
        <AppBarTitle keyline="small">Small keyline</AppBarTitle>
      </Layout>
      <Layout keyline="nav">
        <AppBarTitle keyline="nav">Nav keyline</AppBarTitle>
      </Layout>
      <Layout keyline="list">
        <AppBarTitle keyline="list">List keyline</AppBarTitle>
      </Layout>
    </>
  );
}

export interface LayoutProps {
  keyline: AppBarTitleKeyline;
  children: ReactNode;
}

function Layout(props: LayoutProps): ReactElement {
  const { keyline, children } = props;

  const leftAddon = keyline !== "small" && <FavoriteIcon />;
  return (
    <Card fullWidth>
      <AppBar>
        {keyline === "nav" && (
          <Button aria-label="Menu" buttonType="icon">
            <MenuIcon />
          </Button>
        )}
        {children}
        <Button aria-label="Options" buttonType="icon">
          <MoreVertOutlinedIcon />
        </Button>
      </AppBar>
      <List>
        <ListItem leftAddon={leftAddon}>Item 1</ListItem>
        <ListItem leftAddon={leftAddon}>Item 2</ListItem>
        <ListItem leftAddon={leftAddon}>Item 3</ListItem>
      </List>
    </Card>
  );
}

import { AppBar } from "@react-md/core/app-bar/AppBar";
import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
import { type AppBarTitleKeyline } from "@react-md/core/app-bar/styles";
import { Button } from "@react-md/core/button/Button";
import { Card } from "@react-md/core/card/Card";
import { List } from "@react-md/core/list/List";
import { ListItem } from "@react-md/core/list/ListItem";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import MenuIcon from "@react-md/material-icons/MenuIcon";
import MoreVertOutlinedIcon from "@react-md/material-icons/MoreVertOutlinedIcon";
import { type ReactElement, type ReactNode } from "react";

export default function AppBarTitleKeylineExample(): ReactElement {
  return (
    <>
      <Layout keyline="small">
        <AppBarTitle keyline="small">Small keyline</AppBarTitle>
      </Layout>
      <Layout keyline="nav">
        <AppBarTitle keyline="nav">Nav keyline</AppBarTitle>
      </Layout>
      <Layout keyline="list">
        <AppBarTitle keyline="list">List keyline</AppBarTitle>
      </Layout>
    </>
  );
}

export interface LayoutProps {
  keyline: AppBarTitleKeyline;
  children: ReactNode;
}

function Layout(props: LayoutProps): ReactElement {
  const { keyline, children } = props;

  const leftAddon = keyline !== "small" && <FavoriteIcon />;
  return (
    <Card fullWidth>
      <AppBar>
        {keyline === "nav" && (
          <Button aria-label="Menu" buttonType="icon">
            <MenuIcon />
          </Button>
        )}
        {children}
        <Button aria-label="Options" buttonType="icon">
          <MoreVertOutlinedIcon />
        </Button>
      </AppBar>
      <List>
        <ListItem leftAddon={leftAddon}>Item 1</ListItem>
        <ListItem leftAddon={leftAddon}>Item 2</ListItem>
        <ListItem leftAddon={leftAddon}>Item 3</ListItem>
      </List>
    </Card>
  );
}