In page navigation provides navigation to individual anchor links located in the main content. This component when placed on a content page will automatically create a list of anchor links from the H2 headings on the page. This helps website visitors easily scan the sections of a page and jump to the content they’re looking for without having to scroll down the page.
It is left aligned and uses anchor links to allow users to jump directly to specific sections within a single long web page. It makes it easier to find relevant information without scrolling through the entire page.
On this page
- Using in page nav
- How to add an in page nav on a page
- Adding or removing items from your in page nav
Using in page nav
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
- Do not add the in page nav to pages that have only one Heading 2; it wouldn't improve the user's navigation of the page.
- Do not 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.
Tip
Don’t use numerals on their own in headings. Numeral-only H2 headings don’t give the user enough context to scan the page, and they will not appear in the page navigation.
How to add an in page nav on a page
To add an in page nav to a landing page:
- 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.
- In the left-side three quarter column click Add block.
- Use the Filter by block name search field and type in page nav, then select it from the search results.
- The Title field can be left unchanged, as it is only seen by editors.
- Click the Add block button.
- 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 using headings on a 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.
See this live on nsw.gov.au
Visit In page navigation to see how this works on a live page.
You can also see live examples of how agencies have applied the component to their content below:
- 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
Need any more help?
If you have any questions, or require assistance with anything mentioned on this article, submit a request via the webform.