Welcome to refreshed tut.

After (exactly!) 3 years I decided to do some adjustments to old tutorial about setting up drop-down menu in MODX when using Wayfinder plugin. Many people said that they would like to see Revolution version of the guide, so here it is. I also added some things based on comments (like screen presenting installed plugin and 3-lvl menu tree) to make tutorial more clear. Some grammar mistakes have also been fixed.

I hope you will enjoy it even more than old version and it will help you build menus with Revolution version of MODX.


Hi, after my last “article” I decided I`m not a good writer so I will stick to technical topics which are more about “how-to” than Shakespeare-like grammar (no offense Shakespeare).

As I`m pretty big fan of MODX CMS I would like to show you how to make drop-down menu with pre-installed navigation snippet – Wayfinder. I was looking for such solution by myself, but many of the tutorials were outdated, poor in comments or just “not enough”.

First of all we need Wayfinder snippet, it`s preinstalled with MODX (I`m using newest version – Evolution 1.0.4) so that shouldn`t be a problem, but to make it clear we can check it in your Administration panel (Elements > Manage Elements > Snippets and under Navigation category you should see Wayfinder). Just in case it’s not there, we can download plugin from extras repository

For Revo: Revolution doesn’t come with Wayfinder. We need to install it as 3rd party component. After we are done, our Package Manager should look like on the image below.

wayfinder_package_manager

Unless we agreed to make “Example site content” during installation, we need to create some menu-tree for feature tests, it`s important to have menu with 2-3 levels as CSS has been written to support such construction.

For Revo: Revolution doesn’t provide option to install dummy content. We need to create it ourself or install 3rd party component which loads some unrelevant data for development needs.

Making MODX to create menu is pretty simple, we need a snippet-call which for our purpose is going be something like that (just copy this code and put it into your template to navigation div. For me it was “menu” div):

[[Wayfinder? &config=`cssplay-dropdown` &startId=`0`]]

Small explanation:
Wayfinder? – Snippet call to execute navigation from Wayfinder
config – Wayfinder has it`s predefined configurations which are stored in assets/snippets/wayfinder/configs
(you can find them on MuddyDogPaws.com)
startId – Sets hierarchy of our menu, we want whole menu to be under drop-down terms so we stay with 0

To make it 100% working, we need CSS file link in our template (Technically it`s already in config settings, but I found that putting it myself is more stable), so we copy this and paste into head section:

For Evolution

<link rel="stylesheet" media="all" type="text/css" href="assets/snippets/wayfinder/examples/cssplay/dropdown.css" /> 
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="assets/snippets/wayfinder/examples/cssplay/dropdown_ie.css" />
<![endif]-->

For Revolution

<link rel="stylesheet" media="all" type="text/css" href="core/components/wayfinder/examples/cssplay/dropdown.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="core/components/wayfinder/examples/cssplay/dropdown_ie.css" />
<![endif]-->

TIP: There are multiple examples of drop-down menu stored in Wayfinder predefined menus, you can see them on MuddyDogPaws.com, so it`s your choice which you are going to use. I took simple dropdown menu supporting 3-level construction as I`m going to customize it with CSS anyway, but if you want to change configuration just change parameter (name) for

&config=`cssplay-dropdown`

by putting name of your configuration file. Also remember to change this name in all paths like CSS link.

Now when we put snippet-call, CSS link into your template and choose configuration file, we should see drop-down menu – probably ugly with default settings. Of course we don`t want to have something like that on our website and there are two ways to solve this.

1. We can create our own CSS file and customize menu in it (remember to update CSS paths).

2. We need to go to assets/snippets/wayfinder/examples/cssplay and edit CSS file of our menu (I recommend backup before you start). For example for cssplay-dropdown.config.php it`s gonna be dropdown.css.

Now when you have your menu set and know which files are responsible for its look, with basic html/css knowledge you can make dropdown menu of your dreams ;).

Tutorial details:
MODX version: Evolution 1.0.4
Wayfinder version: 2.0

Revo update:
MODX version: Revolution 2.2.8
Wayfinder version: 2.3.3