Top
Menu - Getting started
Menu
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
To start using the <Menu /> component, all you need to import is React, the code and styles of the component itself: @zippytech/react-toolkit/Menu and @zippytech/react-toolkit/Menu/index.css.
This is the most basic setup for a <Menu />. In the following sections we'll explore how to use the <Menu /> in various scenarios, supported props, using columns, positioning and theming.
For the most part, you'll want to be able to easily define menu items and easily intercept user interaction with those items.
For defining items, you can use the items prop, as shown in the first example. To intercept user clicks on menu items (at any level of nesting), use onChildClick(event, itemProps: { item }).
Without any additional configuration, every item in the items array should have a label property, which can be any valid React.Node (so, basically valid JSX).
Additionally, you can specify an icon property, which can be any valid React.Node (so, basically valid JSX code). Add an onClick property to intercept a click on that particular menu item.
To have nested menus, specify an items array on each of the items that you want to have a submenu.
A <Menu /> supports configurable columns - meaning you are not stuck with the default ['label']
Columns are used when rendering the <Menu /> - for each menu item found in the items array, a row is rendered in the Menu />, and every row renders a cell for each column. Each cell corresponds to a item-column combination, and renders the value at item[column].
In addition to the default label column, there are two other special columns - icon and secondaryLabel. If any of your menu items are detected to have a icon or a secondaryLabel property, a space will be reserved for those two special columns, as if they were specified in the columns property.
<Menu /> columns are either strings or objects with a name or a render prop. Column objects can have other properties as well, but name and render are the most important ones.
To render a separator between two sections, use the "-" string as an item.
For disabled items, simply specify disabled: true.
Besides separators, you may also want to render some unselectable titles in your menu in order to better label & group options. You can do so by using isTitle: true on the desired item.
Continue reading about customizing menus in-depth in the next sections, detailing columns usage and menu positioning.