Responsive Ant Menu

A lightweight React component for Ant Menu to support responsive behaviour.

Motivation

Having an option for Ant's Menu component to hide under a customizable element when viewing on a mobile device.

Interactive Demo

https://itskemo.github.io/responsive-ant-menu/

How to use

1. npm i responsive-ant-menu
2. Optional: Configure your project to use Modularized Ant (otherwise you have to import the styles manually)

Sample Usage

import React from 'react';
import ResponsiveAntMenu from 'responsive-ant-menu'
import { Menu } from 'antd';
// include Menu & Popover styles if not not using Modularized Ant (see How to Use)
// import 'antd/lib/menu/style/css';
// import 'antd/lib/popover/style/css';

const Nav = () => (
    <ResponsiveAntMenu
        activeLinkKey={location.pathname}
        mobileMenuContent={isMenuShown => isMenuShown ? <button>Close</button> : <button>Open</button>}
        menuClassName={'responsive-ant-menu'}
    >
        {(onLinkClick) =>
            <Menu>
                <Menu.Item key='/' className={'menu-home'}>
                    <a onClick={onLinkClick} href={'/#'}>Home</a>
                </Menu.Item>
                <Menu.Item key='/#foo'>
                    <a onClick={onLinkClick} href={'/#foo'}>Foo</a>
                </Menu.Item>
                <Menu.Item key='/#bar'>
                    <a onClick={onLinkClick}  href={'/#bar'}>Bar</a>
                </Menu.Item>
            </Menu>
        }
    </ResponsiveAntMenu>
);

export default Nav;

Props

Name	Type	Default	Desc
mobileMenuContent	HTML	-	Required! Custom content to be show when the viewport size hits mobileBreakPoint. Supply custom HTML markup. If a function is supplied, isMenuShown is passed as an argument to be used for even more customization eg. mobileMenuContent={isMenuShown => isMenuShown ? <button>Close</button> : <button>Open</button>} to show different content.
activeLinkKey	string	-	Pass either location.pathname or React Routers path string to mark Menu.Item with matching key prop as active
mobileBreakPoint	number	575	Whenever the size of the viewport gets equal to or less than passed value, display Mobile version toggle. Value is in px.
throttleViewportChange	number	250	Throttle the callback calls whenever the viewport is re-sized. Value is in milliseconds.
mode	'vertical', 'horizontal'	'horizontal'	Allows to switch to either horizontal or vertical version of Ant's menu implementation.
theme	'light', 'dark'	'light'	Allows to set a theme of Ant's Menu component. If a function is passed, isMobile argument is supplied to implement custom logic, eg. theme={isMobile => isMobile ? 'dark' : 'light'}
placement	string	'bottom'	Allow to use various positions for Popover component, for more info, see: Ant Design: Popover
closeOnClick	boolean	true	Close the Mobile menu once the link is clicked
menuClassName	string	-	Add a custom CSS class to the Ant's Menu component
popoverTrigger	string	'click'	Allows to define a trigger type to show the Mobile Menu. Accepted values are 'click', 'hover', 'focus'