Dropdown Menu with Ditto

From MODx Wiki

Here's a simple example how to use Ditto to generate a dropdown/select menu.

Imagine you have a container full of documents, and you need to build a dynamic dropdown-menu for these documents for easy navigation. Here's how:

a) Create a chunk named 'dropdown':

<option value="[~[+id+]~]">[+pagetitle+]</option>

In case you didn't know by now, the special syntax [~[+id+]~] generates a link: Even if you use "SEO-friendly URLs", MODx will make sure it outputs the correct page-name for you.

b) In your document (or template) insert:

<script language="JavaScript">
function jumpTo(selObj){
thevalue = selObj.options[selObj.selectedIndex].value;
if (thevalue != 0) window.location= thevalue;
return false
}
</script>
<form action="#" onsubmit="return false" method="post">
<select name="goto" onChange="jumpTo(this);">
[!Ditto? &parents=`56` &tpl=`dropdown` &display=`100` &total=`100` &sortBy=`pagetitle` &sortDir=`ASC`!]
</select>
</form>

The small JavasScript bit is responsible for jumping to the selected URL. If you use it on every page, it makes sense to save it as an external file of course.

The rest is just the form-enclosure with a Ditto call that lists all documents of parent id 56, sorts in ASCending order by pagetitle, and uses our custom template 'dropdown'.

Usability Tip

For browsers not using JS and searchbots, you can (and should) create simple text-links inside <noscript></noscript> tags. ;Depending entirely on JS alone for navigation can be dangerous in this regard.