diff --git a/frontend/src/old-pages/Configure/Components.tsx b/frontend/src/old-pages/Configure/Components.tsx
index 1ce97512..d5953882 100644
--- a/frontend/src/old-pages/Configure/Components.tsx
+++ b/frontend/src/old-pages/Configure/Components.tsx
@@ -46,6 +46,8 @@ import {
   Multiselect,
   MultiselectProps,
   ColumnLayout,
+  BreadcrumbGroupProps,
+  BreadcrumbGroup,
 } from '@cloudscape-design/components'
 
 // Components
@@ -59,6 +61,7 @@ import {
   InstanceType,
   InstanceTypeOption,
 } from './Components.types'
+import {useNavigate} from 'react-router-dom'
 
 // Helper Functions
 function strToOption(str: any) {
@@ -752,6 +755,26 @@ const CheckboxWithHelpPanel = ({
   )
 }
 
+export const BreadcrumbGroupNavigate = ({
+  onFollow,
+  ...props
+}: BreadcrumbGroupProps) => {
+  const navigate = useNavigate()
+
+  const handleNavigate = React.useCallback(
+    event => {
+      event.preventDefault()
+      if (onFollow) {
+        onFollow(event)
+      } else {
+        navigate(event.detail.href)
+      }
+    },
+    [navigate, onFollow],
+  )
+  return <BreadcrumbGroup {...props} onFollow={handleNavigate} />
+}
+
 export {
   SubnetSelect,
   SecurityGroups,
diff --git a/frontend/src/old-pages/Layout.tsx b/frontend/src/old-pages/Layout.tsx
index f42b9985..53f86394 100644
--- a/frontend/src/old-pages/Layout.tsx
+++ b/frontend/src/old-pages/Layout.tsx
@@ -27,9 +27,9 @@ import {
   NonCancelableEventHandler,
 } from '@cloudscape-design/components/internal/events'
 import {BreadcrumbGroupProps} from '@cloudscape-design/components/breadcrumb-group/interfaces'
-import BreadcrumbGroup from '@cloudscape-design/components/breadcrumb-group'
 import {useTranslation} from 'react-i18next'
 import map from 'lodash/map'
+import {BreadcrumbGroupNavigate} from './Configure/Components'
 
 type Slug = 'clusters' | 'images' | 'users' | 'clusterCreate' | 'clusterUpdate'
 type BreadcrumbsProps = {
@@ -79,10 +79,10 @@ export function Breadcrumbs({
   )
 
   return (
-    <BreadcrumbGroup
+    <BreadcrumbGroupNavigate
       items={items}
       ariaLabel={t('global.menu.header')}
-      onClick={onClick}
+      onFollow={onClick}
     />
   )
 }
diff --git a/frontend/src/old-pages/Logs/index.tsx b/frontend/src/old-pages/Logs/index.tsx
index 1f090774..32b5936f 100644
--- a/frontend/src/old-pages/Logs/index.tsx
+++ b/frontend/src/old-pages/Logs/index.tsx
@@ -10,7 +10,6 @@
 // limitations under the License.
 
 import {
-  BreadcrumbGroup,
   BreadcrumbGroupProps,
   ContentLayout,
   Header,
@@ -26,6 +25,7 @@ import InfoLink from '../../components/InfoLink'
 import Layout from '../Layout'
 import {LogMessagesTable} from './LogMessagesTable'
 import {LogStreamsTable} from './LogStreamsTable'
+import {BreadcrumbGroupNavigate} from '../Configure/Components'
 
 function LogsHelpPanel({clusterName}: {clusterName: string}) {
   const {t} = useTranslation()
@@ -81,7 +81,7 @@ export function Logs() {
   }, [])
 
   return (
-    <Layout breadcrumbs={<BreadcrumbGroup items={breadcrumbItems} />}>
+    <Layout breadcrumbs={<BreadcrumbGroupNavigate items={breadcrumbItems} />}>
       <ContentLayout
         header={
           <Header