RFC: Support submenus in Menu `items` shorthand prop

Problem

Currently, the Menu component allows defining items as a shorthand prop:

const items = [
  'One',
  { key: 'two', content: 'Two' },  // props object usage shown here
  'Three',
]

<Menu vertical items={items} />

A Menu can also have a submenu, by placing a Menu.Menu in a Menu.Item:

<Menu vertical>
  <Menu.Item>Top Level Item 1</Menu.Item>
  <Menu.Item>
     Top Level Item 2
      <Menu.Menu>
        <Menu.Item>Submenu Item 1</Menu.Item>
        <Menu.Item>Submenu Item 2</Menu.Item>
      </Menu.Menu>
    </Menu.Item>
  <Menu.Item>Top Level Item 3</Menu.Item>
</Menu>

However, there is no way to add a submenu when using the items prop shorthand definition.

Proposed Solution

It would be great to be able to define a submenu as a key on an item’s shorthand object:

const items = [
  'Top Level Item 1',
  {
    key: 'item-2',
    content: 'Top Level Item 2',
    menu: [
      'Sub Item 1',
      'Sub Item 2',
    ],
  },
  'Top Level Item 3',
]

<Menu vertical items={items} />

By default, this would enable support for <Menu.Item menu={...} />, as the menu config above would be passed to the menu item’s menu prop.

Handling Callbacks and Active Item State

What is unclear from here is how the onItemClick callback and activeItemIndex would be handled.

One idea is to use simply disregard the nested nature of the submenu’s items when traversing indices and consider the index of an item to be its natural order in the menu. The example above would have 5 menu items where:

• index 0 = Top Level Item 1
• index 1 = Top Level Item
• index 2 = Sub Item 1
• index 3 = Sub Item 2
• index 4 = Top Level Item 3

Given the above proposed submenu shorthand config, we’d render like so:

<Menu vertical items={items} activeItemIndex={2} />

[GregoryPotdevin]

Started playing around with this. The version with activeIndex is actually very straightforward to build. Might be tough to have both activeIndex and activeItem at the same time, though.

Here’s a quick hack, didn’t prepare a PR yet as I just wanted to discuss the idea

  renderItems() {
    const { items } = this.props
    const { activeIndex } = this.state
    
    let globalIndex = 0

    const renderItem = (item) => {
      if (item.menu){
        return (
          <Menu.Item key={item.key || item.name}>
            <Menu.Header>{item.content || item.name}</Menu.Header>
            <Menu.Menu>
              {_.map(item.menu, renderItem)}
            </Menu.Menu>
          </Menu.Item>
        )
      } else {
        const index = globalIndex++;
        return (
          MenuItem.create(item, {
            defaultProps: {
              active: activeIndex === index,
              index,
            },
            overrideProps: this.handleItemOverrides,
          })
        )
      }
    }
    
    return _.map(items, renderItem)
  }

The main idea is to test if it’s a menu, and use a global index counter instead of the map function’s index.

It should be pretty simple to replace activeIndex with activeItem (and pass an activeIndex prefix to renderItem, and update handleItemOverrides to use it). Just not sure how you want to handle backwards compatibility for this.

[JonSilver]

So this was a highly popular suggestion, well discussed, but was eventually auto-closed as stale… was it ever implemented in any form?