A React mixin version of Amazon's jQuery-menu-aim plugin

Usage no npm install needed!

<script type="module">
  import reactMenuAim from '';



A React Mixin makes your menu works as magical as Amazon's implementation, this repo is heavily inspired by jQuery-menu-aim.


Build Status npm version

ReactMenuAim demo

If you tend to support React v0.13, please use react-menu-aim@0.1.1 which is the latest compatible version.

How to use

Live Demo

You can also checkout ./demo folder find out the simple & stragiht demo usage, or here's a quick look.

var React = require('react');
var ReactMenuAim = require('react-menu-aim');

var Menu = React.createClass({
  mixins: [ReactMenuAim],

  componentWillMount: function() {
    // Config ReactMenuAim here
      submenuDirection: 'right',
      menuSelector: '.menu'

  // This is your true handler when a menu item is going to be active
  handleSwitchMenuIndex: function(index) {
    // ...

  // `this.handleMouseLeaveMenu` and `this.handleMouseEnterRow` are provided by ReactMenuAim,
  // you can provide your own handler bound to them
  render: function() {
    return (
      <div className="menu-container">
        <ul className="menu" onMouseLeave={this.handleMouseLeaveMenu}>
          <li className="menu-item" onMouseEnter={this.handleMouseEnterRow.bind(this, 0, this.handleSwitchMenuIndex)}>Menu Item 1</li>
          <li className="menu-item" onMouseEnter={this.handleMouseEnterRow.bind(this, 1, this.handleSwitchMenuIndex)}>Menu Item 2</li>

Event handler

The following event handlers are provided by ReactMenuAim.

DO NOT call them directly, pass them as event handler in component's render method.


This event handler should be called when mouse is leaving the menu.


  1. handler (Function) You can provide your own handler when mouse leave menu
  2. e (Object) React's synthetic event


This event handler should be called when mouse is entering a menu item.


  1. rowIdentifier (Any) The identifier you provided to identify a row, usually it's row index or something, will be passed to your handler when a menu is going to be activated.
  2. handler (Function) You can provide your own handler when mouse enter a row
  3. e (Object) React's synthetic event


To configure ReactMenuAim, you should call this.initMenuAim in your React component with your options.

  componentWillMount: function() {
      // options


Type: string Default: 'right'

Indicates the direction of submenu.


Type: string Default: '*'

Determine the position and offset of menu container. This selector should be constrained on the very exact menu area(which we are switching), not including submenu area.


Type: number Default: 300

When user is moving mouse and have a tendency of viewing submenu, how many ms to wait before making next move.


Type: number Default: 75

The larger, the submenu is more likely to show.


$ npm install
$ npm run test
$ npm run build
$ npm run watch