Use sentence case to display the navigation text. On hover, the global navigation option displays an ochre top border. On focus, the global navigation option also has an ochre dotted outline. Figure 11: Global navigation option - focus state Drop-down menus If a global navigation menu option has a drop-down menu it should have a downwards chevron (v) next to the option text to indicate this. For example, 'Browse all information and services v'. The drop-down menu should display upon hovering on this option text of the global navigation menu or when it is reached in the tab-order of the page. Clicking on a global navigation menu option that has a drop-down menu will take you to the high-level page for that global navigation menu option. When tabbing through the page, once the drop-down menu is expanded the tab order should tab though all options in the drop-down menu; An ochre dotted outline should clearly identify which menu item is currently in focus in the tab order; The Esc key should close the menu; and Once all drop down menu options have been tabbed through, the drop down menu should close and the tab order can proceed to the next global navigation menu option on the right. Figure 12: Drop-down menu option - focus state Utility navigation Utility navigation contains secondary actions and tools such as print, share and subscribe. Outside of those elements already referenced in the header links, utility navigation is not mandatory. Social media, print and email this link are optional sharing and functional utility tools. If these elements are included they are to be placed in the . Breadcrumbs The breadcrumb navigation shows the current location in the website, helping them to user’s understand where they are in relation to the rest of the website. It allows the user to travel back up the hierarchy to any level without having to hit all the intermediate points. The breadcrumb navigation is placed below the and must:
Use sentence case to display the navigation text. On hover, the global navigation option displays an ochre top border. On focus, the global navigation option also has an ochre dotted outline. Figure 11: Global navigation option - focus state Drop-down menus If a global navigation menu option has a drop-down menu it should have a downwards chevron (v) next to the option text to indicate this. For example, 'Browse all information and services v'. The drop-down menu should display upon hovering on this option text of the global navigation menu or when it is reached in the tab-order of the page. Clicking on a global navigation menu option that has a drop-down menu will take you to the high-level page for that global navigation menu option. When tabbing through the page, once the drop-down menu is expanded the tab order should tab though all options in the drop-down menu; An ochre dotted outline should clearly identify which menu item is currently in focus in the tab order; The Esc key should close the menu; and Once all drop down menu options have been tabbed through, the drop down menu should close and the tab order can proceed to the next global navigation menu option on the right. Figure 12: Drop-down menu option - focus state Utility navigation Utility navigation contains secondary actions and tools such as print, share and subscribe. Outside of those elements already referenced in the header links, utility navigation is not mandatory. Social media, print and email this link are optional sharing and functional utility tools. If these elements are included they are to be placed in the . Breadcrumbs The breadcrumb navigation shows the user’s current location in the website, helping them to understand where they are in relation to the rest of the website. It allows the user to travel back up the hierarchy to any level without having to hit all the intermediate points. The breadcrumb navigation is placed below the and must:
Website%20Visual%20Design%20and%20Functional%20Standard_0.docx