If you have any project questions, concerns, or contribution ideas, join our #pwa Slack channel. Find out how to create an account by visiting Community Resources

Header component

Description Pages used Reference image
Header Product
Header menu collapsed without cart item
Header with cart item Product
Header menu collapsed with cart item
Header with search Homepage Header menu with search

Page states

  • Refresh - loads a cached version


  • Scroll up - The Header turns into an icon with the menu/logo. When tapped, the header expands.
  • Scroll down - The purchase bar sticks to the bottom of the screen.
  • Page refresh - TBD

Page specific interactions

Page Interaction
Homepage Loads with the search bar displayed and open