created a flexible router, enabled breadcrumbs

src/assets/css/tailwind.presets.min.css

-@tailwind base;@tailwind components;@tailwind utilities/*# sourceMappingURL=tailwind.presets.min.css.map */
\ No newline at end of file
+@tailwind base;@tailwind components;@tailwind utilities;@layer base{img,svg,video,canvas,audio,iframe,embed,object{display:inline;vertical-align:middle}}/*# sourceMappingURL=tailwind.presets.min.css.map */
\ No newline at end of file

src/assets/css/tailwind.presets.min.css.map

-{"version":3,"sources":["../sass/tailwind.presets.scss"],"names":[],"mappings":"AAAA,cAAA,CACA,oBAAA,CACA","file":"tailwind.presets.min.css"}
\ No newline at end of file
+{"version":3,"sources":["../sass/tailwind.presets.scss"],"names":[],"mappings":"AAAA,cAAA,CACA,oBAAA,CACA,mBAAA,CAEA,YACE,+CAQE,cAAA,CACA,qBAAA,CAAA","file":"tailwind.presets.min.css"}
\ No newline at end of file

src/assets/sass/tailwind.presets.scss

 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: inline;
+    vertical-align: middle;
+  }
+}

src/layouts/MainLayout.jsx

 import React from 'react';
 import { Outlet } from 'react-router-dom';
 import Header from './partials/Header';
+import Subheader from './partials/subheader/Subheader';
+
 
 function MainLayout() {
   // #################################
@@ -17,7 +19,11 @@ function MainLayout() {
   return (
     <>
       <Header />
+      <Subheader />
+      <main role="main" className="relative row-start-2 col-span-full flex sm:justify-center overflow-y-auto sm:row-start-4">
         <Outlet />
+      </main>
+      <div>Navbar</div>
     </>
   );
 }

src/layouts/partials/subheader/Breadcrumbs.jsx

+import React from 'react';
+import { RiArrowDropRightLine, RiHome2Line } from 'react-icons/ri';
+import { useMatches } from 'react-router-dom';
+
+function Breadcrumbs() {
+  // #################################
+  // HOOKS
+  // #################################
+  let matches = useMatches();
+
+  // #################################
+  // FUNCTIONS
+  // #################################
+  let crumbs = matches
+    // get rid of any matches that don't have handle and crumb
+    .filter((match) => Boolean(match.handle?.crumb));
+
+  // #################################
+  // OUTPUT
+  // #################################
+  return (
+
+    <div className="h-0 overflow-hidden sm:h-6 px-4 my-2 container sm:flex justify-between">
+      <ul className="flex">
+        {
+          // map crumbs into an array of elements, passing the loader data to each one
+          // TODO: find out how to render result of .map, then move into functions-section and render ${crumbs} in here
+          crumbs.map((match, idx) =>
+            <li key={`bc-${idx}`}>
+              {/* show home icon on first item, others will display split img */}
+              {idx === 0 ? <RiHome2Line className='text-xl mr-1' /> : <RiArrowDropRightLine className='text-2xl mx-4' />}
+              {/* render handle.crumb callback */}
+              {match.handle.crumb(match.data)}
+            </li>)
+        }
+      </ul>
+    </div>
+  );
+}
+
+export default React.memo(Breadcrumbs);;
\ No newline at end of file

src/layouts/partials/subheader/Subheader.jsx

+import React from 'react';
+import Breadcrumbs from './Breadcrumbs';
+
+function Subheader() {
+  // #################################
+  // HOOKS
+  // #################################
+
+
+  // #################################
+  // FUNCTIONS
+  // #################################
+
+
+  // #################################
+  // OUTPUT
+  // #################################
+  return (
+    <div className='group flex justify-center  box-border shadow-md z-20  h-0 open:h-10 sm:h-10 transform transition-all overflow-hidden row-start-2 sm:row-start-3 col-span-full text-sm bg-UhhWhite'>
+      <div className="container flex justify-center flex-wrap">
+        <Breadcrumbs />
+      </div>
+    </div>
+  );
+}
+
+export default React.memo(Subheader);
\ No newline at end of file

src/pages/Onboarding/Onboarding.jsx

+import React from 'react';
+
+function Onboarding() {
+  // #################################
+  // HOOKS
+  // #################################
+
+  // #################################
+  // FUNCTIONS
+  // #################################
+
+  // #################################
+  // OUTPUT
+  // #################################
+  return (
+    <div>TEST Onboarding</div>
+  );
+}
+
+export default React.memo(Onboarding);
\ No newline at end of file

src/routes/Sitemap.jsx

 import MainLayout from "../layouts/MainLayout";
-import Home from "../pages/Home";
+import { loadComponent } from "./WrapRoutes";
+import { Link } from 'react-router-dom';
 
-export const sitemap = [
-  {
+export const sitemap = [{
   title: 'MenuBar', element: <MainLayout />,
   children: [
     {
-        title: 'Home', path: '/', element: <Home />
+      title: 'Home',
+      path: '/',
+      handle: { crumb: () => <Link to="/">ZBH Portal</Link> },
+      children: [
+        {
+          index: true,
+          element: loadComponent('Home', true, true)
+        },
+        // ONBOARDING
+        {
+          title: 'Onboarding',
+          path: '/onboarding',
+          element: loadComponent('Onboarding/Onboarding', true, true),
+          handle: { crumb: () => <Link to="/onboarding">Onboarding</Link> }
         }
       ]
     }
-];
\ No newline at end of file
+  ]
+}];
\ No newline at end of file

src/routes/WrapRoutes.jsx

+import { lazy, Suspense } from 'react';
+
+/**
+ * Lazily load the mentioned component which resides in the page directory
+ * This method will be used in routes so that the files are loaded only
+ * When users are on that route
+ */
+export function loadComponent(componentPath, lazyLoad, privateRoute) {
+
+  lazyLoad = typeof lazyLoad !== "undefined" ? lazyLoad : true;
+
+  // It is not possible to use a fully dynamic import statement, such as import(foo). Because foo could potentially be any path to any file in your system or project.
+  // The import() must contain at least some information about where the module is located.
+
+  const Component = lazyLoad ? lazy(() => import(/* @vite-ignore */`../pages/${componentPath}`)) : import(/* @vite-ignore */`../pages/${componentPath}`);
+
+
+
+  let element = lazyLoad ? <Suspense fallback={<span>Loading...</span>}><Component /></Suspense> : <Component />;
+
+  // Wrapping around the suspense component is mandatory
+  return element;
+}
\ No newline at end of file