"You are here" extension

Version 1.2

The "You are here" extension tells you where you are in the navigation tree, using visual and link-title semantics. It works by comparing the URI in the address bar with the href of each navbar link - the closest match is deemed to be the current page, and hence its ancestors are the current branch.

The menus on this site already use this extension - if you look in the "About" menu you'll see that the route to this section is highlighted, and that the highlighted links have extra information in their title attributes.


Download the "You are here" script, copy it into your udm-resources folder, and add the script include to the body section:

<!-- you are here extension -->
<script type="text/javascript"


At the top of the script is a control array with five parameters:

var youAreHere = [
	'index.php',                 // default page name [eg "index.php", "default.html" etc]
	'You are here: ',            // add text to here-page title ["text"|"none"]
	'You are in this branch: ',  // add text to here-branch title ["text"|"none"]
	'before',                    // where to add title text ["before"|"after"]
	'no',                        // open here-branch menus automatically ["yes"|"no"]
default page name [eg "index.php", "default.html" etc]
Set the name of default index pages on your server - that is, the page which is displayed when calling a folder root. This is so that http://www.domain.com/ is recognised as being the same page as (for example) http://www.domain.com/index.php
add text to here-page title ["text"|"none"]
The here-page link will have a title attribute comprised of either its existing title, or its link text if it has no title, plus whatever phrase you define here. You can set this to "none" if you don't want it, but I'd strongly advise against that for most circumstances, since without title semantics non-graphical browsers will have no here-indication at all.
add text to here-branch title ["text"|"none"]
The here-branch links will also have title attributes, using the phrase you define here. You can also set this to "none", with the same advice not to.
where to add title text ["before"|"after"]
You can have the here-indication text "before" or "after" the title, to give results like You are here: Home page or Home page (you are here). It's a judgement call this one - I prefer the immediacy of before, but after would perhaps be more stylish.
open here-branch menus automatically ["yes"|"no"]

If set to "yes" then whenever the here-indicated link is in a submenu, that menu and all its parents will open automatically.

This is designed to go with an expanding menu, to provide automatic contextual navigation; it should not be used with dropdown or flyout menus - the menus would open, but not be positioned.

Styling the indicated links

Here-indicated links will have their rollover styles applied by default. You vary the styling from there by addressing the links from external CSS - indicated links have the class name "udmY".

You can copy-and-paste the following examples and edit them to suit; but to understand them fully, you really need to have read the documentation about applying individual item styles. This is the same as that - defining additional styles for a specific class name applied to the default, visited and rollover states of links:

/* [nav] default you are here will be same as rollover unless otherwise specified */
#udm a.udmY, #udm a.udmY:visited {

/* [nav] re-inforce original rollover or do something else */
#udm a.udmY:hover, #udm a.udmY:focus, #udm a.udmY:visited:hover, #udm a.udmY.udmR, #udm a.udmY.udmR:visited, #udm a.udmY:active {

/* [menu] default you are here will be same as rollover or inherit from navbar styles unless otherwise specified */
#udm ul a.udmY, #udm ul a.udmY:visited {

/* [menu] re-inforce original rollover or do something else */
#udm ul a.udmY:hover, #udm ul a.udmY:focus, #udm ul a.udmY:visited:hover, #udm ul a.udmY.udmR, #udm ul a.udmY.udmR:visited, #udm ul a.udmY:active {

That's quite a simple example, but it should give you the general idea. Have a look at the MSDN demo for a similar example in practise.

If you're using any additional menu classes you can add extra rules for them as well:

/* [orange menu] default you are here will be same as rollover or inherit from default menu styles unless otherwise specified */
#udm ul li.orangeMenuItem a.udmY, #udm ul li.orangeMenuItem a.udmY:visited {

/* [orange menu] re-inforce original rollover or do something else */
#udm ul li.orangeMenuItem a.udmY:hover, #udm ul li.orangeMenuItem a.udmY:focus, #udm ul li.orangeMenuItem a.udmY:visited:hover, #udm ul li.orangeMenuItem a.udmY.udmR, #udm ul li.orangeMenuItem a.udmY.udmR:visited, #udm ul li.orangeMenuItem a.udmY:active {

Implementation notes

You don't need to use absolute links in your navigation for this to work - relative or root paths are fine - because the href property of a link is [or should be] fully qualified: "http://www.domain.com/page.html" for an attribute value of "page.html".

If the extension is used on a page which contains the menu, but which isn't linked in the menu tree, the tree will be highlighted as deep as it goes to that location. This page is a good example: the highlighting gets as far as the "Modules & Extensions" link in the "About" menu. If no better match is found, the script will end up with the shortest link that's wholly contained within the current address - most likely a link to the home page.

This extension can't really be used in a frameset - partly because the address it compares against will be the address of the frameset, and partly because the highlighting is tied to onload - so in most framed environments the indicated link will never change (unless by some contrivance every page is a unique frameset).

Browser notes

This extension is not supported in Safari < 1.2, because earlier builds don't qualify the href property (they're the should be I mentioned earlier).


We would like your feedback! Take the UDM4 Survey!

UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.