@gemeente-denhaag/anchor-navigation NPM

Anchor navigation

The anchor navigation shows which subjects there are on the page and how far you are.

When to use

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.

Alternatives and related components

Use form navigation to show the user’s progress through a set of steps in a form

Anatomy

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

(Interactive) states

The anchor navigation the states inactive, active, hover and focus.

Design properties

Typography

Label inactive: TheSans/md/400
Label active: TheSans/md/700

Color

Label inactive: text color Grey/4
Label active: text color Blue/3
Line inactive: fill color Grey/2
Line active: fill color Blue/3

Specific for mobile

Progress line: fill color Blue/3
Shadow: fill color 10% of Grey/4, border-top color Grey/3

Interactive states

Hover inactive: label color Blue/3
Focus: border color Ocher/5

Structure

Label: padding-top and padding bottom 8px, padding-right 16px
Line: width 2px, padding-right 16px
Container: min-height 40px

Mobile

Label: padding-top and padding bottom 16px
Progress line: width 2px
Shadow: height 8px, border-top 1px
Container: height 56px

Accessibility

technical requirements

Content guidelines

Labels

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”.

Best practices

Dos

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

Don’ts

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

References

https://www.agconsult.com/en/usability-blog/anchor-links-dos-and-donts/ https://www.nngroup.com/articles/in-page-links/

@gemeente-denhaag/button @gemeente-denhaag/icons

@infinitebrahmanuniverse/nolb-_gem @everything-registry/sub-chunk-355 @gemeente-denhaag/storybook

9 days ago

16 days ago

16 days ago

22 days ago

29 days ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

8 months ago

8 months ago

8 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

8 months ago

8 months ago

8 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago