In page navigation

Using the component

Do

• Add the in page nav to long, content heavy pages.
  • If the content is very long, consider splitting it and spreading it over multiple pages or using accordions or tabs – in addition to an in page nav. An in page nav isn’t the only way of helping users navigate very large content.
• The in page nav should always be at the top of the page, just below the hero banner or page title and summary.
• Save the page and check how the in page nav displays – you may need to adjust your headings if they are too repetitious when grouped together, or the headings are too long. 

Don’t

• Add the in page nav to pages that have only one Heading 2 – it wouldn't improve the user's navigation of the page.   
• Add to landing pages unless they’re being used to display a lot of text content. Most landing pages are used for visual or navigational purposes and don't need an in page nav.

How to add an in page nav

To add an in page nav to a landing page:

1. Click Add section, select Three Quarters / Quarter – Large gutter and click the Add section button. It can also be used on Three Quarters / Quarter, Two thirds / Third – Large gutter and Two thirds / Third sections.
2. In the left-side three quarter column click Add block.
3. Use the Filter by block name search field and type in page nav, then select it from the search results.
4. The Title field can be left unchanged, as it is only seen by editors. 
5. Click the Add block button. 
6. Click the page's Save layout button. Only after you save the layout will you see the block properly generate the in page nav with the anchor links. All text that has been marked up as Heading 2 on the page will generate in the in page nav. 

For standard pages, the in page nav is automatically added when the page is created. To add an in page nav to a standard page, follow the set navigation on standard pages instructions. 

Adding or removing items from your in page nav

Text marked as a Heading 2 will automatically appear in the in page nav. All other heading types are excluded form the in page nav. If you don't know how to change the heading type, see the guide to editing a Block / WYSIWYG. 

If you don't want your text marked up as a Heading 2 to show in the in page nav, go to the Styles dropdown in your Block / WYSIWYG menu and select Excluded from in page nav. Other components that include heading options may not have the ability to exclude Heading 2 text from the in page nav. 

How this component displays on a landing page

Live examples

You can see live examples of how agencies have applied the component to their content.

• Department of Customer Service – Italian (Italiano) COVID-19 resources and information
• Department of Customer Service – COVID-19 posters and signage
• NSW Registry of Births, Deaths & Marriages – Change of name

Example of the in page nav

In page navs should always be added as the first block on a page, left aligned, below the page title and summary.

The H2 Headings will appear under the 'On this page' heading – but only one in page nav will function per page. 

See the in page nav for this page