The Australian Government coat of Arms

Communities of practice

Communities of practice

Inpage nav


#1

Please provide any feedback for the In-Page Navigation component.

You can also view the component page on our documentation site for the In-Page Navigation component.


#2

Is this component intended to support links to sub-sections? This is likely to be useful for very long pages with nested headings.

Altering the markup produces a functional solution, but may be in need of additional styling to ensure the hierarchy is reflected in the visual rendering.

Markup experiment 1:

<nav class="au-inpage-nav-links" aria-label="in page navigation">
    <h2 class="au-inpage-nav-links__heading">Contents</h2>
    <ul class="au-link-list">      
      <li><a href="#section1">Section 1</a>
      <ul class="au-link-list">
        <li><a href="#">Sub-Section 1</a></li>
        <li><a href="#">Sub-Section 2</a></li>
      </ul>
      </li>
      <li><a href="#section2">Section 2</a></li>
    </ul>
  </nav>

Screenshot from experiment 1:
image

Markup experiment 2:

<nav class="au-inpage-nav-links" aria-label="in page navigation">
    <h2 class="au-inpage-nav-links__heading">Contents</h2>
    <ul class="au-link-list">
      <li><a href="#section1">Section 1</a>
      <ul>
        <li><a href="#">Sub-Section 1</a></li>
        <li><a href="#">Sub-Section 2</a></li>
      </ul>
      </li>
      <li><a href="#section2">Section 2</a></li>
    </ul>
  </nav>

Screenshot from experiment 2:
image

The second example gets me closer to representing the heading structure, but may benefit from some adjustments to margin-top


#3

Hey @gordon.grace,
We currently don’t have styling for sub links in the in-page-navigation component. I think this opens up a really good discussion though.

If a page has a large chunk of content, and the content is not too related OR users are only going to read certain parts of it, it may be better to seperate this content into seperate pages. We did something like this in the design system getting started docs. The side navigation allows users to switch between all the pages that fall under the section of getting started docs. The side navigation also supports multiple levels of nesting.

Anybody else have thoughts/user research on this?


#4

Excellent response, @sukhraj.ghuman - the answer sensibly seems to boil down to “it depends on your users and their needs”. The ideal page length is likely to vary from one user (and one scenario) to the next, and the Content structure principles described in the Content Guide seem applicable regardless of the overall document/page length.

In the rationale section for this component, it could be worth describing scenarios where designers should consider one path over another.

The scenario I’m attempting to solve for is a 7000-word policy that’s likely to be referenced online via deep permanent URLs, and printed by public servants in technical and legal roles, then read, discussed, highlighted and red-lined, and referenced again later. Sections would generally need to be read in the context of each other. The audience is likely to be small, but highly focused on the task at hand.

For example, looking at the Wikipedia page for ‘Domain Name System’, the user is presented with a few introductory paragraphs, followed by a three-level ToC exposing the detail and structure of lower levels. For some users, the introductory section will be sufficient - for many other users interested in the topic in more detail, the three-level structure (and quick links to those) really matter.


#5

The answer sensibly seems to boil down to “it depends on your users and their needs”.

This pretty much sums it up. The example of our getting started docs was just an alternative solution of breaking up content.

If the content must be on a single page, having the in-page-navigation component at the top is a great way to allow users to quickly scan the contents of that page. It’s also really useful for users on smaller devices, since the content shrinks and it would require a lot more scrolling to navigate through the page to find what they were looking for.

Sub sections would be a useful feature in this situation. I’ve added a ticket for this :slight_smile:


#6

An example of sub-section links in in-page nav from GDS:


#7

FWIW from Brussels: the EU Commission only allows one level in EUROPA’s automated inpage navigation. Editors can choose two varieties of H2 - one which appears in the inpage nav, and one which doesn’t.

On the other hand, this 1-level ToC appears to the left of the main content, not at the top of it, and travels with the user - ie, it’s always available on the left, no matter how far the user scrolls.

Generally, the feeling is that if you have so much content that you need to go deeper than H2, you probably need multiple pages, which is why they also developed navigation pages, which are actually quite good.


#8

Great - thanks for the share, @MathewLowry.

The URL you’ve shared appears to required an eID login or a membership of one of the EU countries?