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.

App Bar with buttons

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

Scrolling

Hide App Bar

An App Bar that hides on scroll.

Elevate App Bar

An App Bar that elevates on scroll.

useScrollTrigger([options]) => trigger

Arguments

1. options (Object [optional]):

   • options.disableHysteresis (Boolean [optional]): Defaults to false. Disable the hysteresis. Ignore the scroll direction when determining the trigger value.
   • options.target (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).

Returns

trigger: Does the scroll position match the criteria?

Examples

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

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

API

• <AppBar />
• <Menu />
• <Toolbar />