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.
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.
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 to3rem
"normal"
(default) - Defaults to3.5rem
"prominent-dense"
- Defaults to6rem
"prominent"
- Defaults to7rem
"auto"
- Height is based on the content
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.
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) - Applies0.75rem
spacing so there is a total distance of1rem
from the edge of theAppBar
"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
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
- 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>
);
}