material-ui > AppBar
Material UI AppBar - React Navbar Examples
The AppBar Component - Introduction
The AppBar component in Material UI is actually just a Paper component with some special CSS properties. We have a tutorial here on Paper if you aren't familiar.
The main CSS properties added here to make this bar stick to the top of the screen are the position: fixed, top: 0, with
the width: 100% to set this to stretch across the screen. Of course, a zIndex puts the content above other content on the page.
AppBar Position prop
By default, the AppBar's position is fixed, and the appropriate CSS positioning is set by the component (top, left, right).
You can change the position property of the AppBar by using the position prop. The available options are the same as the CSS position values- position absolute, fixed, relative, static and sticky.
AppBar Color prop / Custom AppBar color
There are two ways to set the color of the AppBar component. You can use the color prop, with options: default, inherit, primary, secondary, transparent. These will refer to the colors set in Material UI's theme. If you want to set a custom color, see the examples here where we use a custom CSS class to set the backgroundColor.
Material UI AppBar Examples
Click the numbers on the Appbar to cycle through the examples.
Custom AppBar Height
To change the AppBar's height, you can create a custom CSS class and override the minHeight property. See the above
example.
Material UI's Toolbar component
The AppBar doesn't actually set any of the properties of the children to make them horizontally aligned in the way they are. That is
the responsibility of the Toolbar component. The Toolbar component simply applies normal flex CSS (display: 'flex'), along
with vertical centering via alignItems: 'center', some padding, and the minHeight: 56px provided by theme.mixins.toolbar.
Because the Toolbar has a minHeight of 56px, it can also be used as your first component in your main content section,
to act as a spacer. As you can see in our example, "this content doesn't appear below the AppBar", the paragraph starts about
64px from the top of the screen. The additional 8px padding is at the top of the document by default, set by the browser's <body> tag,
which is overridden by the App Bar setting top: 0px. This seems to be why using the Toolbar component as the first component works, because
it is offset by 8px, so the start of your content appears just below the AppBar.
In our above example, we use flexGrow: 1 in our custom CSS class for the title, so that it stretches across available
empty space. Because Toolbar is a flexbox, we can use any of the flex properties on the children as normal. See our
Material UI grid tutorial for more discussion on Flexbox.
Custom React NavBar CSS
Don't want to use Material UI's AppBar? Here is a simple implementation of their AppBar using pure React and CSS.
🛈 React School creates templates and video courses for building beautiful apps with React. Download our free Material UI template.