diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
index 91ecdcb0b..11104ab38 100644
--- a/src/components/NavigationItems.js
+++ b/src/components/NavigationItems.js
@@ -9,7 +9,7 @@ import cx from 'classnames';
 import { BreadcrumbContext } from './BreadcrumbContext';
 import styles from './NavigationItems.module.scss';
 import { link } from '../types';
-import { useLocation } from '@reach/router';
+import { useLocation, useMatch } from '@reach/router';
 
 const iconLibrary = {
   'Collect data': 'collectData',
@@ -21,8 +21,6 @@ const iconLibrary = {
   'Try our APIs': 'tryOurAPIs',
 };
 
-const normalizeUrl = (url) => url?.replace(/\/$/, '');
-
 const getHighlightedText = (text, highlight) => {
   const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
   return (
@@ -108,8 +106,7 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
     }
   }, [hasChangedPage, isBreadCrumb]);
 
-  const isCurrentPage =
-    normalizeUrl(location.pathname) === normalizeUrl(page.url);
+  const isCurrentPage = Boolean(useMatch(page.url || '/'));
 
   const isToggleable = [
     'Component library',