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'