An app bar is a good place to put your main navigation toggle, your app's title or the page's title, and some common actions for your app. As shown below, the app bar will automatically attempt to use a color with enough contrast relative to the background by default and the icons will automatically inherit that color as well.

There are 4 different sizes available for the app bar by default:

• normal
• dense
• prominent
• prominent and dense

When the prominent prop is enabled, the app bar's styles will update a bit so that it is now possible to have line-wrapping so that more content can be placed under the "main" app bar row. When this happens, you can use another AppBar along with setting a new prop component="div" to render another row.

Note that you must also apply dense to the child AppBar components to get the correct sizing.

Since it can be a bit annoying having to set the dense prop via js for all these different app bars, it's possible to create an auto-dense theme using media queries and the provided mixins from @react-md/app-bar. This example will automatically set the AppBar and the related actions to dense when the viewport size is considered "desktop".

App bars are generally great for using in your main layout, so there is also the ability to fix the app bar at the top of the page. Unfortunately, once the app bar has been fixed, your main content can be covered by the app bar which isn't super great. To work around this, you can apply any of the following class names to your main content element to be correctly offset based off of the app bar's size:

• APP_BAR_OFFSET_CLASS_NAME
• APP_BAR_OFFSET_DENSE_CLASS_NAME
• APP_BAR_OFFSET_PROMINENT_CLASS_NAME
• APP_BAR_OFFSET_PROMINENT_DENSE_CLASS_NAME

An alternative is to also use the rmd-app-bar-offset mixin which will apply the correct offset to your custom class implementation. This one allows for a bit more flexibility and control since you can specify how this offset should be applied. The class names listed above will only every apply padding-top.

It is also possible to animate and change the height of the toolbar using the rmd-app-bar-theme mixins or custom CSS variables. The example below will show how you can animate the app bar when the user scrolls from a custom height to the default app bar height.

This example also shows how you can use a background image with an app bar.

Note: this is a pretty bad implementation and doesn't work across all browsers.