Open nested menu in main menu - material-ui (react)

Question

In Material UI I can program nested menus and dropdown menus. But I haven`t found an example to open the nested menus in the main menu.

With nested menus and dropdown menus the nested menus open as a new window beside or above the main menu:

But I want the nested menus opened in the main menu:

How do I achieve this?

Answer 1

You're using the wrong component. Use a List with ListItems that have NestedItems

  <List>
    <Subheader>Nested List Items</Subheader>
    <ListItem primaryText="Sent mail" leftIcon={<ContentSend />} />
    <ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
    <ListItem
      primaryText="Inbox"
      leftIcon={<ContentInbox />}
      initiallyOpen={true}
      primaryTogglesNestedList={true}
      nestedItems={[
        <ListItem
          key={1}
          primaryText="Starred"
          leftIcon={<ActionGrade />}
        />,
        <ListItem
          key={2}
          primaryText="Sent Mail"
          leftIcon={<ContentSend />}
          disabled={true}
          nestedItems={[
            <ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
          ]}
        />,
        <ListItem
          key={3}
          primaryText="Inbox"
          leftIcon={<ContentInbox />}
          open={this.state.open}
          onNestedListToggle={this.handleNestedListToggle}
          nestedItems={[
            <ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
          ]}
        />,
      ]}
    />
  </List>