How to know when a particular header come into the view to make an breadcrumb/TOC like in MDN?
Answered
Satin Angora posted this in #help-forum
Satin AngoraOP
In MDN Docs, there is article TOC(s) for each article, which shows you on which header you are (e.g. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current).
I want to create something similiar, but I can't find anything on how to know when a
I'm aware of Intersection Observer API (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#a_simple_example) but does this work with NextJS?
If not can you give me some pointers on how to proceed with creating a interactive TOC?
I want to create something similiar, but I can't find anything on how to know when a
header marked with an unique id gets in to the view.I'm aware of Intersection Observer API (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#a_simple_example) but does this work with NextJS?
If not can you give me some pointers on how to proceed with creating a interactive TOC?
Answered by fuma
You can use a native web API called Intersection Observer, it can detect which element is inside of your viewport, so that you can determine which heading is active now.
You can also take [my project](https://next-docs-zeta.vercel.app/docs/headless/components/toc) as a reference: https://github.com/SonMooSans/next-docs/tree/main/packages/next-docs/src/toc
And before that, you have to extract the headings from your document (Assume it's a markdown/MDX document), you can write a custom remark plugin to find the headings and store it somewhere.
If you have any points don't understand, feel free to ask here
You can also take [my project](https://next-docs-zeta.vercel.app/docs/headless/components/toc) as a reference: https://github.com/SonMooSans/next-docs/tree/main/packages/next-docs/src/toc
And before that, you have to extract the headings from your document (Assume it's a markdown/MDX document), you can write a custom remark plugin to find the headings and store it somewhere.
If you have any points don't understand, feel free to ask here
4 Replies
Satin AngoraOP
There is Yari implementation of MDN TOC: https://github.com/mdn/yari/blob/886b2c8090af69467d31caef77fb446831f6acdd/client/src/document/organisms/toc/index.tsx#L7 which, I think, uses React implementation of a similiar API.
But I don't know how to use it for now.
You can use a native web API called Intersection Observer, it can detect which element is inside of your viewport, so that you can determine which heading is active now.
You can also take [my project](https://next-docs-zeta.vercel.app/docs/headless/components/toc) as a reference: https://github.com/SonMooSans/next-docs/tree/main/packages/next-docs/src/toc
And before that, you have to extract the headings from your document (Assume it's a markdown/MDX document), you can write a custom remark plugin to find the headings and store it somewhere.
If you have any points don't understand, feel free to ask here
You can also take [my project](https://next-docs-zeta.vercel.app/docs/headless/components/toc) as a reference: https://github.com/SonMooSans/next-docs/tree/main/packages/next-docs/src/toc
And before that, you have to extract the headings from your document (Assume it's a markdown/MDX document), you can write a custom remark plugin to find the headings and store it somewhere.
If you have any points don't understand, feel free to ask here
Answer
Satin AngoraOP
TYSM @fuma! I will reach out if any problems arise.