One of the components that I appear to have rebuilt time and time again over the years is a Menu component. Whether it be a Header, Footer, Side-bar Navigation – whichever you choose, the underlying structure is generally the same with the only difference being the way the menu is rendered.
This post will highlight the approach I generally take these days, an approach that appears to suit the majority of clients and also one that allows them to be in control of what links are displayed.
This post is split into two parts:
- Part 1 – Designing a flexible Dynamic Menu system
- Part 2 – Utilising DMS to drive which menu content is displayed
Part 1 – Designing a flexible Dynamic Menu system
In the past, I’ve encountered scenarios where the perfect menu system has been created which is dynamically generated based upon either fields in the content (e.g. “show in menu” field or generated based upon hierarchy). Then the client has a requirement to add something different into the menu that you need to create a special case for. This can sometimes (depending on the design) result in hard coding specific menu items in order to adhere to project deadlines. Nobody really wants to be doing this!
We’ve all built menu systems, hundreds of times, many different ways. This post discusses the approach and structure of a navigation component that I begin with (and then extend the system based upon customer requirements).
Getting around the above scenarios is relatively simple insofar as you can empower the user to generated their own menu and structure which obviously can be advised by IA or business requirements. This post will show you how.
Firstly, what is a menu anyway? Well, in its simplest form it’s a collection of Navigation Items whereas each Navigation Item can be represented at its basic level by a Title and the Navigation Link. So there’s our first Data Template. The Navigation Item itself:
A Navigation Item is pretty useless in itself without being involved in a navigation Collection (unless of course you want to use it by itself somewhere on your site, which is perfectly acceptable) Then, we can group these into a Navigation Collection by defining a Navigation Collection template as below:
Now that we have our templates structure in place, we can begin to put together our menu structure.
To do this I normally create two folders; one called Navigation Collections and the other called Navigation Items. Then, I set the Insert Options on each folder so that only the relevant content item can be inserted (e.g. Navigation Collection in the Navigation Collections folder and Navigation Item in the Navigation Items folder).
The Navigation Items will contain each navigation item that can be used anywhere on your site and the Navigation Collections can contain a collection of navigation items e.g. header navigation or footer navigation
The benefits of this are:
- Navigation items can be reused in different navigation collections therefore changing the link in the item will change all usages of the item
- For multilingual sites, navigation collections can differ per language if required.
- Navigation collections can be created and managed for different scenarios e.g. A collection to display when you are not logged in and a collection for when you are.
For your Navigation component, you can use the appropriate navigation collection as the Datasource for the component. Don’t forget, the component is completely unaware where it is being used, all it is designed to do is to render information provided to it via its Datasource.
Hopefully that is straight forward and makes sense. Don’t forget, you could extend this by adding a relevant image to the Navigation Item or any other data you feel necessary. Also, you may wish to create alternative types of Navigation Items (such as Drop Down Navigation Item) to cater for different styles of navigation.
In Part 2, I will discuss how you can use DMS Rules to change the navigation depending on the type of user that is logged in.
If you would like to see some an example component that can utilise the Navigation Collections, let me know and I’ll put some together 🙂