Drop Down Menus not working and Sub menu request


Topic: Drop Down Menus not working and Sub menu request

jiggsygee asked 2 years ago

*Expected behavior*I am expecting code shown below to show dropdown menu from navbar. I have had this working in tab I think, but require this simple functionality for the main menu.

*Actual behavior*Nothing happens when clicking main menu link

Resources (screenshots, code snippets etc.)

    import React from 'react';


import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBFormInline, MDBCollapse, MDBContainer, MDBNavbarToggler, MDBRow, MDBCol, MDBCard, MDBCardBody, MDBMask, MDBIcon, MDBView, MDBBtn, MDBDropdown, MDBDropdownItem, MDBDropdownMenu, MDBDropdownToggle,

} from 'mdbreact';

class EngineRoomNavbarPage extends React.Component { state = { collapseID: '' };

toggleCollapse = collapseID => () => this.setState(prevState => ({ collapseID: prevState.collapseID !== collapseID ? collapseID : '' }));

render() { return ( MDB

              <MDBNavbarNav left>
              <MDBNavItem className='mr-1'>
              <MDBDropdown>
                <MDBDropdownToggle nav caret color="primary" href="/engineroom/coachingthemes">Coaching Themes</MDBDropdownToggle>
                <MDBDropdownMenu color="primary">
                  <MDBDropdownItem href="/engineroom/coachingthemes">All Coaching Themes</MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem href="/engineroom/coachingthemes/phase1begintheattack">Phase 1 Begin the Attack</MDBDropdownItem>
                  <MDBDropdownItem href="/engineroom/coachingthemes/phase2">Phase 2: Possession Questions</MDBDropdownItem>
                  <MDBDropdownItem href="/engineroom/coachingthemes/phase3">Phase 3: Finishing the Attack </MDBDropdownItem>
                  <MDBDropdownItem href="/engineroom/coachingthemes/phase4">Phase 4: Begin the Press </MDBDropdownItem>
                  <MDBDropdownItem href="/engineroom/coachingthemes/phase5">Phase 5: Balanced Defending </MDBDropdownItem>
                  <MDBDropdownItem href="/engineroom/coachingthemes/phase6">Phase 6: Defend the Goal </MDBDropdownItem>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem href="/engineroom/coachingthemes/theme1">Theme 1 Attacking Centrally</MDBDropdownItem>
                  <MDBDropdownItem href="/engineroom/coachingthemes/theme2">Theme 2 Counter Attacking</MDBDropdownItem>
                  <MDBDropdownItem href="/engineroom/coachingthemes/theme3">Theme 3 Defend in the Defending Third</MDBDropdownItem>
                </MDBDropdownMenu>
            </MDBDropdown>
            </MDBNavItem>

            <MDBNavItem className='mr-1'>
            <MDBDropdown>
              <MDBDropdownToggle nav caret color="primary" href="/engineroom/practices">Practices</MDBDropdownToggle>
              <MDBDropdownMenu color="primary">
                <MDBDropdownItem href="/engineroom/practices">All Practices</MDBDropdownItem>
                <MDBDropdownItem divider />
                <MDBDropdownItem href="/engineroom/practices/defending">Defending</MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/practices/attacking">Attacking Transition</MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/practices/defensivetransition">Defensive Transition</MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </MDBNavItem>


          <MDBNavItem className='mr-1'>
            <MDBDropdown>
              <MDBDropdownToggle nav caret color="primary" href="/engineroom/sessions">Sessions</MDBDropdownToggle>
              <MDBDropdownMenu color="primary">
                <MDBDropdownItem href="/engineroom/sessions">All Sessions</MDBDropdownItem>
                <MDBDropdownItem divider />
                <MDBDropdownItem href="/engineroom/sessions/60minutes">60 Minutes</MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/sessions/90minutes">90 Minutes</MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/sessions/120minutes">120 Minutes</MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </MDBNavItem>


          <MDBNavItem className='mr-1'>
            <MDBDropdown>
              <MDBDropdownToggle nav caret color="primary" href="/engineroom/tacticalsolutions">Tactical Solutions</MDBDropdownToggle>
              <MDBDropdownMenu color="primary">
                <MDBDropdownItem href="/engineroom/tacticalsolutions">Tactics</MDBDropdownItem>
                <MDBDropdownItem divider />
                <MDBDropdownItem href="/engineroom/tacticalsolutions/defending">Phase 1 Begin the Attack</MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/tacticalsolutions/attacking">Phase 2: Possession Questions</MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/tacticalsolutions/defensivetransition">Phase 3: Finishing the Attack </MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/tacticalsolutions/defensivetransition">Phase 4: Begin the Press </MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/tacticalsolutions/defensivetransition">Phase 5: Balanced Defending </MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/tacticalsolutions/defensivetransition">Phase 6: Defend the Goal </MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </MDBNavItem>


          <MDBNavItem className='mr-1'>
            <MDBDropdown>
              <MDBDropdownToggle nav caret color="primary" href="/engineroom/formationstudy">Formations</MDBDropdownToggle>
              <MDBDropdownMenu color="primary">
              <MDBDropdownItem href="/engineroom/formationstudy">All Formations</MDBDropdownItem>
                <MDBDropdownItem divider />
                <MDBDropdownItem href="/engineroom/formationstudy/11v11">11 v 11</MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/formationstudy/9v9">9 v 9</MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/formationstudy/8v8">8 v 8</MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/formationstudy/7v7">7 v 7</MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/formationstudy/6v6">6 v 6</MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/formationstudy/5v5">5 v 5</MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/formationstudy/4v4">4 v 4</MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </MDBNavItem>

          <MDBNavItem className='mr-1'>
            <MDBDropdown>
              <MDBDropdownToggle nav caret color="primary">Elite 5</MDBDropdownToggle>
              <MDBDropdownMenu color="primary">
              <MDBDropdownItem href="/engineroom/theelite5">Elite Club Analysis</MDBDropdownItem>
                <MDBDropdownItem divider />   
                <MDBDropdownItem href="/engineroom/theelite5/liverpool">The Liverpool Way</MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/theelite5/barcelona">The Barcelona Way</MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/theelite5/realmadrid">The Real Madrid Way</MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/theelite5/mancity">The Man City Way</MDBDropdownItem>
                <MDBDropdownItem href="/engineroom/theelite5/psg">The PSG Way</MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </MDBNavItem>

              </MDBNavbarNav>


              <MDBNavbarNav right>
              <MDBNavItem>
               <MDBNavLink className="waves-effect waves-light" to="/engineroom">Engine Room</MDBNavLink>
             </MDBNavItem>
             <MDBNavItem>
               <MDBNavLink className="waves-effect waves-light" to="/dugout">My Club</MDBNavLink>
             </MDBNavItem>
             <MDBNavItem>
               <MDBNavLink className="waves-effect waves-light" to="/creator">Create Video</MDBNavLink>
             </MDBNavItem>
             <MDBNavItem>
               <MDBNavLink className="waves-effect waves-light" to="/signin">
                <MDBIcon icon="user" className="mr-1" />My Account</MDBNavLink>
             </MDBNavItem>

              </MDBNavbarNav>

            </MDBCollapse>
          </MDBContainer>
        </MDBNavbar>
        </div>
      );


}}

export default EngineRoomNavbarPage;

Linked to this is the need for different sub menu for main pages that we are creating. I see you mentioned you do not support this simple functionality at the moment, is this correct? If not, could you possibly suggest an alternative method for this?

Thanks.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.27.0
  • Device: iMac
  • Browser: Chrome
  • OS: Catalina
  • Provided sample code: No
  • Provided link: No