I am currently developing an application using reactjs and incorporating the reactstrap css framework from Bootstrap. My goal is to create a navbar with menu and sub-menu functionality, restricted to just one level of sub-menus.
My aim is to accomplish this within a single JS file,
Example.JS
<UncontrolledButtonDropdown>
<DropdownToggle caret size="md">
Menu 1
</DropdownToggle>
<DropdownMenu>
<span> Sub Menu 1 </span>
<DropdownItem>Sub Menu 1.1</DropdownItem>
<DropdownItem>Sub Menu 1.2</DropdownItem>
<span> Sub Menu 2 </span>
<DropdownItem>Sub Menu 2.1</DropdownItem>
<DropdownItem>Sub Menu 2.2</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
I specifically require the above portion alone.
When the toggler button is clicked, a dropdown menu will list sub-menus separately in another view. The parent menu will be labeled as Menu 1.
In the regular view, the layout remains unchanged, but for mobile or responsive views, the menu should display in an organized manner.
The resulting appearance should resemble a navigation bar featuring a dropdown menu.
https://i.sstatic.net/hGByX.png
Upon clicking on the parent menu (Menu 1), the Sub Menu 1 section should be displayed independently as follows:
The dropdown menu listing sub-menus separately in another view
https://i.sstatic.net/1e6I1.png
This demonstrates that when selecting a menu, the corresponding sub-menu should appear separately in another view without the use of jQuery, accomplished purely through Bootstrap.