使用导航层叠菜单

Question

我的菜单大致定义如下：

import { Component } from "react";
import { Nav, Navbar, NavDropdown } from "react-bootstrap";

export default class App extends Component {
    render(): ReactElement {
        return <Navbar className="d-flex" expand="lg">
            <Nav>
                <NavDropdown title="String">
                    <NavDropdown title="Numeric">
                        <NavDropdown.Item onClick={() => {
                            // ...
                        }}>Validate</NavDropdown.Item>
                        <NavDropdown.Item onClick={() => {
                            // ...
                        }}>Create</NavDropdown.Item>
                        <NavDropdown.Item onClick={() => {
                            // ...
                        }}>Create sequence</NavDropdown.Item>
                        <NavDropdown.Item onClick={() => {
                            // ...
                        }}>Value of</NavDropdown.Item>
                    </NavDropdown>
                    // ...
                </NavDropdown>
            </Nav>
        </Navbar>;
    }
}

我希望子菜单向右层叠（或者更确切地说，向末尾的方向层叠）。相反，子菜单会覆盖更高级别的菜单，如下所示：

下拉菜单

如何定义菜单来移动子菜单？

Answer 1

我还没有找到使用

<NavDropdown>

使其工作的方法，但如果您可以更改为使用

<Dropdown>

来代替，您可以按如下方式实现此目的：

<Dropdown drop="right">
  <Dropdown.Toggle variant="success" id="dropdown-basic">
    Menu
  </Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item href="#/action-1">Item 1</Dropdown.Item>
    <Dropdown drop="right">
      <Dropdown.Toggle variant="success" id="nested-dropdown-basic">
        Sub menu
      </Dropdown.Toggle>
      <Dropdown.Menu>
        <Dropdown.Item href="#/action-1">Sub Item 1</Dropdown.Item>
        <Dropdown.Item href="#/action-2">Sub Item 2</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
    <Dropdown.Item href="#/action-3">Item 2</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

在此，我们使用

drop="right"

元素上的

<Dropdown>

属性使菜单向右弹出而不是向下弹出。

这里有一个工作演示。