2.0.5 • Published 2 years ago
responsive-ant-menu v2.0.5
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
npm i responsive-ant-menu
- 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' |
2.0.5
2 years ago
2.0.4
2 years ago
2.0.3
3 years ago
2.0.2
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.0.15
4 years ago
1.0.14
4 years ago
1.0.13
4 years ago
1.0.12
4 years ago
1.0.11
4 years ago
1.0.10
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago