Jack Barber / Website Design

Menu Manager App for Perch Runway

Menu Manager App for Perch Runway

One of the amazing things about Perch and Perch Runway is its flexibility. Very little about the system is fixed - almost everything can be adapted to meet your needs, or extended to add extra functionality.

A project I am currently working on requires a series of different navigation structures, built from different combinations of pages. None of the navigation structures match the default page structure of the website, and the 'Navigation Groups' functionality included in Perch isn't flexible enough to meet my client's requirements.

A Bespoke Menu App

The solution I have developed involved developing a bespoke Perch app for their website, called Menu Manager.

Menu Manager gives the website administrators the capacity to create any number of menu structures by dragging and dropping existing pages from a list on the left hand side of the interface to their 'menu' on the right:

The user can determine which links on the navigation are shown as 'selected', or which are 'ancestors'. Menus can be built to be as many levels deep as required - there is no limit.

As the menu is constructed, static HTML is generated containing the standard markup for a menu in Perch, which means any existing CSS works with both the native navigation system and the bespoke Menu Manager menus.


In order to display the various menus throughout the site, I added an additional 'page attribute' to the site's page templates. This allows my client to choose from a dropdown list of options which navigation structure they would like to use on which page. Every page can be different.

As part of the Menu Manager app I built a simple runtime function which looks like this

// Place this function where the menu should be displayed:

This function is used anywhere a menu is required and the slug of the menu is passed into the function in order to tell the system which menu to display.

Update Once, Apply Everywhere

Because the menu structure is stored in the database, when a menu structure is updated the changes are immediately applied to every relevant page in the website. There's no need for my client to go through each page make tedious changes - it's all handled automatically making managing what will be a large and complex website a simpler task.

Opportunities for Future Development

Today was my first day developing this system - having built a quite proof of concept yesterday. There's lots more that could be done to improve it and add more functionality. I'll wait and see how my client get on with it before deciding how it could be improved - but here are some ideas:

  • Update menus automatically when page names/URLs are updated - currently this doesn't happen
  • Give user flexibility over menu style - perhaps switching classes etc so the menu could be a horizontal or vertical list, for instance
  • Apply unique classes to particular links - to highlight important pages, for example

How else could this be improved? Feel free to tweet me any suggestions!