UI components · Navigation
Anchor
Also called: Table of contents, TOC, On this page, Scrollspy, In-page navigation
A small table of contents listing the section titles on the current page. Click one to jump there; while scrolling, the current section is highlighted automatically.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd sticky anchor navigation on the right side of the docs page, listing the page's H2 and H3 headings, with H3s indented one step. Clicking one smoothly scrolls to that section, leaving a 64px offset for the top navbar. While scrolling, automatically highlight the current section, marking it with a vertical line and a dark block on the left. Hide it on narrow screens.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Anchor is what you need.
Use Anchor when
- Long content like docs, help centers, and long articles, where people jump around within one page
- The page has five or more sections, and users need to know where they are
- Long forms or settings pages where you want users to find a group quickly
Pick something else when
The page is short and fits on one screen
You need to jump between different pages; use a sidebar menu or top navigation
Use insteadSidebar MenuSeveral independent blocks where only one needs to be seen at a time
Use insteadTabs
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
After clicking, the section title hides behind the sticky navbar because no offset was left
- 02
The highlight doesn't follow when scrolling, or several items light up at once
- 03
Listing every level-four and level-five heading, so the table of contents is longer than the content
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A column of clickable section title links, indented by level, often with a vertical line on the left and a highlight block showing the current position.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
Anchor navigation is usually fixed on the right side of a long page (docs sites, long articles, long forms). It's a column of section titles indented by level. Click an item and the page smoothly scrolls to that section. When users scroll on their own, it automatically highlights the section they're reading. Bootstrap calls this follow-along highlighting Scrollspy. It works by giving each section heading an id and writing the links as #section-id.
How it differs from Tabs: tabs show one block of content at a time and hide the rest when switching. With anchor navigation, all the content is on the same page, and it just helps you jump around quickly. How it differs from a Sidebar Menu: a sidebar menu jumps between pages, while anchor navigation only jumps within the current page. If the page has a sticky top navbar, leave an offset for the scroll position, or the section titles will be hidden behind the navbar.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-anchor- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-anchor-wrapper.el-anchor.arco-anchor.t-anchor.n-anchor.table-of-contents.toc.VPDocAsideOutlinenav[aria-label*="目录"]nav[aria-label*="contents" i]aside nav:has(a[href^="#"]):not(:has(a:not([href^="#"]), a[href^="#/"]))
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026