The Menu
component is used to display a list of items in a temporary sheet once
it has been toggled open by a button or some other input. Starting from 1.1.0, the
Menu
component uses the Layover component behind
the scenes, so it can automatically attempt to position the menu in the viewport.
This feature is disabled by default to keep backwards compatibility, but can be
enabled by enabling the simplified
prop.
There are 3 types of menus included by default in react-md
:
linkMenu
The menu is the lowest level component. It will require all control to be provided by the developer about if the menu should be visible and how it should be toggled.
linkDropdownMenu
This is a simple wrapper with the Menu
component so that the overhead of setting
the visibility can be abstracted away. This will render whatever children as a toggle
component for the Menu
and display a List
of the items
provided.
linkMenuButton
This is a simple wrapper of the DropdownMenu
component that defaults to being displayed
as a button. All the props from Button
as well as the DropdownMenu
are available.
The examples below will display in reverse order of complexity for usage.
Google Docs Clonelink
The following example is a Google docs clone with about 0.01% of the functionality! It is quite amazing if I do say so myself. The main purpose of this demo is to show how you can create cascading menus and custom context menus.
NOTE: This is a very complex example and there is a lot of code (1500+ lines). This should really only be viewed if you have a good understanding of the majority of the components in react-md