Cascading menus using Nav

Question

I have a menu defined roughly as follows:

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>;
    }
}

I would like the submenu to cascade to the right (or, rather, in the direction of the end). Instead, the submenu overlays the higher level menu like this:

Dropdown menu

How do I define the menu to shift the submenus?

Answer 1

I've not found a way to make it work using <NavDropdown> but if you're ok to change to use <Dropdown> insteadn you can achieve this as follows:

<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>

In this we use the drop="right" prop on the <Dropdown> element to make the menu pop out to the right instead of down.

There's a working demo here.