Top
Menu - Using columns
Menu
<Menu /> have content organized on multiple columns. By default, <Menu /> have only one column, which is the label column.
In addition, if any of your menu items contain a icon or a secondaryLabel property, a column will also be created for those, even if not explicitly mentioned.
The secondaryLabel column comes with a default style already applied in the default theme.
To specify new columns, use the columns prop to configure the <Menu /> to contain additional columns:
You can use the submenuProps prop if you want to specify other props for the submenus of this <Menu />.
A specific submenu for an item can also be customized using item.menuProps.
Columns can be configured with a number of properties. For the most basic configuration of a column, simply use the column name as a string in the columns array.
However, when you want to customize the column, you have to specify an object, with the following properties being supported:
  • name - the name to be used for the column. Column cells will render item[column.name] for every item in the menu.
  • render(item) - this prop is an alternative to the name prop, since it allows you to render any valid React.Node instead of the value in item[column.name]. Either name or render should be specified for every column
  • style - a style object. The specified styles are applied to all cells in this column. This is overwritten if the item has a style prop
  • className - a className to append to all cells in this column.
  • colSpan - how many columns to span
  • align - content align for cells in this column. Valid values are "start", "center", "end", "left" and "right".
    Their behaviour can be affected by rtl.