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

Question

(I don't have enough reputation to post more than 2 links, therefore I am writitng out the URLS)

In material-ui (w*w.material-ui.com) 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 every time as a new window beside or above the main menu. Like this example: Menu with nested menu opened to the right

But I would like to have the nested menus opened in the main menu. Like this example: Nested menus open in main menu

Can someone please show me an example how to achieve this. Thanks

Dale Francis · Accepted Answer · 2017-09-03 14:52:12Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related