Usage guidelines
Tertiary navigation is generally used as a table of contents on longer pages. Only use tertiary navigation when content can’t be split into separate pages, tabs, or accordions.
Tertiary navigation links should map to section headings. Only title components that are h2s should be shown in the tertiary navigation. Make sure that each link's text exactly matches the text of its corresponding section title.
For more information on heading structure, refer to Anatomy:
Anatomy, Accessibility – Heading elements
Do
- Use tertiary navigation according to the heading structure
Don't
- Add tertiary navigation to a landing page or any page that has less than two h2s
- Erroneously assign h2s to content so it appears in the tertiary navigation — the tertiary navigation must follow the heading structure
- Publish the placeholder section number IDs — replace the placeholders with what exists within the page content
Only the title and button components are allowed in the tertiary navigation container.
- Match the h2 text with the tertiary navigation links
- Author the link destination for the tertiary navigation in the Link field. For example, if your h2 text is “Example heading”, the text in the Link field should be “#example-heading”.
- Match the anchor text to the h2's ID field. For example if your h2 text is “Example heading”, and your anchor link text is “#exampleHeading”, the the h2's ID should be “exampleHeading”. Don't add the hashtag in the ID field.
Example
Link field’s unique identifier: #jumpLink
Destination ID: jumpLink
Reminders
- IDs must be unique – they can only be used once per page.
- We use camelCase for IDs as a front-end code standards best practice