FAQ

Frequently Asked Questions

Can I change the transition property of the menu?

Yes, but it's not recommended for animations other than Slide due to how other page elements are designed to move with the transition.

You can access it through the bmMenuWrap key of the styles prop:

var styles = {
  bmMenuWrap: {
    transition: ''
  }
}

<Menu styles={ styles } />

Why doesn't the Link component from react-router work?

react-burger-menu uses Radium to manage its styles. To use the Link component, you need to wrap it in Radium first, like this:

import React from 'react';
import { stack as Menu } from 'react-burger-menu';
import { Link } from 'react-router';
import Radium from 'radium';

let RadiumLink = Radium(Link);

export default React.createClass({
  render() {
    return (
      <Menu>
        <RadiumLink className="menu-item" to="/home">Home</RadiumLink>
        <RadiumLink className="menu-item" to="/settings">Settings</RadiumLink>
        <RadiumLink className="menu-item" to="/blablabla">Blablabla</RadiumLink>
      </Menu>
    );
  }
});

I'm getting a Warning: React attempted to reuse markup in a container but the checksum was invalid error.

When rendering this component on the server, you need to pass the user agent via the radiumConfig prop so Radium knows which vendor prefixes to apply.

This is an example of how that would look using Express:

<Menu radiumConfig={{userAgent: req.headers['user-agent']}} />

See the docs on server-side rendering.