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#fragmentlinks from the dialog. - Tabs map buttons to
#tab-idpanels. - 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, notx7f3). - Test keyboard focus: targets should move focus to focusable elements or headings with
tabindex="-1"if required by policy.
Don't
- Don't duplicate
idvalues 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']| Pattern | Location |
|---|---|
| Anchor navigation | apps/concordia/components/anchor-navigation/anchor-navigation.html |
| Parsys anchors | apps/concordia/components/parsys/parsys.jsp, iparsys/iparsys.jsp |
| Tabs | apps/concordia/components/tabs/tabs.jsp |