Mastering Menu Order in MODX Revolution: Sorting by Folder and Element Index
Problem: You're using MODX Revolution's powerful menu system to structure your website navigation, but you need more granular control over the order of your menu items. Specifically, you want to sort menu items first by their folder order and then by the order of individual elements within each folder.
Rephrased: Imagine you have a website with a "Services" menu that contains sub-menus for "Web Design," "SEO," and "Marketing." You want to ensure that these sub-menus appear in the order "Web Design," "SEO," and "Marketing," and then that the individual elements within each sub-menu are also ordered as desired. This article will show you how to achieve this using MODX Revolution's built-in features.
Scenario and Original Code:
Let's say you have the following folder structure in your MODX Resource Tree:
- Services
- Web Design
- Resource 1
- Resource 2
- Resource 3
- SEO
- Resource 4
- Resource 5
- Marketing
- Resource 6
- Web Design
You've set the "Menu Index" of each folder and Resource as follows:
Resource | Menu Index |
---|---|
Services | 1 |
Web Design | 1 |
SEO | 2 |
Marketing | 3 |
Resource 1 | 1 |
Resource 2 | 2 |
Resource 3 | 3 |
Resource 4 | 1 |
Resource 5 | 2 |
Resource 6 | 1 |
However, when you view the website, the menu doesn't display in the desired order. This is because MODX typically prioritizes the "Menu Index" of the Resource itself, not its parent folder.
The Solution: Using "Sortby" and "Menuindex"
MODX Revolution offers a powerful solution using the "Sortby" setting in your Snippet or Template. Here's how to achieve the desired folder-then-element sorting:
- Modify Your Snippet or Template: Within your Snippet or Template that generates your menu, add the following line to the
sortby
parameter:
'sortby' => '[[*parent]] ASC, [[*menuindex]] ASC'
- Explanation:
[[*parent]] ASC
: This part sorts by theparent
resource ID in ascending order. This ensures that folders are sorted correctly first.[[*menuindex]] ASC
: This part then sorts by themenuindex
of each individual Resource in ascending order.
Why This Works:
- Hierarchical Sorting: The
[[*parent]] ASC
part tells MODX to first sort by the parent Resource ID. This groups elements within the same folder. - Element Ordering: Once grouped by folders, the
[[*menuindex]] ASC
part then sorts the elements within each folder by their individual "Menu Index" values.
Additional Tips:
- Descending Order: To sort in descending order, replace
ASC
withDESC
. - Complex Sorting: You can combine multiple sorting criteria using commas.
- Advanced Features: MODX also provides advanced features like custom sorting using Snippets or custom filters for more complex ordering scenarios.
Benefits:
- Control over Menu Order: You gain full control over the order of your menu items, creating a logical and consistent navigation experience for your users.
- Improved User Experience: By ensuring a well-organized and predictable menu structure, you enhance user navigation and website usability.
Resources:
Conclusion:
By mastering the sortby
and menuindex
settings in MODX Revolution, you can achieve a highly customizable menu order that suits your exact needs. This provides a robust way to manage navigation structure and deliver a superior user experience.