A clone of Stripe's animated menu using React, Styled Components and React-Flip-Toolkit
Switch branches/tags
Nothing to show
Clone or download
Latest commit b9ecf1c Nov 14, 2018
Failed to load latest commit information.
public readme May 14, 2018
src try to fix querySelector error Nov 2, 2018
.eslintrc add proptypes and fix linting errors May 23, 2018
.gitignore works, sort of May 9, 2018
README.md try to fix querySelector error Nov 2, 2018
menu.gif add gif Sep 6, 2018
package.json update rft version Nov 14, 2018
yarn.lock update rft version Nov 14, 2018


A Stripe-style animated navbar menu

Built with React, Styled Components, and React-Flip-Toolkit.

  1. View the demo

  2. Read the tutorial

  3. Check out the code for the main dropdown component


This animation demo explores how one might recreate Stripe's animated menu in React.

In order to keep the example as simple as possible, it focuses mainly on the animation aspect and therefore is not WAI-ARIA compliant. (Take a look at Stripe's full implementation for what seems to be a fully accessible nav menu component.)

There are multiple ways one could implement this animation, each with its own tradeoffs. This demo is particularly focused on developer ease of use.