Anchor link

Use anchor links when users should jump to a section on the same page using a URL fragment.

Readers use them to skip long content and land on the right section. Authors expose anchors by giving headings or blocks stable ids, then linking to those ids from in-page navigation, tabs, or body copy. The address bar can also show a fragment when someone shares a link.

Where anchors come from in the product

  • Anchor navigation (concordia/components/anchor-navigation) builds a nav of #fragment links from the dialog.
  • Tabs map buttons to #tab-id panels.
  • Parsys (parsys.jsp, iparsys.jsp) can inject hidden <a name="..."> anchors derived from resource paths for deep links to components.

Content authors also add anchors by setting id on headings in RTE where the profile allows it.

When to use

  • Long pages with clear sections (policies, FAQs, program details).
  • Tabs and accordion targets when URL fragments should open a specific panel (behaviour varies by script).

When not to use

  • Cross-page navigation; use standard href paths.
  • Replacing a proper heading structure; anchors supplement, not replace, headings.

Guidelines

Do

  • Use short, unique ids (admissions-deadlines, not x7f3).
  • Test keyboard focus: targets should move focus to focusable elements or headings with tabindex="-1" if required by policy.

Don't

  • Don't duplicate id values on one page.

CRXDE Lite query

Use this query in CRXDE Lite to find instances of this component.

/jcr:root/content//*[@sling:resourceType = 'concordia/components/anchor-navigation/anchor-navigation.html']
PatternLocation
Anchor navigationapps/concordia/components/anchor-navigation/anchor-navigation.html
Parsys anchorsapps/concordia/components/parsys/parsys.jsp, iparsys/iparsys.jsp
Tabsapps/concordia/components/tabs/tabs.jsp