diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js index a9dc767aeb..f1d0fcb4ef 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js @@ -22,6 +22,7 @@ import styles from './styles.module.css'; function NavLink({ activeBasePath, + activeBaseRegex, to, href, label, @@ -45,10 +46,12 @@ function NavLink({ isNavLink: true, activeClassName, to: toUrl, - ...(activeBasePath + ...(activeBasePath || activeBaseRegex ? { isActive: (_match, location) => - location.pathname.startsWith(activeBaseUrl), + activeBaseRegex + ? new RegExp(activeBaseRegex).test(location.pathname) + : location.pathname.startsWith(activeBaseUrl), } : null), })} diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md index 3881e79989..547d1ab11a 100644 --- a/website/docs/theme-classic.md +++ b/website/docs/theme-classic.md @@ -146,7 +146,10 @@ module.exports = { position: 'left', // or 'right' // To apply the active class styling on all // routes starting with this path. + // This usually isn't necessary activeBasePath: 'docs', + // Alternative to activeBasePath if required. + activeBaseRegex: 'docs/(next|v8)', // Custom CSS class (for styling any item). className: '', }, @@ -158,6 +161,8 @@ module.exports = { }; ``` +React Router should automatically apply active link styling to links, but you can use `activeBasePath` in edge cases. For cases in which a link should be active on several different paths (such as when you have multiple doc folders under the same sidebar), you can use `activeBaseRegex`. `activeBaseRegex` is a more flexible alternative to `activeBasePath` and takes precedence over it -- Docusaurus parses it into a regular expression that is tested against the current URL. + Outbound (external) links automatically get `target="_blank" rel="noopener noreferrer"` attributes. ### Navbar Dropdown