Skip to main content
react-md

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>
  );
}

Press Enter to start editing.

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>
    </>
  );
}

Press Enter to start editing.

App Bar Heights

The AppBar supports multiple heights by using the height prop

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>
    </>
  );
}

Press Enter to start editing.

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>
  );
}

Press Enter to start editing.

App Bar Title Keyline

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

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>
  );
}

Press Enter to start editing.