PMACS Web Team MODX Blog

Navigation Items with Content and Children

By

We had a recurring problem with dropdown navigation menus. Our website publishers kept setting them up "wrong" or at least not how we intended. The publishers want to create two different types of dropdown menu items:

1. A navigation item that links to a resource (page) and also has child resources listed in the navigation as sub-menu items
2. A navigation item that has no content of it's own and has child resources listed in the navigation as sub-menu items

Until recently, we would say that the first scenario shouldn't be done. We would say that if there is overview content, it needs to go in a subpage of the main navigation item.  This would cause the publisher to have to create an extra resource and the breadcrumbs would not be what the publishers expected.

For the second scenario, to "correctly" set up a parent navigation item, the parent resource would need to have an empty template and a link attribute set to 'rel="category"'. This wasn't ideal because it was hard for publishers to remember to set and it really wasn't what some of our publishers wanted.

Our team went around in conversations about this and we had to ask publishers to "fix" their navigations. Then we had an idea. We could check to see if a parent navigation item has an empty template, and if it does, make it a container item that does not link to anything, it just shows it's children on click or hover depending on the navigation style. If it it does not have an empty template, we create the navigation item as if it doesn't have any content and create what we've been calling a "ghost overview" link as the first item under it. 

Here is a real-life example from a site we made recently for Faculty Life & Professional Development (FLPD):

To set this up in MODX we use the pdoMenu snippet which is part of pdoTools, a handy set of "9 snippets that can perform almost any functionality of a usual website". The same idea could be used with Wayfinder but we have switched to pdoMenu because it is more performant.

Then, and this is not the actual code from FLPD, but it's the same idea, simplified, we call pdoMenu:

[[pdoMenu?
  &parents=`0`
  &tplOuter=`@INLINE <ul>[[+wrapper]]</ul>`
  &tplInner=`@INLINE [[+wrapper]]`
  &tplParentRow=`nav-tplParentRow`
]]

 

And here is the chunk, `nav-tplParentRow`:

<li>
    <span>[[+menutitle]]</span>
    <ul>
        [[+template:neq=`0`:then=`<li><a href="[[+link]]">Overview</a></li>`]]
        [[+wrapper]]
    </ul>
</li>

Now, we have a way to ensure that menus work the way we intended and we are saving work for our clients.