Skip to content

App Bar

The App Bar displays information and actions relating to the current screen.

The top App Bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.

It can transform into a contextual action bar or used as a navbar.

Simple App Bar


App Bar with a primary search field

A primary searchbar.


App Bar with menu


App Bar with search field

A side searchbar.


Dense (desktop only)


Bottom App Bar


You can use the useScrollTrigger() hook to respond to user scroll actions.

Hide App Bar

The app bar hides on scroll down to leave more space for reading.

Elevate App Bar

The app bar elevates on scroll to communicate that the user is not at the top of the page.

Back to top

A floating action buttons appears on scroll to make it easy to get back to the top of the page.

useScrollTrigger([options]) => trigger


  1. options (Object [optional]):

    • options.disableHysteresis (Boolean [optional]): Defaults to false. Disable the hysteresis. Ignore the scroll direction when determining the trigger value.
    • (Node [optional]): Defaults to window.
    • options.threshold (Number [optional]): Defaults to 100. Change the trigger value when the vertical scroll strictly crosses this threshold (exclusive).


trigger: Does the scroll position match the criteria?


import useScrollTrigger from '@material-ui/core/useScrollTrigger';

function HideOnScroll(props) {
  const trigger = useScrollTrigger();
  return (
    <Slide in={!trigger}>