Navigation
Our responsive framework allows you to have 3 tiers of navigation, not including the global navigation.
If you find you need to go any deeper we suggest reviewing your information architecture and only creating a micro-site if absolutely necessary.
On larger screens the top level navigation appears as a horizontal menu at the bottom of the site header. Second and third tier pages appear in the right hand column by default but you can choose to hide these. It is shown on this page, but hidden on others within this site.
On smaller screens the your site's navigation will be accessible through 3 hamburger menus: Global links, Website links, and Section links - all of which appear above your page content.
A horizontal top-level navigation allows for fewer links. The navigation will wrap onto 2 lines but this should be avoided. You will probably find you can have around 7 or 8 top level pages.
The top level pages of your site need to be blank if they have sub-pages. Second tier pages will appear as a drop-down menu from the top-level navigation. On mobile devices this requires users to tap on a menu item to reveal them, therefore this action can't be the same as following a link to a page. Top level pages will still publish out to the live site but cannot be accessed through our navigation system so should not contain important content.
If your top-level pages do not have sub-pages they should have content as normal.
On large screens the second tier navigation is visible in the right hand column with the current page item highlighted.
This menu can be hidden in the page's Acc: www page. Unless you have a specific reason to hide it, it's best to leave it visible.
On smaller screens this menu appears as a hamburger menu and will always be displayed.
It's possible to nest a third tier of navigation in your site structure.
The third tier will open out in the navigation structure in the right-hand menu once their parent page is reached.