Help with Sidebar Secondary Navigation

22 Posts

mcwu07 Reply #1, 9 years, 6 months ago

I am trying to create a left nav - secondary navigation that will only show the top level section you are on and on the sub links.

So for a main tree of:

Home
About Us
- About Us Sub 1
- About Us Sub 2
- About Us Sub 3
Products
- Products Sub 1
- Products Sub 2
- Products Sub 3
Contacts

If I were to navigate to any of the About Us pages (About Us - top level or Sub 1 - 3), the left nav would show:

About Us
- About Us Sub 1
- About Us Sub 2
- About Us Sub 3

Using the code below, I was able to get it to work somewhat, but am unable to hide the other top level pages.

[[!Wayfinder?
              &startId=`[[UltimateParent]]`
	      &level=`0`
              &showStart=`1`
              &hideSubMenus=`1`
]]

Using the code above, when I go to any of the About Us pages, it shows up as

Home
About Us
- About Us Sub 1
- About Us Sub 2
- About Us Sub 3
Products
Contacts

Any help would be appreciated.

Thanks.

- Mike [ed. note: mcwu07 last edited this post 9 years, 6 months ago.]

793 Posts

ottogal Reply #2, 9 years, 6 months ago

Use the parameter topLevel in the call of UltimateParent like this:

[[!Wayfinder?
              &startId=`[[UltimateParent? &topLevel=`3`]]`
          &level=`0`
              &showStart=`1`
              &hideSubMenus=`1`
]]

You have to tweak a bit the value (could be 2 or 4 or...) because it depends on the whole tree.

As a playground you might try the Wayfinder Demo. (Click the label topLevel to get a info box about this parameter.) Especially have a look at Example 6. [ed. note: ottogal last edited this post 9 years, 6 months ago.]

22 Posts

mcwu07 Reply #3, 9 years, 6 months ago

Thanks Ottogal for the quick reply,

I tried your suggestion and took a look at your demo, however, the other top level pages are still showing up.

This is where I start:

Home
About Us
- About Us Sub 1
- About Us Sub 2
- About Us Sub 3
Products
- Products Sub 1
- Products Sub 2
- Products Sub 3
Contacts

Both your suggested call and my original call resulted in:

Home
About Us
- About Us Sub 1
- About Us Sub 2
- About Us Sub 3
Products
Contacts

or

Home
About Us
Products
- Products Sub 1
- Products Sub 2
- Products Sub 3
Contacts

Any additional thoughts or suggestions on how we can get to:

About Us
- About Us Sub 1
- About Us Sub 2
- About Us Sub 3

or

Products
- Products Sub 1
- Products Sub 2
- Products Sub 3

Thanks again for all the help.

- Mike

793 Posts

ottogal Reply #4, 9 years, 6 months ago

Sorry, my reply was a bit sloppy...
It's not the parameter &topLevel, you need &top (which is not treated in my demo).
See this old thread on UltimateParent.

You need &top=`[[*id]]` to ensure that only the children of the actual page are shown.

And: It's not &showStart, has to be &displayStart...!

This should do it:

[[!Wayfinder?
          &startId=`[[!UltimateParent? &top=`[[*id]]` ]]`
          &level=`0`
          &displayStart=`1`
          &hideSubMenus=`1`
]]

22 Posts

mcwu07 Reply #5, 9 years, 6 months ago

Thanks Ottogal.

I am brand new to MODX so your help has been greatly appreciated.

I tried your new call, but it has the same effect as the previous calls.

It functions as I would like, except it will not hide the other top level pages when I drill down.

In the meantime, I am able to hide the non-Active links via CSS as workaround to get the desired effect.

Any additional thoughts on how this might be achieved via a call? Is there a working sample available to view?

Thank you.

- Mike

793 Posts

ottogal Reply #6, 9 years, 5 months ago

Stupid me: Since you want to have the same side menu also on the sub pages, of course &top=`[[*id]]` is wrong.
My former proposals I just wrote down here without testing. But I tested the following one, and it worked for me:

[[!Wayfinder?
          &startId=`[[!UltimateParent]]`
          &level=`0`
          &displayStart=`1`
          &hideSubMenus=`1`
]]

So the UltimateParent call is without any parameter like in your first code, just &showStart is replaced by &displayStart.
(Using the non existing &showStart made Wayfinder ignore the following &hideSubMenus, obviously.)

22 Posts

mcwu07 Reply #7, 9 years, 5 months ago

Thanks Ottogal.

Your call works in that it duplicates the top nav on the side nav, but it still does not hide the top level pages from the other sections. It does hide the sub items for the other top level pages, but not the top level link itself.

I am attaching a screenshot to this response to hopefully better show what I am trying to achieve.

The image on the left shows what your call does. The 2 images on the right show what I would like to achieve, where it shows the section you are in, along with the sub items.

This may not be possible without altering the CSS - which I was able to achieve.

Let me know what you think.

Thanks again for all the help.

- Mike

793 Posts

ottogal Reply #8, 9 years, 5 months ago

I tested this call:

[[!Wayfinder? 
    &startId=`[[!UltimateParent]]` 
    &displayStart=`1` 
    &hideSubMenus=`1` 
    &hereClass=`hot`
]]

It gave the desired output like in the right part of your screenshot - even when I removed the hideSubMenus parameter.
(The class "hot" is to highlight the active items.)

Please double check if the snippet UltimateParent is installed correctly.
If the site is online a link to it could help to help you.

22 Posts

mcwu07 Reply #9, 9 years, 5 months ago

Thanks Ottogal.

Here is a link to where I am testing things: http://www.axiomdgdev.com/gdf_suez/products.html

For the purposes of learning MODX, I am just using a free CSS template to learn the various components to converting a HTML comp to a MODX based website.

I reinstalled the snippet for UltimateParent and used your call.

For some reason, it is still not functioning like how I was able to get it to work via CSS. The top level pages are not showing up as link, just a h2 title.

I am aiming for something like the previously attached screenshot.

Being new to this, I appreciate all the help.

Thanks.

793 Posts

ottogal Reply #10, 9 years, 5 months ago

The top level pages are not showing up as link, just a h2 title.

Since Wayfinder is listing just (certain) children of the startId page, the parameter &displayStart is needed to show also the start page itself. How it is displayed can be defined by the startItemTpl. If this chunk is not explicitely given as a parameter, the following is used as default:

<h2[[+wf.id]][[+wf.classes]]>[[+wf.linktext]]</h2>[[+wf.wrapper]]

So to make links out of them, you can modify it to get this chunk "startTpl":

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

and add the $startItemTpl parameter to the WF call:

[[!Wayfinder?
    &startId=`[[!UltimateParent]]`
    &displayStart=`1`
    &startItemTpl=`startTpl`
    &hideSubMenus=`1`
    &hereClass=`hot`
]]

(You find the Wayfinder parameters in this Doc.)

Apart of that, I do not see a reason why you get all the siblings of the top level item in your second nav.

[ed. note: ottogal last edited this post 9 years, 5 months ago.]