React Storefront
|

Header

import AppBar from 'react-storefront/AppBar'

A header that auto hides when the user scrolls down and auto shows when the user scrolls up. A hamburger button that controls the menu is automatically displayed on the left side of the header. Children are placed directly to the right of the menu button.

Props

NameTypeDefaultDescription
classesobject

CSS classes

MenuIconfuncMenuIcon

A component for the menu icon.

menuIconPropsobject{}

Additional props for the menu icon

menuAlignenum : 'left' |
'right'
'left'

Sets the alignment of the menu icon. "right" or "left".

offlineWarningunion : string |
element
'Your device lost its internet connection.'

String or Element to render within the offline warning container at the top of the app

CSS API

You can override all the class names injected by Moov-PWA thanks to the classes property. This property accepts the following keys:

  • root
  • withAmp
  • offline
  • toolBar
  • wrap
  • stuck
  • unstuck
  • animate
  • hidden
  • menuOpen
  • link