On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • After exhausting Google (including all the Russian pages) I really cannot get wayfinder to work with my bootstrap navigation.
        <div class="navbar navbar-default navbar-fixed-top">
    		<div class="col-sm-7">
            <div class="navbar-header">
    		
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="/"><img src="images/Weaver.png"></a>
    		  </div>
            </div>
    		<div class="col-sm-5">
            <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="travel.html">Travel Info</a></li>
    			<li class="dropdown">
    				<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    				<ul class="dropdown-menu">
    					<li><a href="#">Val Thorens</a></li>
    				</ul>
    			</li>
    			<li><a href="photos.html">Photo Album</a></li>
                <li><a href="#contact">Holiday</a></li>
                <li><a href="contact.html">Contact</a></li>
              </ul>
    		</div>
        </div><!--/.nav-collapse -->

    Ignore the silly href links as this was my html test code before porting to modx.

    Is what I'm aiming for; got pretty annoyed and deleted my wayfinder code so I cannot show you what I currently have. It works great until i need to add drop downs, that is the problems.

    Any push in the right direction would be greatly appricated.

    Ross.
    • My Wayfinder call:

      [[Wayfinder?
          &startId=`0`
          &level=`0`
          &outerTpl=`mmouterTPL`
          &rowTpl=`mmrowTPL`
      ]]
      


      The mmouterTPL:

      <ul class="nav navbar-nav">
        [[+wf.wrapper]]
      </ul>
      


      The mmrowTPL (you have to have the Switch Extra installed):

      [[!switch?
          &get=`[[+isfolder]]`
          &c1=`0` &do1=`<li[[+wf.classes]]><a href="[[+wf.link]]">[[+wf.linktext]]</a></li>`
          &c2=`1` &do2=`<li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">[[+wf.linktext]] <b class="caret"></b></a>
          [[Wayfinder?&startId=`[[+wf.docid]]`&outerTpl=`mminnerTPL`&rowTpl=`mminnerrowTPL`]]
          </li>`
          &default=`<li[[+wf.classes]]><a href="[[+wf.link]]">[[+wf.linktext]]</a></li>`
      ]]
      


      The key here is to see if the current resource is a folder. If not, we just use a regular link syntax:

      <li[[+wf.classes]]><a href="[[+wf.link]]">[[+wf.linktext]]</a></li>


      If the resource is a folder, then it has children, and the resource itself is not clickable for navigation, only to open up the drop down menu (which works well with mobile devices of course) and is the way Bootstrap 3 works.:

      <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">[[+wf.linktext]] <b class="caret"></b></a>
          [[Wayfinder?&startId=`[[+wf.docid]]`&outerTpl=`mminnerTPL`&rowTpl=`mminnerrowTPL`]]
      </li>
      


      Note that we have another Wayfinder call there to create the submenu:

      [[Wayfinder?&startId=`[[+wf.docid]]`&outerTpl=`mminnerTPL`&rowTpl=`mminnerrowTPL`]]


      Note the use of &startId=`[[+wf.docid]]`. This ensures that the starting parent resource for this call is the current resource, so that it shows it's children.

      The mminnerTPL:

      <ul class="dropdown-menu">
        [[+wf.wrapper]]
      </ul>
      


      The mminerrrowTPL:

      <li><a href="[[+wf.link]]">[[+wf.linktext]]</a></li>

      • You sir, are a god.

        Worked perfectly, I think I was getting close, but I wasn't looking at the Switch extra and that could have been my downfall.

        Many Thanks.
        • Yes, there are other conditional extras out there such as If but I found Switch good for this case. It was indeed a bit of a mind job and took me awhile to come up with a workable solution.
          • Do you have a live URL of the working solution? Would love to see something in action using this Wayfinder call
              ...
            • http://www.weaverski.co.uk/

              The site is live but not finished, Wayfinder works wonderfully, just need some styling in my drop downs now.
              • @rx2, thank you very much for this code, I was in need of this too!
                  ----
                  Daniel Melo
                • You can do it with one wayfinder call. Lighter than the previous solution in the resource cache

                  Wayfinder call:

                  [[Wayfinder? &startId=`0` &level=`2` &outerTpl=`NavbarOuter` &rowTpl=`NavbarRow` &activeParentRowTpl=`NavbarActiveParentRow` &parentRowTpl=`NavbarParentRow` &innerTpl=`NavbarInner` &innerRowTpl=`NavbarInnerRow` &firstClass=`` &lastClass=`` &removeNewLines=`1`]]


                  NavbarOuter:

                  <ul class="nav navbar-nav">[[+wf.wrapper]]</ul>


                  NavbarRow:

                  <li[[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>


                  NavbarParentRow:

                  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[[+wf.title]]">[[+wf.linktext]] <b class="caret"></b></a>[[+wf.wrapper]]</li>


                  NavbarActiveParentRow:

                  <li class="dropdown active"><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[[+wf.title]]">[[+wf.linktext]] <b class="caret"></b></a>[[+wf.wrapper]]</li>


                  NavbarInner:

                  <ul class="dropdown-menu">[[+wf.wrapper]]</ul>


                  NavbarInnerRow:

                  <li class="divider"></li>
                  <li[[+wf.classes]]><a href="[[+wf.link]]">[[+wf.linktext]]</a></li>


                  With a custom css rule:

                  .dropdown-menu li.divider:first-child {
                    display: none;
                  }




                  • Hi rx2 and others,
                    I have a slightly more complicated menu for a site I'm working on.

                    I've followed rx2 code and got the basics working, however I need help to expand this a little further if possible.

                    Attached is a screenshot for you to quickly see what I'm after. I have the html coded below ready to setup in Modx.

                    So the basics I have working. Now I need to expand on the code that pulls in the drop down menu to look at the site tree and bring back second level (Advice,Investment,Services) as titles, then display the sections within each second level.

                    Please can anyone help me to get this working please, and point me in the right direction. I'm sure I need to expand/ code more inside mminnerTPL to pull in the extra html to handle but not sure how to.

                    Thank you guys!


                    Financial Management
                    Advice
                    - Thinking about investment
                    - Seeking advice
                    - Thinking about retirement

                    Investment
                    - Investment Advice
                    - Wealth Management
                    - Rebalancing/ Fund Switch

                    Services
                    - Our service agreement
                    - Trustees
                    - Fee Agreement


                    Investment Management
                    Investment
                    - Thinking about investment
                    - Seeking advice
                    - Thinking about retirement

                    Portfolios
                    - Portfolio 1
                    - Portfolio 2
                    - Portfolios 3

                    Services
                    - Our service agreement
                    - Trustees
                    - Fee Agreement

                    etc...

                    <nav class="navbar navbar-default hidden-xs" role="navigation">
                      <!-- Collect the nav links, forms, and other content for toggling -->
                      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav"> 
                    		<li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Financial Advice</a>
                                  <div class="dropdown-menu multi-column">
                                    <div class="row">
                                        <div class="col-sm-4 col-md-4">
                                        	<span class="subnavheading">Advice</span>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Seeking Independent Advice</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-4 col-md-4">
                                        	<span class="subnavheading">Investment</span>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Investment Advice</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-4 col-md-4">
                                        	<span class="subnavheading">Services</span>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Our Service Agreement</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Qualifying Workplace Pensions</a>
                                  <div class="dropdown-menu multi-column">
                                    <div class="row">
                                        <div class="col-sm-4 col-md-4">
                                        	<span class="subnavheading">Advice</span>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Seeking Independent Advice</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-4 col-md-4">
                                        	<span class="subnavheading">Investment</span>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Investment Advice</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-4 col-md-4">
                                        	<span class="subnavheading">Services</span>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Our Service Agreement</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                      </div><!-- /.navbar-collapse -->
                    
                      Regards
                      Jordan
                    • Quote from: phijui at Dec 08, 2013, 04:24 AM
                      You can do it with one wayfinder call. Lighter than the previous solution in the resource cache


                      Hi phijui

                      Thanks for sharing that. Works beautifully for me.
                      Did you come across any guidelines for triggering the drop down on MouseOver instead of on click?
                        ...