Skip to main content
Apply Visit Give

Anchor Navigation

The Anchor Navigation component displays a list of anchors on a page. This shows your visitors the page structure and allows them to navigate to a section with just one click.

The menu below – with links to Uses, Best practices, Accessibility and Design options – is an example of anchor navigation.

Uses

Anchor navigation helps your visitors understand a page's structure and efficiently navigate the page. It's especially useful on:

  • Long pages
  • Complex pages
  • When visitors may need content from only one section of a page

Best practices

There are 2 basic steps involved in setting up anchor navigation: setting up the anchor link components and setting up the anchor navigation component.

Set up the Anchor Link components

Screenshot of Anchor Link component open for editing, with Anchor Link field that says support
  1. Add an Anchor Link component just above each section the anchor navigation will link to.
  2. Open the component for editing.
  3. Fill in the Anchor link field with a short, lowercase word without any spaces. For example:
    • uses
    • bestpractices
  4. Click OK.
  5. Repeat as needed.

Set up the Anchor Navigation component

Screenshot of Anchor Navigation component open for editing. Navigation links tab shows 3 links.
  1. In the AEM Sidekick, expand the Concordia section.
  2. Drag the Anchor Navigation component and place it just above the first content section on the page.
  3. Open the component for editing.
  4. Click Add item to add an item to the anchor navigation menu. Repeat as necessary.
  5. For each navigation link, add a clear, descriptive Title that matches the heading of the corresponding page section. For example:
    • Uses
    • Best practices
  6. Fill in the Anchor link field with the same word you used in the Anchor Link component. For example:
    • uses
    • bestpractices
    • best-practices
  7. If needed, use the green arrows to arrange the navigation items so they match the order of page sections.
  8. Click OK.
  9. Test each link in the anchor navigation. If a link doesn't work, it's because the anchor links in the Anchor Navigation component and the Anchor Link component aren't exactly the same. Resolve the difference, then test again.
  10. Once all links are working, activate the page.

Accessibility

Headings are vital for accessibility. Ensure the heading for each page section is clear and descriptive enough to give users a good sense of the content they'll find within that section.

Design options

By default, Anchor Navigation is set to Horizontal display. Horizontal works well when the page has a few short anchors, so they display in a single horizontal line. For instance: