The anchor navigation shows which subjects there are on the page and how far you are.
Anchor navigations need to be used on longer pages with multiple sub-headings. The navigation gives the user a good overview of the content of a page.
Use form navigation to show the user’s progress through a set of steps in a form
The anchor navigation consists of:
- Line: this line shows the state of a chapter
- Label: describes the information of a chapter
- Progress line (on mobile): this line shows how far you are on a page
- Container
The anchor navigation the states inactive, active, hover and focus.
- Label inactive: TheSans/md/400
- Label active: TheSans/md/700
- Label inactive: text color Grey/4
- Label active: text color Blue/3
- Line inactive: fill color Grey/2
- Line active: fill color Blue/3
- Progress line: fill color Blue/3
- Shadow: fill color 10% of Grey/4, border-top color Grey/3
- Hover inactive: label color Blue/3
- Focus: border color Ocher/5
- Label: padding-top and padding bottom 8px, padding-right 16px
- Line: width 2px, padding-right 16px
- Container: min-height 40px
- Label: padding-top and padding bottom 16px
- Progress line: width 2px
- Shadow: height 8px, border-top 1px
- Container: height 56px
[technical requirements]
Labels should:
- Contain one to three words.
- Have the same name as the sub-heading on the page
- Be clear and predictable. Users need to know what to find under each sub-heading.
- Make sure the sub-headings are recognizable as key elements of the page.
- Make sure the words you use in the anchor links are exactly the same as the words in the sub-headings they refer to.
- Avoid unnecessary words and articles such as “the”, “a” or “an”.
Anchor navigations should:
- Allow the user to return to a previous step to review the process
- Create a clear path to completion
- Be clear as possible in order not to confuse users
- Bring the user to the specific topic he is clicking on
- Show the subheadings preceding the current subheading as active
- Continue on the next line for very long labels
- Be sticky
- Hide the menu overlay on mobile if a user clicked on a subject
- Show that the lines fill up as soon as a user scrolls
Anchor navigations should:
- Not have more than 3 lines on desktop
- Not only the current subheading as active where you are, but also all previous subheadings
https://www.agconsult.com/en/usability-blog/anchor-links-dos-and-donts/ https://www.nngroup.com/articles/in-page-links/