diff --git a/packages/apps/dev-wallet/src/App/Layout/Layout.tsx b/packages/apps/dev-wallet/src/App/Layout/Layout.tsx
index f64b9a160c..3809e3ee0a 100644
--- a/packages/apps/dev-wallet/src/App/Layout/Layout.tsx
+++ b/packages/apps/dev-wallet/src/App/Layout/Layout.tsx
@@ -6,7 +6,6 @@ import {
 } from '@kadena/kode-icons/system';
 
 import { NetworkSelector } from '@/Components/NetworkSelector/NetworkSelector';
-import { BreadCrumbs } from '@/pages/BreadCrumbs/BreadCrumbs';
 import { Themes, useTheme } from '@kadena/kode-ui';
 import {
   SideBarFooter,
@@ -41,7 +40,6 @@ export const Layout: FC = () => {
     <>
       <SideBarLayout
         topBanner={<BetaHeader />}
-        breadcrumbs={<BreadCrumbs />}
         location={innerLocation}
         sidebar={<SideBar />}
         footer={
diff --git a/packages/apps/dev-wallet/src/Components/Breadcrumbs/Breadcrumbs.tsx b/packages/apps/dev-wallet/src/Components/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 0000000000..5dd4b241a3
--- /dev/null
+++ b/packages/apps/dev-wallet/src/Components/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,17 @@
+import { IBreadcrumbsProps } from '@kadena/kode-ui';
+import { SideBarBreadcrumbs } from '@kadena/kode-ui/patterns';
+import React, { FC } from 'react';
+import { Link } from 'react-router-dom';
+
+export const Breadcrumbs: FC<IBreadcrumbsProps> = ({ children, ...props }) => {
+  return (
+    <SideBarBreadcrumbs {...props}>
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+        return React.cloneElement(child, { ...child.props, component: Link });
+      })}
+    </SideBarBreadcrumbs>
+  );
+};
diff --git a/packages/apps/dev-wallet/src/pages/BreadCrumbs/BreadCrumbs.tsx b/packages/apps/dev-wallet/src/pages/BreadCrumbs/BreadCrumbs.tsx
deleted file mode 100644
index 234fbcf297..0000000000
--- a/packages/apps/dev-wallet/src/pages/BreadCrumbs/BreadCrumbs.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { MonoWindow } from '@kadena/kode-icons/system';
-import { BreadcrumbsItem, Breadcrumbs as BreadcrumbsUI } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
-import { FC } from 'react';
-import { Link } from 'react-router-dom';
-
-export const BreadCrumbs: FC = () => {
-  const { breadCrumbs } = useLayout();
-
-  return (
-    <BreadcrumbsUI
-      icon={breadCrumbs.length ? breadCrumbs[0].visual : <MonoWindow />}
-    >
-      <>
-        <BreadcrumbsItem component={Link} href="/">
-          Dashboard
-        </BreadcrumbsItem>
-        {breadCrumbs.map((crumb) => (
-          <BreadcrumbsItem key={crumb.url} component={Link} href={crumb.url}>
-            {crumb.label}
-          </BreadcrumbsItem>
-        ))}
-      </>
-    </BreadcrumbsUI>
-  );
-};
diff --git a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx
index 484b76544c..134c91bdfc 100644
--- a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx
+++ b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx
@@ -1,22 +1,19 @@
 import { AuthCard } from '@/Components/AuthCard/AuthCard';
+import { Breadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
 import { MonoDashboardCustomize } from '@kadena/kode-icons/system';
 import { Box, Button, Heading, Stack, Text } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { Link } from 'react-router-dom';
 
 export function BackupRecoveryPhrase() {
-  useLayout({
-    breadCrumbs: [
-      {
-        label: 'Backup',
-        visual: <MonoDashboardCustomize />,
-        url: '/backup-recovery-phrase',
-      },
-    ],
-  });
-
   return (
     <>
+      <Breadcrumbs icon={<MonoDashboardCustomize />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/backup-recovery-phrase">
+          Backup
+        </SideBarBreadcrumbsItem>
+      </Breadcrumbs>
       <AuthCard>
         <Box margin="md">
           <Heading variant="h5">Backup the recovery phrase</Heading>
diff --git a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx
index 95f1288e6f..fd8fe83809 100644
--- a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx
+++ b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx
@@ -1,26 +1,14 @@
 import { AuthCard } from '@/Components/AuthCard/AuthCard';
 import { BackupMnemonic } from '@/Components/BackupMnemonic/BackupMnemonic';
+import { Breadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { MonoDashboardCustomize } from '@kadena/kode-icons/system';
 import { Notification } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 export function WriteDownRecoveryPhrase() {
-  useLayout({
-    breadCrumbs: [
-      {
-        label: 'Backup',
-        visual: <MonoDashboardCustomize />,
-        url: '/backup-recovery-phrase',
-      },
-      {
-        label: 'Recovery phrase',
-        url: '/backup-recovery-phrase/write-down',
-      },
-    ],
-  });
   const { decryptSecret, askForPassword, profile } = useWallet();
   const [mnemonic, setMnemonic] = useState('');
   const [error, setError] = useState('');
@@ -54,6 +42,12 @@ export function WriteDownRecoveryPhrase() {
   }
   return (
     <>
+      <Breadcrumbs icon={<MonoDashboardCustomize />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/backup-recovery-phrase/write-down">
+          Recovery phrase
+        </SideBarBreadcrumbsItem>
+      </Breadcrumbs>
       {
         <AuthCard>
           <BackupMnemonic
diff --git a/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx b/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx
index 479abb3135..db08eee45e 100644
--- a/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx
+++ b/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx
@@ -1,3 +1,4 @@
+import { Breadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
 import { ConfirmDeletion } from '@/Components/ConfirmDeletion/ConfirmDeletion';
 import { ListItem } from '@/Components/ListItem/ListItem';
 import { usePrompt } from '@/Components/PromptProvider/Prompt';
@@ -20,21 +21,13 @@ import {
   Stack,
   Text,
 } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem, useLayout } from '@kadena/kode-ui/patterns';
 import { useState } from 'react';
 import { panelClass } from '../home/style.css';
 import { ContactForm } from './Components/ContactForm';
 
 export function Contacts() {
-  const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout({
-    breadCrumbs: [
-      {
-        label: 'Contacts',
-        visual: <MonoContacts />,
-        url: '/contacts',
-      },
-    ],
-  });
+  const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
   const [editContact, setEditContact] = useState<IContact>();
   const { contacts } = useWallet();
   const prompt = usePrompt();
@@ -46,6 +39,13 @@ export function Contacts() {
 
   return (
     <>
+      <Breadcrumbs icon={<MonoContacts />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/contacts">
+          Contacts
+        </SideBarBreadcrumbsItem>
+      </Breadcrumbs>
+
       <ContactForm
         input={editContact}
         onClose={closeForm}
diff --git a/packages/apps/dev-wallet/src/pages/home/home-page.tsx b/packages/apps/dev-wallet/src/pages/home/home-page.tsx
index a45333c183..368b5806c9 100644
--- a/packages/apps/dev-wallet/src/pages/home/home-page.tsx
+++ b/packages/apps/dev-wallet/src/pages/home/home-page.tsx
@@ -1,11 +1,13 @@
 import { AssetsCard } from '@/Components/AssetsCard/AssetsCard';
+import { Breadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
 import { transactionRepository } from '@/modules/transaction/transaction.repository';
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { panelClass } from '@/pages/home/style.css.ts';
 import { useAsync } from '@/utils/useAsync';
 import { IPactCommand } from '@kadena/client';
+import { MonoDashboard } from '@kadena/kode-icons/system';
 import { Box, Heading, Stack, TabItem, Tabs, Text } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { Link } from 'react-router-dom';
 import { linkClass } from '../select-profile/select-profile.css';
 import { TransactionList } from '../transactions/transactions';
@@ -13,10 +15,6 @@ import { TransactionList } from '../transactions/transactions';
 export function HomePage() {
   const { profile, activeNetwork } = useWallet();
 
-  useLayout({
-    breadCrumbs: [],
-  });
-
   const [transactions] = useAsync(
     async (profile, activeNetwork) => {
       if (profile?.uuid && activeNetwork?.uuid) {
@@ -40,28 +38,33 @@ export function HomePage() {
   );
 
   return (
-    <Box gap={'lg'}>
-      <Text>Welcome back</Text>
-      <Heading as="h1">{profile?.name} </Heading>
-      <Stack gap={'lg'} flexDirection={'column'}>
-        <AssetsCard />
-        <Stack className={panelClass} flexDirection={'column'} gap={'lg'}>
-          <Heading variant="h4">Wallet Activities</Heading>
-          <Stack>
-            <Tabs>
-              <TabItem title="Transactions">
-                <TransactionList transactions={transactions || []} />
-                <Stack paddingBlockStart={'lg'}>
-                  <Link to="/transactions" className={linkClass}>
-                    All transactions
-                  </Link>
-                </Stack>
-              </TabItem>
-              <TabItem title="Transfers">WIP: Not implemented yet</TabItem>
-            </Tabs>
+    <>
+      <Breadcrumbs icon={<MonoDashboard />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+      </Breadcrumbs>
+      <Box gap={'lg'}>
+        <Text>Welcome back</Text>
+        <Heading as="h1">{profile?.name} </Heading>
+        <Stack gap={'lg'} flexDirection={'column'}>
+          <AssetsCard />
+          <Stack className={panelClass} flexDirection={'column'} gap={'lg'}>
+            <Heading variant="h4">Wallet Activities</Heading>
+            <Stack>
+              <Tabs>
+                <TabItem title="Transactions">
+                  <TransactionList transactions={transactions || []} />
+                  <Stack paddingBlockStart={'lg'}>
+                    <Link to="/transactions" className={linkClass}>
+                      All transactions
+                    </Link>
+                  </Stack>
+                </TabItem>
+                <TabItem title="Transfers">WIP: Not implemented yet</TabItem>
+              </Tabs>
+            </Stack>
           </Stack>
         </Stack>
-      </Stack>
-    </Box>
+      </Box>
+    </>
   );
 }
diff --git a/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx b/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx
index 9a65d2bee3..45e59c5b58 100644
--- a/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx
+++ b/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx
@@ -1,49 +1,49 @@
+import { Breadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
 import { Mono123, MonoKey } from '@kadena/kode-icons/system';
 import { Heading, Stack, TabItem, Tabs, Text } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { useParams } from 'react-router-dom';
 import { Keys } from './Components/Keys';
 import { KeySets } from './Components/KeySets';
 
 export function KeysPage() {
   const { tab = 'keys' } = useParams();
-  useLayout({
-    breadCrumbs: [
-      {
-        label: 'Manage Your Keys',
-        visual: <MonoKey />,
-        url: '/key-management/keys',
-      },
-    ],
-  });
 
   return (
-    <Stack flexDirection={'column'} gap={'lg'}>
-      <Heading>Manage Your Keys</Heading>
-      <Tabs defaultSelectedKey={tab}>
-        <TabItem
-          key={'keys'}
-          title={
-            <Stack justifyContent={'center'} alignItems={'center'} gap={'md'}>
-              <MonoKey />
-              <Text>Your Keys</Text>
-            </Stack>
-          }
-        >
-          <Keys />
-        </TabItem>
-        <TabItem
-          key={'keysets'}
-          title={
-            <Stack justifyContent={'center'} alignItems={'center'} gap={'md'}>
-              <Mono123 />
-              <Text>Your Key Sets</Text>
-            </Stack>
-          }
-        >
-          <KeySets />
-        </TabItem>
-      </Tabs>
-    </Stack>
+    <>
+      <Breadcrumbs icon={<MonoKey />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/key-management/keys">
+          Manage Your Keys
+        </SideBarBreadcrumbsItem>
+      </Breadcrumbs>
+      <Stack flexDirection={'column'} gap={'lg'}>
+        <Heading>Manage Your Keys</Heading>
+        <Tabs defaultSelectedKey={tab}>
+          <TabItem
+            key={'keys'}
+            title={
+              <Stack justifyContent={'center'} alignItems={'center'} gap={'md'}>
+                <MonoKey />
+                <Text>Your Keys</Text>
+              </Stack>
+            }
+          >
+            <Keys />
+          </TabItem>
+          <TabItem
+            key={'keysets'}
+            title={
+              <Stack justifyContent={'center'} alignItems={'center'} gap={'md'}>
+                <Mono123 />
+                <Text>Your Key Sets</Text>
+              </Stack>
+            }
+          >
+            <KeySets />
+          </TabItem>
+        </Tabs>
+      </Stack>
+    </>
   );
 }
diff --git a/packages/apps/dev-wallet/src/pages/networks/networks.tsx b/packages/apps/dev-wallet/src/pages/networks/networks.tsx
index d0fd004f10..76b30c5ee0 100644
--- a/packages/apps/dev-wallet/src/pages/networks/networks.tsx
+++ b/packages/apps/dev-wallet/src/pages/networks/networks.tsx
@@ -1,9 +1,10 @@
+import { Breadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
 import { ListItem } from '@/Components/ListItem/ListItem';
 import { networkRepository } from '@/modules/network/network.repository';
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { MonoWifiTethering } from '@kadena/kode-icons/system';
 import { Button, Heading, Stack, Text } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem, useLayout } from '@kadena/kode-ui/patterns';
 import { useState } from 'react';
 import { panelClass } from '../home/style.css';
 import {
@@ -17,14 +18,16 @@ export function Networks() {
   const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
   const [selectedNetwork, setSelectedNetwork] =
     useState<INetworkWithOptionalUuid>(() => getNewNetwork());
-  useLayout({
-    breadCrumbs: [
-      { label: 'Networks', visual: <MonoWifiTethering />, url: '/networks' },
-    ],
-  });
 
   return (
     <>
+      <Breadcrumbs icon={<MonoWifiTethering />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/networks">
+          Networks
+        </SideBarBreadcrumbsItem>
+      </Breadcrumbs>
+
       <Stack margin="md" flexDirection={'column'}>
         <NetworkForm
           isOpen={isRightAsideExpanded}
diff --git a/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx b/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx
index af14025299..1b06fc78fe 100644
--- a/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx
+++ b/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx
@@ -12,13 +12,14 @@ import { useWallet } from '@/modules/wallet/wallet.hook';
 import { MonoDashboardCustomize } from '@kadena/kode-icons/system';
 import {
   Box,
+  Breadcrumbs,
   Button,
   Heading,
   Notification,
   Stack,
   Text,
 } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { execCodeParser } from '@kadena/pactjs-generator';
 import classNames from 'classnames';
 import { useMemo, useState } from 'react';
@@ -85,15 +86,6 @@ export function SignatureBuilder() {
   >([]);
   const { profile, activeNetwork, networks, setActiveNetwork } = useWallet();
   const navigate = useNavigate();
-  useLayout({
-    breadCrumbs: [
-      {
-        label: 'Sig Builder',
-        visual: <MonoDashboardCustomize />,
-        url: '/sig-builder',
-      },
-    ],
-  });
 
   const exec =
     pactCommand && pactCommand.payload && 'exec' in pactCommand.payload
@@ -149,78 +141,89 @@ export function SignatureBuilder() {
   }
 
   return (
-    <Stack flexDirection={'column'} gap={'md'}>
-      <Heading variant="h5">Paste SigData, CommandSigData, or Payload</Heading>
-      <textarea
-        value={input}
-        className={classNames(codeArea)}
-        onChange={(e) => {
-          e.preventDefault();
-          processSig(e.target.value);
-        }}
-      />
-      <Box>{schema && <Text>{`Schema: ${schema}`}</Text>}</Box>
-      <Box>
+    <>
+      <Breadcrumbs icon={<MonoDashboardCustomize />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/sig-builder">
+          Sig Builder
+        </SideBarBreadcrumbsItem>
+      </Breadcrumbs>
+
+      <Stack flexDirection={'column'} gap={'md'}>
+        <Heading variant="h5">
+          Paste SigData, CommandSigData, or Payload
+        </Heading>
+        <textarea
+          value={input}
+          className={classNames(codeArea)}
+          onChange={(e) => {
+            e.preventDefault();
+            processSig(e.target.value);
+          }}
+        />
+        <Box>{schema && <Text>{`Schema: ${schema}`}</Text>}</Box>
         <Box>
-          {['PactCommand', 'quickSignRequest'].includes(schema!) && (
-            <>
-              <Button
-                onPress={async () => {
-                  if (!unsignedTx || !profile || !activeNetwork) return;
-                  const command: IPactCommand = JSON.parse(unsignedTx.cmd);
-                  let networkUUID = activeNetwork.uuid;
-                  if (
-                    command.networkId &&
-                    activeNetwork.networkId !== command.networkId
-                  ) {
-                    const network = networks.filter(
-                      ({ networkId }) => networkId === command.networkId,
-                    );
-                    if (network.length === 0) {
-                      throw new Error('Network not found');
+          <Box>
+            {['PactCommand', 'quickSignRequest'].includes(schema!) && (
+              <>
+                <Button
+                  onPress={async () => {
+                    if (!unsignedTx || !profile || !activeNetwork) return;
+                    const command: IPactCommand = JSON.parse(unsignedTx.cmd);
+                    let networkUUID = activeNetwork.uuid;
+                    if (
+                      command.networkId &&
+                      activeNetwork.networkId !== command.networkId
+                    ) {
+                      const network = networks.filter(
+                        ({ networkId }) => networkId === command.networkId,
+                      );
+                      if (network.length === 0) {
+                        throw new Error('Network not found');
+                      }
+                      if (network.length > 1) {
+                        throw new Error('Multiple networks found');
+                      }
+                      networkUUID = network[0].uuid;
+                      // switch network
+                      setActiveNetwork(network[0]);
                     }
-                    if (network.length > 1) {
-                      throw new Error('Multiple networks found');
-                    }
-                    networkUUID = network[0].uuid;
-                    // switch network
-                    setActiveNetwork(network[0]);
-                  }
-                  const groupId = crypto.randomUUID();
+                    const groupId = crypto.randomUUID();
 
-                  // check if transaction already exists
-                  const tx =
-                    await transactionRepository.getTransactionByHashNetworkProfile(
-                      profile.uuid,
-                      networkUUID,
-                      unsignedTx.hash,
-                    );
+                    // check if transaction already exists
+                    const tx =
+                      await transactionRepository.getTransactionByHashNetworkProfile(
+                        profile.uuid,
+                        networkUUID,
+                        unsignedTx.hash,
+                      );
 
-                  if (tx) {
-                    navigate(`/transaction/${tx.groupId}`);
-                    return;
-                  }
+                    if (tx) {
+                      navigate(`/transaction/${tx.groupId}`);
+                      return;
+                    }
 
-                  await transactionService.addTransaction({
-                    transaction: unsignedTx,
-                    profileId: profile.uuid,
-                    networkUUID: networkUUID,
-                    groupId,
-                  });
-                  navigate(`/transaction/${groupId}`);
-                }}
-              >
-                Review Transaction
-              </Button>
-            </>
-          )}
-          {schema === 'signingRequest' && (
-            <Notification intent="info" role="status">
-              SigningRequest is not supported yet, We are working on it.
-            </Notification>
-          )}
+                    await transactionService.addTransaction({
+                      transaction: unsignedTx,
+                      profileId: profile.uuid,
+                      networkUUID: networkUUID,
+                      groupId,
+                    });
+                    navigate(`/transaction/${groupId}`);
+                  }}
+                >
+                  Review Transaction
+                </Button>
+              </>
+            )}
+            {schema === 'signingRequest' && (
+              <Notification intent="info" role="status">
+                SigningRequest is not supported yet, We are working on it.
+              </Notification>
+            )}
+          </Box>
         </Box>
-      </Box>
-    </Stack>
+      </Stack>
+    </>
   );
 }
diff --git a/packages/apps/dev-wallet/src/pages/terminal/terminal.tsx b/packages/apps/dev-wallet/src/pages/terminal/terminal.tsx
index 752ec0df72..eb588f156b 100644
--- a/packages/apps/dev-wallet/src/pages/terminal/terminal.tsx
+++ b/packages/apps/dev-wallet/src/pages/terminal/terminal.tsx
@@ -1,3 +1,4 @@
+import { Breadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
 import { IAccount } from '@/modules/account/account.repository';
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { KeySourceType } from '@/modules/wallet/wallet.repository';
@@ -18,7 +19,7 @@ import {
 } from '@kadena/client/fp';
 import { MonoDashboardCustomize } from '@kadena/kode-icons/system';
 import { Stack } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { execCodeParser, IParsedCode } from '@kadena/pactjs-generator';
 import { useMemo, useRef, useState } from 'react';
 import Terminal from 'react-console-emulator';
@@ -156,15 +157,6 @@ const getCommand = (
 };
 
 export function TerminalPage() {
-  useLayout({
-    breadCrumbs: [
-      {
-        label: 'Dev Console',
-        visual: <MonoDashboardCustomize />,
-        url: '/terminal',
-      },
-    ],
-  });
   const [txStep, setTxStep] = useState<
     null | 'start' | 'code' | 'data' | 'signer' | 'capability'
   >(null);
@@ -451,139 +443,148 @@ export function TerminalPage() {
   };
 
   return (
-    <Stack
-      flex={1}
-      overflow="auto"
-      height="100%"
-      flexDirection={'column'}
-      position="relative"
-    >
-      <div className={TerminalContainerClass}>
-        <Terminal
-          noNewlineParsing
-          commands={commands}
-          ref={terminalRef}
-          style={{
-            flexBasis: 'auto',
-            flexGrow: 0,
-            maxHeight: '100%',
-            minHeight: '100%',
-            overflow: 'auto',
-          }}
-          inputAreaStyle={{
-            display: 'block',
-            wordBreak: 'break-word',
-          }}
-          promptLabelStyle={{
-            overflowWrap: 'none',
-            // background: 'red',
-            minWidth: '100px',
-            display: 'block',
-          }}
-          inputStyle={{
-            padding: '0',
-          }}
-          messageStyle={{
-            whiteSpace: 'pre',
-          }}
-          errorText={txStep ? ' ' : undefined}
-          promptLabel={
-            txStep ? getStepLabel(txStep) : `chain${chainId}@${networkId}:`
-          }
-          commandCallback={(args: { rawInput: string }) => {
-            if (!txStep) return;
-            if (args.rawInput === 'exit') {
-              terminalRef.current?.pushToStdout('Command cancelled');
-              setTxStep(null);
-              return;
-            }
-            if (txStep === 'start') {
-              terminalRef.current?.pushToStdout(
-                'Complete all the following steps to create a command',
-              );
-            }
-            if (txStep === 'start') {
-              setTxStep('code');
-              return;
-            }
-            if (txStep === 'code') {
-              setCommandParts({ code: args.rawInput, data: {}, signer: [] });
-              setTxStep('data');
-              return;
+    <>
+      <Breadcrumbs icon={<MonoDashboardCustomize />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/terminal">
+          Dev Console
+        </SideBarBreadcrumbsItem>
+      </Breadcrumbs>
+
+      <Stack
+        flex={1}
+        overflow="auto"
+        height="100%"
+        flexDirection={'column'}
+        position="relative"
+      >
+        <div className={TerminalContainerClass}>
+          <Terminal
+            noNewlineParsing
+            commands={commands}
+            ref={terminalRef}
+            style={{
+              flexBasis: 'auto',
+              flexGrow: 0,
+              maxHeight: '100%',
+              minHeight: '100%',
+              overflow: 'auto',
+            }}
+            inputAreaStyle={{
+              display: 'block',
+              wordBreak: 'break-word',
+            }}
+            promptLabelStyle={{
+              overflowWrap: 'none',
+              // background: 'red',
+              minWidth: '100px',
+              display: 'block',
+            }}
+            inputStyle={{
+              padding: '0',
+            }}
+            messageStyle={{
+              whiteSpace: 'pre',
+            }}
+            errorText={txStep ? ' ' : undefined}
+            promptLabel={
+              txStep ? getStepLabel(txStep) : `chain${chainId}@${networkId}:`
             }
-            if (txStep === 'data') {
-              if (!args.rawInput) {
-                setTxStep('signer');
+            commandCallback={(args: { rawInput: string }) => {
+              if (!txStep) return;
+              if (args.rawInput === 'exit') {
+                terminalRef.current?.pushToStdout('Command cancelled');
+                setTxStep(null);
                 return;
               }
-              const [key, value] = args.rawInput.split('=');
-              if (!key || !value) {
+              if (txStep === 'start') {
                 terminalRef.current?.pushToStdout(
-                  'type data in key=value format',
+                  'Complete all the following steps to create a command',
                 );
               }
-              let val;
-              try {
-                val = JSON.parse(value);
-              } catch (e) {
-                val = value;
+              if (txStep === 'start') {
+                setTxStep('code');
+                return;
               }
-              setCommandParts(
-                (prev) =>
-                  prev && {
-                    ...prev,
-                    data: { ...prev.data, [key]: val },
-                  },
-              );
-            }
-            if (txStep === 'signer' && args.rawInput) {
-              setCommandParts(
-                (prev) =>
-                  prev && {
-                    ...prev,
-                    signer: [
-                      ...prev.signer,
-                      { publicKey: args.rawInput, clist: [] },
-                    ],
-                  },
-              );
-              setTxStep('capability');
-              return;
-            }
-            if (txStep === 'capability') {
-              if (!args.rawInput) {
-                setTxStep('signer');
+              if (txStep === 'code') {
+                setCommandParts({ code: args.rawInput, data: {}, signer: [] });
+                setTxStep('data');
                 return;
               }
-              const sections = execCodeParser(args.rawInput);
-              const clist = sections?.map(
-                (section) =>
-                  ({
-                    name: `${getSection(section.function.namespace)}${getSection(section.function.module)}${section.function.name}`,
-                    args: section.args.map(createCapArgs),
-                  }) as ICap,
-              );
-              if (clist) {
-                const lastSigner = commandParts?.signer.at(-1);
-                lastSigner?.clist.push(...clist);
-                setCommandParts((prev) => ({ ...prev }) as ICommandParts);
+              if (txStep === 'data') {
+                if (!args.rawInput) {
+                  setTxStep('signer');
+                  return;
+                }
+                const [key, value] = args.rawInput.split('=');
+                if (!key || !value) {
+                  terminalRef.current?.pushToStdout(
+                    'type data in key=value format',
+                  );
+                }
+                let val;
+                try {
+                  val = JSON.parse(value);
+                } catch (e) {
+                  val = value;
+                }
+                setCommandParts(
+                  (prev) =>
+                    prev && {
+                      ...prev,
+                      data: { ...prev.data, [key]: val },
+                    },
+                );
               }
-            }
-            if (txStep === 'signer' && !args.rawInput) {
-              const cmd = getCommand(
-                commandParts!,
-                getPublicKeyData,
-              ) as IPartialPactCommand;
-              setCommand(cmd);
-              terminalRef.current?.pushToStdout(JSON.stringify(cmd, null, 2));
-              setTxStep(null);
-              return;
-            }
-            // if (args.result || args.command === 'clear') return;
-            // // return args.join(' ');
-          }}
-        />
-      </div>
-    </Stack>
+              if (txStep === 'signer' && args.rawInput) {
+                setCommandParts(
+                  (prev) =>
+                    prev && {
+                      ...prev,
+                      signer: [
+                        ...prev.signer,
+                        { publicKey: args.rawInput, clist: [] },
+                      ],
+                    },
+                );
+                setTxStep('capability');
+                return;
+              }
+              if (txStep === 'capability') {
+                if (!args.rawInput) {
+                  setTxStep('signer');
+                  return;
+                }
+                const sections = execCodeParser(args.rawInput);
+                const clist = sections?.map(
+                  (section) =>
+                    ({
+                      name: `${getSection(section.function.namespace)}${getSection(section.function.module)}${section.function.name}`,
+                      args: section.args.map(createCapArgs),
+                    }) as ICap,
+                );
+                if (clist) {
+                  const lastSigner = commandParts?.signer.at(-1);
+                  lastSigner?.clist.push(...clist);
+                  setCommandParts((prev) => ({ ...prev }) as ICommandParts);
+                }
+              }
+              if (txStep === 'signer' && !args.rawInput) {
+                const cmd = getCommand(
+                  commandParts!,
+                  getPublicKeyData,
+                ) as IPartialPactCommand;
+                setCommand(cmd);
+                terminalRef.current?.pushToStdout(JSON.stringify(cmd, null, 2));
+                setTxStep(null);
+                return;
+              }
+              // if (args.result || args.command === 'clear') return;
+              // // return args.join(' ');
+            }}
+          />
+        </div>
+      </Stack>
+    </>
   );
 }
diff --git a/packages/apps/dev-wallet/src/pages/transaction/Transaction.tsx b/packages/apps/dev-wallet/src/pages/transaction/Transaction.tsx
index cfe0ec0203..9301247c08 100644
--- a/packages/apps/dev-wallet/src/pages/transaction/Transaction.tsx
+++ b/packages/apps/dev-wallet/src/pages/transaction/Transaction.tsx
@@ -1,7 +1,10 @@
 import { transactionRepository } from '@/modules/transaction/transaction.repository';
 
+import { Breadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
 import { useAsync } from '@/utils/useAsync';
+import { MonoSwapHoriz } from '@kadena/kode-icons/system';
 import { Heading, Stack, Text } from '@kadena/kode-ui';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { useParams } from 'react-router-dom';
 import { TxList } from './components/TxList';
 
@@ -15,21 +18,33 @@ export const TransactionPage = () => {
     [groupId],
   );
   return (
-    <Stack flexDirection={'column'} gap={'lg'}>
-      <Stack flexDirection={'column'} gap={'sm'}>
-        <Heading>Transactions</Heading>
-        {txs.length === 0 && <Text>No transactions</Text>}
-        {txs.length >= 2 && (
-          <Text>This is a group of {txs.length} Transactions</Text>
-        )}
+    <>
+      <Breadcrumbs icon={<MonoSwapHoriz />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href={`/transactions`}>
+          Transactions
+        </SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href={`/transactions/${groupId}`}>
+          Transaction Group
+        </SideBarBreadcrumbsItem>
+      </Breadcrumbs>
+
+      <Stack flexDirection={'column'} gap={'lg'}>
+        <Stack flexDirection={'column'} gap={'sm'}>
+          <Heading>Transactions</Heading>
+          {txs.length === 0 && <Text>No transactions</Text>}
+          {txs.length >= 2 && (
+            <Text>This is a group of {txs.length} Transactions</Text>
+          )}
+        </Stack>
+        <TxList
+          onDone={() => {
+            console.log('done');
+          }}
+          txIds={txs.map((tx) => tx.uuid)}
+          showExpanded={txs.length === 1}
+        />
       </Stack>
-      <TxList
-        onDone={() => {
-          console.log('done');
-        }}
-        txIds={txs.map((tx) => tx.uuid)}
-        showExpanded={txs.length === 1}
-      />
-    </Stack>
+    </>
   );
 };
diff --git a/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx b/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx
index ca911282ed..032ea3abf9 100644
--- a/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx
+++ b/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx
@@ -1,3 +1,4 @@
+import { Breadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
 import {
   ITransaction,
   transactionRepository,
@@ -7,22 +8,13 @@ import { shorten } from '@/utils/helpers';
 import { IPactCommand } from '@kadena/client';
 import { MonoOpenInNew, MonoSwapHoriz } from '@kadena/kode-icons/system';
 import { Box, Heading, Stack, Text } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { listClass, listItemClass, panelClass } from '../home/style.css';
 import { hashStyle } from './style.css';
 
 export function Transactions() {
-  useLayout({
-    breadCrumbs: [
-      {
-        label: 'Transactions',
-        visual: <MonoSwapHoriz />,
-        url: '/transactions',
-      },
-    ],
-  });
   const { profile, activeNetwork } = useWallet();
   const [transactions, setTransactions] = useState<
     (ITransaction & { creationDate: number })[]
@@ -51,10 +43,18 @@ export function Transactions() {
   }, [profile?.uuid, activeNetwork?.uuid]);
 
   return (
-    <Box className={panelClass} marginBlockStart="xs">
-      <Heading as="h4">Transactions</Heading>
-      <TransactionList transactions={transactions} />
-    </Box>
+    <>
+      <Breadcrumbs icon={<MonoSwapHoriz />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/transactions">
+          Transactions
+        </SideBarBreadcrumbsItem>
+      </Breadcrumbs>
+      <Box className={panelClass} marginBlockStart="xs">
+        <Heading as="h4">Transactions</Heading>
+        <TransactionList transactions={transactions} />
+      </Box>
+    </>
   );
 }
 
@@ -84,45 +84,47 @@ export const TransactionList = ({
     [transactions],
   );
   return (
-    <Box marginBlockStart="md">
-      {txs.length ? (
-        <ul className={listClass}>
-          {txs.map((tx) => (
-            <li key={tx.uuid}>
-              <Stack
-                justifyContent="space-between"
-                alignItems={'center'}
-                className={listItemClass}
-                gap={'lg'}
-              >
-                <Link to={`/transaction/${tx.groupId}`}>
-                  <Text>
-                    <MonoOpenInNew />
-                  </Text>
-                </Link>
-                <Text>{shorten(tx.hash)}</Text>
+    <>
+      <Box marginBlockStart="md">
+        {txs.length ? (
+          <ul className={listClass}>
+            {txs.map((tx) => (
+              <li key={tx.uuid}>
+                <Stack
+                  justifyContent="space-between"
+                  alignItems={'center'}
+                  className={listItemClass}
+                  gap={'lg'}
+                >
+                  <Link to={`/transaction/${tx.groupId}`}>
+                    <Text>
+                      <MonoOpenInNew />
+                    </Text>
+                  </Link>
+                  <Text>{shorten(tx.hash)}</Text>
 
-                <Text className={hashStyle}>
-                  <span
-                    title={tx.type === 'exec' ? tx.code : `cont: ${tx.code}`}
-                  >
-                    {tx.type === 'exec' ? tx.code : `cont: ${tx.code}`}
-                  </span>
-                </Text>
+                  <Text className={hashStyle}>
+                    <span
+                      title={tx.type === 'exec' ? tx.code : `cont: ${tx.code}`}
+                    >
+                      {tx.type === 'exec' ? tx.code : `cont: ${tx.code}`}
+                    </span>
+                  </Text>
 
-                <Text>{tx.status}</Text>
+                  <Text>{tx.status}</Text>
 
-                <Text>
-                  {new Date(
-                    ((JSON.parse(tx.cmd) as IPactCommand).meta.creationTime ||
-                      0) * 1000,
-                  ).toLocaleString()}
-                </Text>
-              </Stack>
-            </li>
-          ))}
-        </ul>
-      ) : null}
-    </Box>
+                  <Text>
+                    {new Date(
+                      ((JSON.parse(tx.cmd) as IPactCommand).meta.creationTime ||
+                        0) * 1000,
+                    ).toLocaleString()}
+                  </Text>
+                </Stack>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </Box>
+    </>
   );
 };
diff --git a/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx b/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx
index b074f1d185..c411ce3f68 100644
--- a/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx
+++ b/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx
@@ -6,12 +6,13 @@ import { MonoSwapHoriz } from '@kadena/kode-icons/system';
 import { Divider, Heading, Stack, Step, Stepper, Text } from '@kadena/kode-ui';
 import { useCallback, useEffect, useState } from 'react';
 
+import { Breadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
 import { activityRepository } from '@/modules/activity/activity.repository';
 import {
   ITransaction,
   transactionRepository,
 } from '@/modules/transaction/transaction.repository';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { ReviewTransaction } from '../transaction/components/ReviewTransaction';
 import { TxList } from '../transaction/components/TxList';
@@ -25,15 +26,6 @@ import {
 import { createRedistributionTxs, createTransactions } from './utils';
 
 export function TransferV2() {
-  useLayout({
-    breadCrumbs: [
-      {
-        label: 'Transfer',
-        visual: <MonoSwapHoriz />,
-        url: '/transfer',
-      },
-    ],
-  });
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const accountId = searchParams.get('accountId');
@@ -263,83 +255,95 @@ export function TransferV2() {
   };
 
   return (
-    <Stack flexDirection={'column'}>
-      <Stepper direction="horizontal">
-        <Step
-          icon={<MonoSwapHoriz />}
-          onClick={() => {
-            setStep('transfer');
-          }}
-          active={step === 'transfer'}
-        >
+    <>
+      <Breadcrumbs icon={<MonoSwapHoriz />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/transfer">
           Transfer
-        </Step>
-        <Step active={step === 'sign'}>Transactions</Step>
-        <Step active={step === 'result'}>Result</Step>
-      </Stepper>
-      {step === 'transfer' && (
-        <Stack justifyContent={'center'}>
-          <Stack gap={'lg'} flexDirection={'column'} style={{ width: '670px' }}>
-            <TransferForm
-              accountId={accountId}
-              activityId={urlActivityId}
-              onSubmit={async (data, redistribution) => {
-                const senderAccount = allAccounts.find(
-                  (acc) => acc.uuid === data.accountId,
-                );
-                if (!senderAccount?.keyset?.uuid) return;
-                const formData = { ...data, senderAccount };
-                const getEmpty = () => ['', []] as [string, ITransaction[]];
-                let redistributionGroup = getEmpty();
+        </SideBarBreadcrumbsItem>
+      </Breadcrumbs>
+      <Stack flexDirection={'column'}>
+        <Stepper direction="horizontal">
+          <Step
+            icon={<MonoSwapHoriz />}
+            onClick={() => {
+              setStep('transfer');
+            }}
+            active={step === 'transfer'}
+          >
+            Transfer
+          </Step>
+          <Step active={step === 'sign'}>Transactions</Step>
+          <Step active={step === 'result'}>Result</Step>
+        </Stepper>
+        {step === 'transfer' && (
+          <Stack justifyContent={'center'}>
+            <Stack
+              gap={'lg'}
+              flexDirection={'column'}
+              style={{ width: '670px' }}
+            >
+              <TransferForm
+                accountId={accountId}
+                activityId={urlActivityId}
+                onSubmit={async (data, redistribution) => {
+                  const senderAccount = allAccounts.find(
+                    (acc) => acc.uuid === data.accountId,
+                  );
+                  if (!senderAccount?.keyset?.uuid) return;
+                  const formData = { ...data, senderAccount };
+                  const getEmpty = () => ['', []] as [string, ITransaction[]];
+                  let redistributionGroup = getEmpty();
 
-                if (redistribution.length > 0) {
-                  redistributionGroup =
-                    (await createRedistribution(formData, redistribution)) ??
-                    getEmpty();
-                }
-                const txGroup =
-                  (await createTransaction(formData)) ?? getEmpty();
-                const updatedTxGroups = {
-                  redistribution: {
-                    groupId: redistributionGroup[0] ?? '',
-                    txs: redistributionGroup[1] ?? [],
-                  },
-                  transfer: {
-                    groupId: txGroup[0] ?? '',
-                    txs: txGroup[1] ?? [],
-                  },
-                };
-                setTxGroups(updatedTxGroups);
-                const activityId = crypto.randomUUID();
-                await activityRepository.addActivity({
-                  data: {
-                    transferData: data,
-                    txGroups: {
-                      transfer: {
-                        groupId: updatedTxGroups.transfer.groupId,
-                      },
-                      redistribution: {
-                        groupId: updatedTxGroups.redistribution.groupId,
+                  if (redistribution.length > 0) {
+                    redistributionGroup =
+                      (await createRedistribution(formData, redistribution)) ??
+                      getEmpty();
+                  }
+                  const txGroup =
+                    (await createTransaction(formData)) ?? getEmpty();
+                  const updatedTxGroups = {
+                    redistribution: {
+                      groupId: redistributionGroup[0] ?? '',
+                      txs: redistributionGroup[1] ?? [],
+                    },
+                    transfer: {
+                      groupId: txGroup[0] ?? '',
+                      txs: txGroup[1] ?? [],
+                    },
+                  };
+                  setTxGroups(updatedTxGroups);
+                  const activityId = crypto.randomUUID();
+                  await activityRepository.addActivity({
+                    data: {
+                      transferData: data,
+                      txGroups: {
+                        transfer: {
+                          groupId: updatedTxGroups.transfer.groupId,
+                        },
+                        redistribution: {
+                          groupId: updatedTxGroups.redistribution.groupId,
+                        },
                       },
                     },
-                  },
-                  keysetId: senderAccount.keyset?.uuid,
-                  networkUUID: activeNetwork!.uuid,
-                  profileId: profile?.uuid ?? '',
-                  status: 'Initiated',
-                  type: 'Transfer',
-                  uuid: activityId,
-                });
-                setStep('sign');
-                // then the page will stay on the sign step if refresh
-                navigate(`/transfer?activityId=${activityId}`);
-              }}
-            />
+                    keysetId: senderAccount.keyset?.uuid,
+                    networkUUID: activeNetwork!.uuid,
+                    profileId: profile?.uuid ?? '',
+                    status: 'Initiated',
+                    type: 'Transfer',
+                    uuid: activityId,
+                  });
+                  setStep('sign');
+                  // then the page will stay on the sign step if refresh
+                  navigate(`/transfer?activityId=${activityId}`);
+                }}
+              />
+            </Stack>
           </Stack>
-        </Stack>
-      )}
-      {(step === 'sign' || step === 'result' || step === 'summary') &&
-        renderSignStep()}
-    </Stack>
+        )}
+        {(step === 'sign' || step === 'result' || step === 'summary') &&
+          renderSignStep()}
+      </Stack>
+    </>
   );
 }
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
index e6fd1d4813..04b868126e 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -16,6 +16,8 @@ import {
   Button,
   Stack,
 } from './../../components';
+import { SideBarBreadcrumbs } from './components/Breadcrumbs/SideBarBreadcrumbs';
+import { SideBarBreadcrumbsItem } from './components/Breadcrumbs/SideBarBreadcrumbsItem';
 import { LayoutProvider, useLayout } from './components/LayoutProvider';
 import { KadenaLogo } from './components/Logo/KadenaLogo';
 import { KLogo } from './components/Logo/KLogo';
@@ -91,12 +93,6 @@ const InnerLayout = () => {
           topbanner
         </div>
       }
-      breadcrumbs={
-        <Breadcrumbs icon={<MonoAccountTree />}>
-          <BreadcrumbsItem href="/accounts">He-man</BreadcrumbsItem>
-          <BreadcrumbsItem href="/accounts/2">Skeletor</BreadcrumbsItem>
-        </Breadcrumbs>
-      }
       sidebar={
         <SideBar
           logo={
@@ -281,6 +277,14 @@ export const Primary: IStory = {
   render: () => {
     return (
       <LayoutProvider>
+        <SideBarBreadcrumbs icon={<MonoAccountTree />}>
+          <SideBarBreadcrumbsItem href="/accounts">
+            He-man
+          </SideBarBreadcrumbsItem>
+          <SideBarBreadcrumbsItem href="/accounts/2">
+            Skeletor
+          </SideBarBreadcrumbsItem>
+        </SideBarBreadcrumbs>
         <InnerLayout />
       </LayoutProvider>
     );
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx
index cfeb38c0ab..3f4e0bb17d 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx
@@ -17,7 +17,6 @@ export interface ISideBarLayout extends PropsWithChildren {
   topBanner?: ReactElement;
   logo?: ReactElement;
   minifiedLogo?: ReactElement;
-  breadcrumbs?: ReactElement;
   sidebar?: ReactElement;
   footer?: ReactElement;
   variant?: 'default' | 'full';
@@ -28,7 +27,6 @@ export const SideBarLayout: FC<ISideBarLayout> = ({
   topBanner,
   logo,
   minifiedLogo,
-  breadcrumbs,
   sidebar,
   footer,
   variant = 'default',
@@ -59,25 +57,24 @@ export const SideBarLayout: FC<ISideBarLayout> = ({
             },
           )}
         >
+          {topBanner && (
+            <Stack
+              style={{
+                gridArea: 'sidebarlayout-topbanner',
+                overflowY: 'hidden',
+              }}
+            >
+              {topBanner}
+            </Stack>
+          )}
+
           <SideBarHeader
-            breadcrumbs={breadcrumbs}
             hasSidebar={!!sidebar}
             logo={logo}
             minifiedLogo={minifiedLogo}
           />
           {sidebar}
-          <main className={mainClass({ variant })}>
-            {topBanner && (
-              <Stack
-                style={{
-                  gridArea: 'sidebarlayout-topbanner',
-                }}
-              >
-                {topBanner}
-              </Stack>
-            )}
-            {children}
-          </main>
+          <main className={mainClass({ variant })}>{children}</main>
           <SideBarAside location={location} hasTopBanner={!!topBanner} />
           {footer}
         </Stack>
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbs.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbs.tsx
new file mode 100644
index 0000000000..84fea359be
--- /dev/null
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbs.tsx
@@ -0,0 +1,20 @@
+import type { FC } from 'react';
+import React from 'react';
+import { createPortal } from 'react-dom';
+import type { IBreadcrumbsProps } from './../../../../components';
+import { Breadcrumbs } from './../../../../components';
+import { useLayout } from './../LayoutProvider';
+
+export const SideBarBreadcrumbs: FC<IBreadcrumbsProps> = ({
+  children,
+  ...props
+}) => {
+  const { breadcrumbsRef } = useLayout();
+
+  if (!breadcrumbsRef || React.Children.count(children) === 0) return null;
+
+  return createPortal(
+    <Breadcrumbs {...props}>{children}</Breadcrumbs>,
+    breadcrumbsRef,
+  );
+};
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbsItem.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbsItem.tsx
new file mode 100644
index 0000000000..eed0772ea6
--- /dev/null
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbsItem.tsx
@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import type { IBreadcrumbItemProps } from './../../../../components';
+import { BreadcrumbsItem } from './../../../../components';
+
+export const SideBarBreadcrumbsItem: FC<IBreadcrumbItemProps> = ({
+  children,
+  ...props
+}) => {
+  return <BreadcrumbsItem {...props}>{children}</BreadcrumbsItem>;
+};
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/index.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/index.ts
new file mode 100644
index 0000000000..2421959460
--- /dev/null
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/index.ts
@@ -0,0 +1,2 @@
+export { SideBarBreadcrumbs } from './SideBarBreadcrumbs';
+export { SideBarBreadcrumbsItem } from './SideBarBreadcrumbsItem';
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider.tsx
index f91d973185..eb47994b73 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider.tsx
@@ -1,11 +1,5 @@
 import type { FC, PropsWithChildren } from 'react';
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
+import React, { createContext, useCallback, useContext, useState } from 'react';
 import type { PressEvent } from 'react-aria';
 import type { ISideBarLayoutLocation } from '../types';
 
@@ -40,6 +34,8 @@ export interface ILayoutContext {
   setRightAsideRef: (value?: HTMLDivElement | null) => void;
   isRightAsideExpanded: boolean;
   setIsRightAsideExpanded: (value: boolean) => void;
+  breadcrumbsRef?: HTMLDivElement | null;
+  setBreadcrumbsRef: (value?: HTMLDivElement | null) => void;
 }
 export const LayoutContext = createContext<ILayoutContext>({
   isExpanded: true,
@@ -58,44 +54,16 @@ export const LayoutContext = createContext<ILayoutContext>({
   setIsRightAsideExpanded: () => {},
 });
 
-export interface IuseLayoutProps extends ILayoutContext {}
-
-export const useLayout = (
-  props?: Pick<ILayoutContext, 'appContext' | 'breadCrumbs'>,
-): IuseLayoutProps => {
-  const context = useContext(LayoutContext);
-
-  useEffect(() => {
-    if (!props) return;
-
-    if (props.appContext?.label !== context.appContext?.label) {
-      context.setAppContext(props.appContext);
-    }
-
-    //check if the content of the breadcrumbs has changed
-    const breadCrumbsHasChanged = props.breadCrumbs.reduce((acc, val, idx) => {
-      const oldVal = context.breadCrumbs[idx];
-      if (val.url !== oldVal?.url) return true;
-
-      return acc;
-    }, false);
-
-    if (
-      props.breadCrumbs.length !== context.breadCrumbs.length ||
-      breadCrumbsHasChanged
-    ) {
-      context.setBreadCrumbs(props.breadCrumbs);
-    }
-  }, [props?.appContext, props?.breadCrumbs]);
-
-  return { ...context };
-};
+export const useLayout = () => useContext(LayoutContext);
 
 export interface ILayoutProvider extends PropsWithChildren {}
 
 export const LayoutProvider: FC<ILayoutProvider> = ({ children }) => {
   const [rightAsideRef, setRightAsideRefState] =
     useState<HTMLDivElement | null>(null);
+
+  const [breadcrumbsRef, setBreadcrumbsRefState] =
+    useState<HTMLDivElement | null>(null);
   const [isRightAsideExpanded, setIsRightAsideExpanded] = useState(false);
   const [rightAsideTitle, setRightAsideTitleState] = useState<
     string | undefined
@@ -155,6 +123,10 @@ export const LayoutProvider: FC<ILayoutProvider> = ({ children }) => {
     setRightAsideRefState(value ? value : null);
   };
 
+  const setBreadcrumbsRef = (value?: HTMLDivElement | null) => {
+    setBreadcrumbsRefState(value ? value : null);
+  };
+
   const isActiveUrl = (url?: string) => {
     return !!url && url === location?.url;
   };
@@ -179,6 +151,8 @@ export const LayoutProvider: FC<ILayoutProvider> = ({ children }) => {
         setRightAsideRef,
         isRightAsideExpanded,
         setIsRightAsideExpanded: handleSetRightAsideExpanded,
+        breadcrumbsRef,
+        setBreadcrumbsRef,
       }}
     >
       {children}
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx
index f8cd37f7b9..68564ebef1 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx
@@ -1,7 +1,7 @@
 import { MonoMenu, MonoMenuOpen } from '@kadena/kode-icons/system';
 import classNames from 'classnames';
 import type { FC, PropsWithChildren, ReactElement } from 'react';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import type { PressEvent } from 'react-aria';
 import {
   headerClass,
@@ -16,13 +16,13 @@ import { useLayout } from './LayoutProvider';
 import { KLogo } from './Logo/KLogo';
 
 interface IProps extends PropsWithChildren {
-  breadcrumbs?: ReactElement;
   minifiedLogo?: ReactElement;
   hasSidebar?: boolean;
 }
 
-export const SideBarHeader: FC<IProps> = ({ breadcrumbs, minifiedLogo }) => {
-  const { isExpanded, handleToggleExpand } = useLayout();
+export const SideBarHeader: FC<IProps> = ({ minifiedLogo }) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const { isExpanded, handleToggleExpand, setBreadcrumbsRef } = useLayout();
   const handleExpand = (e: PressEvent) => {
     if (handleToggleExpand) {
       handleToggleExpand(e);
@@ -33,6 +33,11 @@ export const SideBarHeader: FC<IProps> = ({ breadcrumbs, minifiedLogo }) => {
     return minifiedLogo ? minifiedLogo : <KLogo height={40} />;
   };
 
+  useEffect(() => {
+    if (!ref.current) return;
+    setBreadcrumbsRef(ref.current);
+  }, [ref.current]);
+
   return (
     <header className={headerWrapperClass}>
       <Stack
@@ -56,7 +61,7 @@ export const SideBarHeader: FC<IProps> = ({ breadcrumbs, minifiedLogo }) => {
             />
           </Stack>
         </Media>
-        <Stack style={{ gridArea: 'header-crumbs' }}>{breadcrumbs}</Stack>
+        <Stack ref={ref} style={{ gridArea: 'header-crumbs' }}></Stack>
       </Stack>
     </header>
   );
diff --git a/packages/libs/kode-ui/src/patterns/index.ts b/packages/libs/kode-ui/src/patterns/index.ts
index beafa604ba..417e6fbb62 100644
--- a/packages/libs/kode-ui/src/patterns/index.ts
+++ b/packages/libs/kode-ui/src/patterns/index.ts
@@ -42,4 +42,9 @@ export {
   RightAsideHeader,
 } from './SideBarLayout/components/RightAside';
 
+export {
+  SideBarBreadcrumbs,
+  SideBarBreadcrumbsItem,
+} from './SideBarLayout/components/Breadcrumbs';
+
 export type { iRightAsideHeader } from './SideBarLayout/components/RightAside';