Skip to main content
react-md
App Bar - Demos

#Simple Usage

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.

primary
secondary
default
clear

#Different Sizes

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.

Dense
Dense Prominent
Dense
And Prominent!
Only Prominent

#Auto Dense

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".

Auto Dense
Auto Dense and prominent

#Fixed with Offset

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.

Normal

Content!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan, mi eget rutrum ornare, turpis lacus congue dolor, vitae rhoncus orci augue vitae mauris. Curabitur consequat dui nisi. Vestibulum at arcu at leo rhoncus commodo. Sed vel quam non ligula blandit maximus id a nisi. In convallis nulla vitae tincidunt vestibulum. Sed tincidunt vestibulum elit, eu dapibus velit interdum eu. Nullam scelerisque velit in velit commodo, id eleifend urna mollis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Duis hendrerit felis ut ante varius, eu faucibus neque maximus. Suspendisse nunc nibh, suscipit non molestie vulputate, vestibulum non lectus. Proin eget purus sollicitudin nunc tristique semper. Mauris sit amet tempus turpis, nec blandit augue. Vestibulum rhoncus dolor vel ex laoreet vulputate. In consequat metus id velit ullamcorper, eget tempor nisi vestibulum. Curabitur egestas ultricies tincidunt.

Phasellus et mauris tristique, dictum sapien vel, consectetur enim. Maecenas volutpat mi eros, ultrices ultrices est placerat sit amet. Nullam rutrum ipsum a nisi maximus ullamcorper ac eu massa. In finibus mauris at leo porttitor consectetur. Phasellus quam ex, egestas eu diam non, ullamcorper dignissim lorem. Ut cursus nunc nec massa eleifend dignissim. Nullam lorem turpis, dapibus sit amet scelerisque id, volutpat et ipsum. Nulla tristique, lectus vehicula bibendum auctor, sapien ipsum rutrum diam, a tempor quam ligula ac nisi. Nam scelerisque venenatis facilisis. Donec congue porttitor felis vel finibus. Donec eget est metus. Donec vehicula sem elit, sed pharetra nisl eleifend ac. Vestibulum eget dolor in est condimentum consequat.

Dense

Content!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan, mi eget rutrum ornare, turpis lacus congue dolor, vitae rhoncus orci augue vitae mauris. Curabitur consequat dui nisi. Vestibulum at arcu at leo rhoncus commodo. Sed vel quam non ligula blandit maximus id a nisi. In convallis nulla vitae tincidunt vestibulum. Sed tincidunt vestibulum elit, eu dapibus velit interdum eu. Nullam scelerisque velit in velit commodo, id eleifend urna mollis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Duis hendrerit felis ut ante varius, eu faucibus neque maximus. Suspendisse nunc nibh, suscipit non molestie vulputate, vestibulum non lectus. Proin eget purus sollicitudin nunc tristique semper. Mauris sit amet tempus turpis, nec blandit augue. Vestibulum rhoncus dolor vel ex laoreet vulputate. In consequat metus id velit ullamcorper, eget tempor nisi vestibulum. Curabitur egestas ultricies tincidunt.

Phasellus et mauris tristique, dictum sapien vel, consectetur enim. Maecenas volutpat mi eros, ultrices ultrices est placerat sit amet. Nullam rutrum ipsum a nisi maximus ullamcorper ac eu massa. In finibus mauris at leo porttitor consectetur. Phasellus quam ex, egestas eu diam non, ullamcorper dignissim lorem. Ut cursus nunc nec massa eleifend dignissim. Nullam lorem turpis, dapibus sit amet scelerisque id, volutpat et ipsum. Nulla tristique, lectus vehicula bibendum auctor, sapien ipsum rutrum diam, a tempor quam ligula ac nisi. Nam scelerisque venenatis facilisis. Donec congue porttitor felis vel finibus. Donec eget est metus. Donec vehicula sem elit, sed pharetra nisl eleifend ac. Vestibulum eget dolor in est condimentum consequat.

Prominent

Content!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan, mi eget rutrum ornare, turpis lacus congue dolor, vitae rhoncus orci augue vitae mauris. Curabitur consequat dui nisi. Vestibulum at arcu at leo rhoncus commodo. Sed vel quam non ligula blandit maximus id a nisi. In convallis nulla vitae tincidunt vestibulum. Sed tincidunt vestibulum elit, eu dapibus velit interdum eu. Nullam scelerisque velit in velit commodo, id eleifend urna mollis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Duis hendrerit felis ut ante varius, eu faucibus neque maximus. Suspendisse nunc nibh, suscipit non molestie vulputate, vestibulum non lectus. Proin eget purus sollicitudin nunc tristique semper. Mauris sit amet tempus turpis, nec blandit augue. Vestibulum rhoncus dolor vel ex laoreet vulputate. In consequat metus id velit ullamcorper, eget tempor nisi vestibulum. Curabitur egestas ultricies tincidunt.

Phasellus et mauris tristique, dictum sapien vel, consectetur enim. Maecenas volutpat mi eros, ultrices ultrices est placerat sit amet. Nullam rutrum ipsum a nisi maximus ullamcorper ac eu massa. In finibus mauris at leo porttitor consectetur. Phasellus quam ex, egestas eu diam non, ullamcorper dignissim lorem. Ut cursus nunc nec massa eleifend dignissim. Nullam lorem turpis, dapibus sit amet scelerisque id, volutpat et ipsum. Nulla tristique, lectus vehicula bibendum auctor, sapien ipsum rutrum diam, a tempor quam ligula ac nisi. Nam scelerisque venenatis facilisis. Donec congue porttitor felis vel finibus. Donec eget est metus. Donec vehicula sem elit, sed pharetra nisl eleifend ac. Vestibulum eget dolor in est condimentum consequat.

Dense and Prominent

Content!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan, mi eget rutrum ornare, turpis lacus congue dolor, vitae rhoncus orci augue vitae mauris. Curabitur consequat dui nisi. Vestibulum at arcu at leo rhoncus commodo. Sed vel quam non ligula blandit maximus id a nisi. In convallis nulla vitae tincidunt vestibulum. Sed tincidunt vestibulum elit, eu dapibus velit interdum eu. Nullam scelerisque velit in velit commodo, id eleifend urna mollis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Duis hendrerit felis ut ante varius, eu faucibus neque maximus. Suspendisse nunc nibh, suscipit non molestie vulputate, vestibulum non lectus. Proin eget purus sollicitudin nunc tristique semper. Mauris sit amet tempus turpis, nec blandit augue. Vestibulum rhoncus dolor vel ex laoreet vulputate. In consequat metus id velit ullamcorper, eget tempor nisi vestibulum. Curabitur egestas ultricies tincidunt.

Phasellus et mauris tristique, dictum sapien vel, consectetur enim. Maecenas volutpat mi eros, ultrices ultrices est placerat sit amet. Nullam rutrum ipsum a nisi maximus ullamcorper ac eu massa. In finibus mauris at leo porttitor consectetur. Phasellus quam ex, egestas eu diam non, ullamcorper dignissim lorem. Ut cursus nunc nec massa eleifend dignissim. Nullam lorem turpis, dapibus sit amet scelerisque id, volutpat et ipsum. Nulla tristique, lectus vehicula bibendum auctor, sapien ipsum rutrum diam, a tempor quam ligula ac nisi. Nam scelerisque venenatis facilisis. Donec congue porttitor felis vel finibus. Donec eget est metus. Donec vehicula sem elit, sed pharetra nisl eleifend ac. Vestibulum eget dolor in est condimentum consequat.

#Animating App Bar

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.

Animating App Bar
  • JJasmine Robinson
  • DDevonte Craig
  • DDean Reid
  • SShaquille Bauer
  • VVivian Bishop
  • BBraden Mullins
  • KKatlyn Mcdonald
  • IIsabella Marshall
  • LLee Christensen
  • TTommy Hogan
  • TTimothy Harvey
  • PPreston Phillips
  • MMarco Sherman
  • HHaley Coleman
  • MMario Swanson
  • XXavier Solis
  • KKeaton Cannon
  • CCassandra Austin
  • IIrene Holland
  • GGustavo Love
  • MMeghan Stewart
  • RRenee Townsend
  • BBobby Newman
  • KKeaton Ortiz
  • DDustin Wells
  • JJerry Mcgee
  • CCarl Howard
  • SSabrina Lang
  • RReed Baker
  • KKristen Fields
  • GGavin Carrillo
  • CClaudia Neal
  • LLeonard Schneider
  • DDominick Boyd
  • MMary Hampton
  • MMark Ayala
  • KKristina Warner
  • AAntonio Walton
  • TTyson Scott
  • HHarley Moss