diff --git a/.changeset/toc-link-active-highlight.md b/.changeset/toc-link-active-highlight.md new file mode 100644 index 0000000000..2eb6266140 --- /dev/null +++ b/.changeset/toc-link-active-highlight.md @@ -0,0 +1,5 @@ +--- +"gitbook": patch +--- + +Highlight a table-of-contents link entry as active when it points to the page — or the section of a page — you are currently viewing. diff --git a/packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx b/packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx index 43048c73e8..7c5dbb7a08 100644 --- a/packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx +++ b/packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx @@ -3,6 +3,7 @@ import { SiteInsightsLinkPosition } from '@gitbook/api'; import { Icon } from '@gitbook/icons'; +import { useCurrentPagePath, useHash } from '../hooks'; import type { ClientTOCPageLink } from './encodeClientTableOfContents'; import { TOCPageIcon } from './TOCPageIcon'; import { Link } from '@/components/primitives'; @@ -13,11 +14,24 @@ export function PageLinkItem(props: { page: ClientTOCPageLink }) { const isExternal = page.target.kind === 'url'; + const currentPagePath = useCurrentPagePath(); + const hash = useHash(); + const isOnTargetPage = + page.pathnames?.some((pathname) => pathname === currentPagePath) ?? false; + // A link to a section only lights up once the reader is at that section, so sibling links + // pointing at other sections of the same page don't all highlight together. + const isActive = isOnTargetPage && (!page.anchor || page.anchor === hash); + return (