This website is made with a large amount of Joomla 1.5, a salad of third party Joomla extensions and a lot of secret herbs and spices (custom PHP templates, CSS, etc.). You’ll have to read on to find out what temperature I had to pre-heat the oven to.

OK, I lied. I won’t really talk about oven temperatures or cooking anymore – it’s not really my strong point after all. If you only arrived at this page after being drawn in by the allure of a new cake recipe, I’m sorry – there must be lots of decent cookery websites for you to look for, or you can see the photo of mince (cunningly disguised as rat) on the only page that’s remains from my first website.

The real point of this page is a brief outline of what I used to put this site together. Feel free to ask about any particular aspects and see the about page.

So this is all based on a Joomla 1.5 content management system. This means I can add new pages quickly and make use of the variety of Joomla add-ons so that I don’t need to concern myself with writing yet another web contact form (for example).

Some parts of Joomla have been more customised than others. For example, the contact page is very basic and only superficially modified to make it roughly fit the style of this website. Other areas are more customised, including my own site-wide Joomla template.

Two of Joomla’s key failings are the default reliance on tables for page layout design and the rigid hierarchical content structure. My custom template should have pretty much eliminated all tables from the layout and the Joomla Tags component allows me a much more flexible tagging system which allows each article to be part of more than one “category”.

The site is valid XHTML / CSS at launch. We’ll have to wait and see how well it holds together if user generated content appears – it’s not something I’ve had time to test completely.

Did you notice anything different about the top navigation menu or crumbtrail on this site?

If not, look more carefully and (javascript permitting) you’ll see a crumbtrail with drop down submenus on some of the crumbs.

So what are your first impressions? Did you understand it straight away? If not, did you see either a crumbtrail or a menu system or was it so confusing that it’s a miracle you even managed to find this article? Have you seen something similar before that may have influenced your understanding of the concept?

The rest of the article discusses this idea in a lot more detail and some experience of web design might be helpful to get the most out of it but I’m keen to hear everyone’s comments, not just the more technical visitor so don’t feel obliged to read and understand the main content before you let me know what you think.

I wanted to find a way to save some valuable screen space but I still like being able to always see where you are on a website and a crumbtrail is one very good method of conveying that information. Equally, it would be a bit useless if there were no navigation menu on this site so I thought the two could be combined.

This is actually an idea I’ve wanted to try out for many years but this is the first chance I’ve had to implement it. I can’t say it’s the first time this has been done on a website because I’ve seen relatively few of the world’s websites but I do come across a large number of sites and have not seen this approach before so I’m certain that currently it is at least very rare.

Although websites using this approach seem rarer than unappealing cakes I have recently seen a similar idea in Windows Vista Explorer and some rarer applications (I think many were Linux programs) so it may be a navigation method that is much more widespread in five years as people get used to the approach in offline applications.

I think it is an intuitive way to navigate a website but the visual appearance is going to make or break it. If it’s not obvious that the words are part of a drop down menu then the user could be stuck on their first page view. I hope that the left and down arrows I’ve used make this obvious enough but there is probably room for improvement in that aspect of the design.

I was hoping to implement this using only CSS so that it would work for those who dislike scripts on websites and so it could be more accessible. This wasn’t possible, mainly due to limitations in IE’s CSS support but also because Joomla and the extensions I have installed in it can not generate the source code needed (I could write something to do it myself but I’ve not really got time at the moment). So my compromise solution is to generate a separate crumbtrail and menu and then combine them using client side javascript.

Here’s what visitors with various configuration settings should see:

Of these situations, I think that only CSS off and Javascript on results in a more complicated navigation system than a separate crumbtrail and menu. My guess is that some accessibility systems such as screen readers may “see” this situation but I may be giving their scripting features too much credit. I’m not sure how much of a problem this will be in practice.

The approach does have other drawbacks which may make it entirely unsuitable for some sites. For example, the number of items to be sent to the client and for the javascript to process could get unwieldy rather quickly on a site with many (or a growing number of) menu items. Although it is feasible that the menu items for lower-level menus could be loaded through AJAX or similar to mitigate this effect. Or maybe a client-side cache of the full menu structure could be used to save on bandwidth?

As far as a name for this is concerned, I just jotted down the first name I thought of but I suppose you could call it any number of things including the Super Crumb, Super Crumb Menu, SCM, SCrumbM (if you’re into Rugby) or, if you really dislike the concept, SCuM.