Skip to main content
Next-Gen. Now.
The Campaign for Concordia
Concordia University Concordia celebrates 50 years!
Concordia University Concordia celebrates 50 years!

Library

Library

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:

Screenshot showing Important dates - Graduate page, with horizontal anchor navigation to Summer term 2024; Fall term 2024; and Winter term 2025

If the Horizontal anchor navigation spans more than one line, change it to Vertical. Here's how:

  • Open the Anchor Navigation component for editing
  • Go to the Settings tab
  • Click the checkbox beside Vertical
  • In the Navigation title field, add the words On this page:
    Because the vertical navigation is long, this title helps orient your visitors.
  • Click OK
  • Sometimes when you preview and refresh the page, it may look like there's too much padding above the Anchor Navigation. If so, open the component for editing, click the Settings tab and check the No top padding box.
Screenshot showing Job & career site, with vertical anchor navigation to Staff positions; Senior administration positions; Faculty, academic, teaching & research positions; Canada Research Chairs; and Student positions
Back to top

© Concordia University