diff --git a/.changeset/toc-link-active-highlight.md b/.changeset/toc-link-active-highlight.md new file mode 100644 index 0000000000..5756a295f1 --- /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 you are currently viewing. diff --git a/packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx b/packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx index 8e8db7f20b..10d570a5b3 100644 --- a/packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx +++ b/packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx @@ -7,6 +7,7 @@ import { Link } from '@/components/primitives'; import { tcls } from '@/lib/tailwind'; import { SiteInsightsLinkPosition } from '@gitbook/api'; +import { useCurrentPagePath } from '../hooks'; import { TOCPageIcon } from './TOCPageIcon'; export function PageLinkItem(props: { page: ClientTOCPageLink }) { @@ -14,11 +15,19 @@ export function PageLinkItem(props: { page: ClientTOCPageLink }) { const isExternal = page.target.kind === 'url'; + const currentPagePath = useCurrentPagePath(); + const isActive = page.pathnames?.some((pathname) => pathname === currentPagePath) ?? false; + return (