Anchor link menu
Link menus that navigate to sections within the current page.
The anchor link menu is a set of links mapping to different sections of the same page. It provides a high-level view of the page’s structure and content, and enables users to navigate quickly without having to manually scroll.
Also known as: Jump menu, skip navigation menu, page jump menu, in-page navigation menu, table-of-contents links.
Anatomy
A. Section title (optional): Label used to group or organize navigational links.
B. Active link indicator (required): Visual indicator showing the active menu item.
C. Navigational link (required): Label indicating the destination of the menu item on the page.
D. Vertical rule (required): Element separating the anchor link menu from page content.
Usage
| When to use | When not to use |
|---|---|
| To quickly navigate to the main sections of a page. | To jump to every sub-section on a page. |
| As a form of table of contents for a webpage. | For mobile experiences. Consider using a Navigation drawer instead. |
Best practices
- Ensure the order of the menu items is consistent with the corresponding section headings throughout the application.
- Ensure text within the anchor link menu wraps to a second line instead of truncating to ensure it’s fully visible to users.
- Clearly indicate the active menu item to help users know which item corresponds to the displayed content section.
- Avoid exceeding two levels of hierarchy within menus.
- Follow Link guidance when implementing anchor link menus.
Do Use anchor link menus to help users navigate within the same page.
Don't Use anchor link menus to navigate to different pages.
Section titles and nesting
Section titles refer to static text used to group navigation items under a common category. This text isn’t interactive and can be used with or without nested navigation items. Nesting refers to organizing navigational items according to their level of hierarchy on the page. Both methods group related content and help users navigate easily.
Section titles
Section titles group navigation items without nesting them. They’re helpful for providing context for the menu on a page.
- Use only one section title per menu.
Nesting
Nesting links group related items in a hierarchical order. They’re helpful for more content-heavy applications.
- Limit nesting to two level of hierarchy for simplicity.
Behaviors
Scrolling behavior
When a user clicks on a navigational link in the menu, the page will scroll to that content section. The active indicator then moves to the corresponding menu item. As the user scrolls down the page, the current location within the menu should be updated. The anchor link menu should always remain visible and in the same position.
Content
- Write all content in sentence case, except for acronyms or proper nouns,
- Ensure menu items match section headings to enhance the user’s understanding of the site’s information hierarchy.
- Don’t use punctuation for links.
- Limit menu labels to a few brief words to prevent unnecessary reflow.
- Reference Grammar and punctuation to learn how to use parallel structure for consistent phrasing.
