Other navigation aids

Breadcrumbs can also be used to help your visitors orient themselves and navigate around your site. They are required when a page does not appear on the menu.

Menu area

The menu area appears on the left side of each website within a narrow column. It may contain one or more menus blocks. The menu area, and menu items, should remain consistent across the entire website.

The menu area is reserved for a search box and one or more menu blocks. Images, text and other items should not be included, with the exception of social media icon links (such as those used on the ANU homepage).

search box layout

Use of a search box is optional, but if included it must be the first item in the menu area.

The search should search only your website. The search header must read 'Search sitename' where sitename is the full or short name of your website.

A menu block contains a heading and a number of menu items. This website has one menu block for the contents of the Web Style Guide and one for links to related sites.

Menu items should be in sentence case. An ampersand (&) should be used instead of 'and' to keep your menu items as short as possible.

Menu item labels should match the page title of the corresponding webpage (or be an abbreviated form of this).

The first item on the menu should be 'Home', which should have no submenus. It is common to have 'Contact us' as the last item on the menu so that if people can't find what they need on the site, they can easily contact the relevant person or area.

'You are here' highlight & directory structure

selected menu item

The page that is currently open on the website is indicated on the menu with background shading and a left border. In the example to the right, the homepage is currently selected.

If you use the standard template, this highlight happens automatically as a script checks to see if the link in the menu item matches the URL of the page currently open. If the script doesn't find an exact match for the page, it tries to match the directory which contains the page. This is useful when there are pages that you don't want shown on the menu, but you would still like to have the correct section highlighted on the menu.

For example, if you have many news item pages which you do not want on the menu, you should place them inside a 'news' directory in order to have the 'News' item on the menu highlighted when users are on any of those pages:

  • index.php (your site's homepage)
  • news/
    • index.php (your top level 'News' page)
    • 12-12-13-responsive-design-rollout.php
    • 22-04-13-menus-page-updated.php
expanded menu item

Menu items that have more items underneath (submenus) are indicated with a right angled quote In the example above, two items have submenus - Compulsory elements and Content area styles.

When the reader selects an option with a submenu, the menu item expands, the submenu is indented, and the right angled quote points downwards

When the user navigates to another top level menu option, the previously expanded submenu will collapse.

Every item on the menu must have a corresponding webpage. Links to PDFs and other files are strongly discouraged.

While it is possible to have many levels of submenu we recommend no more than three levels.

The first menu block, and any menu blocks linking to content on your site, will use a highlight colour that matches the accent bar of the website banner. This is achieved via the class menu-main.

Menu blocks that link to content not on your site should use a grey or platinum highlight by replacing the class menu-main with menu-grey or menu-uni.

The menu area can have one or more menu blocks, each with a heading.

The first menu block must be headed with the website name or shortname. The first menu item must be labelled Home and should link to the website homepage. The first menu block should not link to other websites or directly to files that are not webpages such as PDF, DOC etc.

In most cases, one menu block is recommended for all the content on your website and a second menu block is recommended for linking to content that is not on your website.

You might need more than one menu block for content on your website if:

  1. There are too many menu items on the first menu, making it overwhelming for audiences and difficult to use
  2. A single menu would result in items more than four levels deep
  3. The website serves distinctly different audiences that need information grouped in their own menu blocks

You might need more than one menu block for content not on your website if :

  1. You want to provide a block of ANU links and a block of links outside ANU
  2. You want to link to sites on different topics or by different groups (for example, a block for a common College menu that appears on all College subsites and a block for links to other areas of interest.)

It is recommended that menu blocks be used sparingly, as using too many can overwhelm your visitors. For most sites, no more than two or three menu blocks should be necessary.

Icons are permitted within the menu area for social media and RSS feeds.

Menus should be built using lists and nested lists (also called sublists or indented lists) to assist with accessibility and access via mobile devices. If you use the standard template, this code is in the menu template file.

Make sure that nested lists appear within the <li> tag of the parent (don't close the <li> of the parent until after the nested list finishes).

<p>Menu heading</p>
<ul>
  <li>Home</li>
  <li>Menu item 1</li>
  <li>Menu item 2
    <ul>
      <li>Menu item 2.1</li>
      <li>Menu item 2.2</li>
    </ul>
  </li>
  <li>Menu item 3</li>
</ul>
 

Updated:  14 January 2015/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle