chore: breadcrumbs ui component (#2458)

* chore: swap breadcrumbs component with plane/ui component

* chore: breadcrumb refactor

packages/ui/src/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+
+// icons
+import { MoveLeft } from "lucide-react";
+
+type BreadcrumbsProps = {
+  onBack: () => void;
+  children: any;
+};
+
+const Breadcrumbs = ({ onBack, children }: BreadcrumbsProps) => (
+  <>
+    <div className="flex w-full flex-grow items-center overflow-hidden overflow-ellipsis whitespace-nowrap">
+      <button
+        type="button"
+        className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-200 text-center text-sm hover:bg-custom-sidebar-background-90"
+        onClick={onBack}
+      >
+        <MoveLeft className="h-4 w-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100" />
+      </button>
+      {children}
+    </div>
+  </>
+);
+
+type BreadcrumbItemProps = {
+  title?: string;
+  link?: JSX.Element;
+  icon?: any;
+  unshrinkTitle?: boolean;
+};
+
+const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
+  title,
+  link,
+  icon,
+  unshrinkTitle = false,
+}) => (
+  <>
+    {link ? (
+      link
+    ) : (
+      <div
+        className={`truncate px-3 text-sm ${
+          unshrinkTitle ? "flex-shrink-0" : ""
+        }`}
+      >
+        <p className={`truncate ${icon ? "flex items-center gap-2" : ""}`}>
+          {icon}
+          <span className="break-words">{title}</span>
+        </p>
+      </div>
+    )}
+  </>
+);
+
+Breadcrumbs.BreadcrumbItem = BreadcrumbItem;
+
+export { Breadcrumbs, BreadcrumbItem };

packages/ui/src/breadcrumbs/index.tsx

@@ -0,0 +1 @@
+export * from "./breadcrumbs";

packages/ui/src/index.tsx

@@ -5,3 +5,4 @@ export * from "./spinners";
 export * from "./loader";
 export * from "./tooltip";
 export * from "./icons";
+export * from "./breadcrumbs";

web/components/headers/cycles.tsx

@@ -1,10 +1,10 @@
-import { FC } from "react";
+import * as React from "react";
+
 import { useRouter } from "next/router";
+import Link from "next/link";
 import { ArrowLeft, Plus } from "lucide-react";
-// components
-import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // ui
-import { Button } from "@plane/ui";
+import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui";
 // helpers
 import { truncateText } from "helpers/string.helper";
 
@@ -12,7 +12,7 @@ export interface ICyclesHeader {
   name: string | undefined;
 }
 
-export const CyclesHeader: FC<ICyclesHeader> = (props) => {
+export const CyclesHeader: React.FC<ICyclesHeader> = (props) => {
   const { name } = props;
   // router
   const router = useRouter();
@@ -20,9 +20,9 @@ export const CyclesHeader: FC<ICyclesHeader> = (props) => {
 
   return (
     <div
-      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+      className={`relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
     >
-      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div className="block md:hidden">
           <button
             type="button"
@@ -33,8 +33,16 @@ export const CyclesHeader: FC<ICyclesHeader> = (props) => {
           </button>
         </div>
         <div>
-          <Breadcrumbs>
+          <Breadcrumbs onBack={() => router.back()}>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+            <BreadcrumbItem
+              link={
+                <Link href={`/${workspaceSlug}/projects`}>
+                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                    <p>Projects</p>
+                  </a>
+                </Link>
+              }
+            />
             <BreadcrumbItem title={`${truncateText(name ?? "Project", 32)} Cycles`} />
           </Breadcrumbs>
         </div>

web/components/headers/modules.tsx

@@ -1,10 +1,10 @@
 import { Dispatch, FC, SetStateAction } from "react";
 import { useRouter } from "next/router";
+import Link from "next/link";
 import { ArrowLeft, Plus } from "lucide-react";
 // components
-import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // ui
-import { Button, Tooltip } from "@plane/ui";
+import { Breadcrumbs, BreadcrumbItem, Button, Tooltip } from "@plane/ui";
 import { Icon } from "components/ui";
 // helper
 import { replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
@@ -34,9 +34,9 @@ export const ModulesHeader: FC<IModulesHeader> = (props) => {
 
   return (
     <div
-      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+      className={`relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
     >
-      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div className="block md:hidden">
           <button
             type="button"
@@ -47,9 +47,17 @@ export const ModulesHeader: FC<IModulesHeader> = (props) => {
           </button>
         </div>
         <div>
-          <Breadcrumbs>
+          <Breadcrumbs onBack={() => router.back()}>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+            <BreadcrumbItem
-            <BreadcrumbItem title={`${truncateText(name ?? "Project", 32)} Cycles`} />
+              link={
+                <Link href={`/${workspaceSlug}/projects`}>
+                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                    <p>Projects</p>
+                  </a>
+                </Link>
+              }
+            />
+            <BreadcrumbItem title={`${truncateText(name ?? "Project", 32)} Modules`} />
           </Breadcrumbs>
         </div>
       </div>
@@ -62,7 +70,7 @@ export const ModulesHeader: FC<IModulesHeader> = (props) => {
           >
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
                 modulesView === option.type ? "bg-custom-sidebar-background-80" : "text-custom-sidebar-text-200"
               }`}
               onClick={() => setModulesView(option.type)}

web/components/headers/profile-preferences.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { ArrowLeft } from "lucide-react";
 // components
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 
 export const ProfilePreferencesHeader = () => {
   const router = useRouter();
@@ -21,7 +21,7 @@ export const ProfilePreferencesHeader = () => {
           </button>
         </div>
         <div>
-          <Breadcrumbs>
+          <Breadcrumbs onBack={() => router.back()}>
             <BreadcrumbItem title="My Profile Preferences" />
           </Breadcrumbs>
         </div>

web/components/headers/project-issues.tsx

@@ -9,8 +9,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { ProjectAnalyticsModal } from "components/analytics";
 // ui
-import { Button } from "@plane/ui";
+import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui";
-import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
 // constants
@@ -115,8 +114,16 @@ export const ProjectIssuesHeader: FC = observer(() => {
             </button>
           </div>
           <div>
-            <Breadcrumbs>
+            <Breadcrumbs onBack={() => router.back()}>
-              <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+              <BreadcrumbItem
+                link={
+                  <Link href={`/${workspaceSlug}/projects`}>
+                    <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                      <p>Projects</p>
+                    </a>
+                  </Link>
+                }
+              />
               <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Issues`} />
             </Breadcrumbs>
           </div>

web/components/headers/project-views.tsx

@@ -1,11 +1,11 @@
 import { FC, useState } from "react";
 import { useRouter } from "next/router";
 // icons
-import { ArrowLeft, Plus } from "lucide-react";
+import { ArrowLeft, Link, Plus } from "lucide-react";
 // components
 import { CreateUpdateProjectViewModal } from "components/views";
 // components
-import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
+import { Breadcrumbs, BreadcrumbItem } from "@plane/ui";
 // ui
 import { PrimaryButton } from "components/ui";
 // helpers
@@ -40,8 +40,16 @@ export const ProjectViewsHeader: FC<IProjectViewsHeader> = (props) => {
             </button>
           </div>
           <div>
-            <Breadcrumbs>
+            <Breadcrumbs onBack={() => router.back()}>
-              <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+              <BreadcrumbItem
+                link={
+                  <Link href={`/${workspaceSlug}/projects`}>
+                    <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                      <p>Projects</p>
+                    </a>
+                  </Link>
+                }
+              />
               <BreadcrumbItem title={`${truncateText(title ?? "Project", 32)} Cycles`} />
             </Breadcrumbs>
           </div>

web/components/headers/projects.tsx

@@ -1,8 +1,7 @@
 import { useRouter } from "next/router";
 import { ArrowLeft, Search, Plus } from "lucide-react";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs, Button } from "@plane/ui";
-import { Button } from "@plane/ui";
 // helper
 import { truncateText } from "helpers/string.helper";
 // hooks
@@ -30,7 +29,7 @@ export const ProjectsHeader = observer(() => {
           </button>
         </div>
         <div>
-          <Breadcrumbs>
+          <Breadcrumbs onBack={() => router.back()}>
             <BreadcrumbItem
               title={`${truncateText(currentWorkspace?.name ?? "Workspace", 32)} Projects`}
               unshrinkTitle={false}

web/components/headers/workspace-analytics.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { ArrowLeft } from "lucide-react";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 
 export const WorkspaceAnalyticsHeader = () => {
   const router = useRouter();
@@ -22,7 +22,7 @@ export const WorkspaceAnalyticsHeader = () => {
             </button>
           </div>
           <div>
-            <Breadcrumbs>
+            <Breadcrumbs onBack={() => router.back()}>
               <BreadcrumbItem title="Workspace Analytics" />
             </Breadcrumbs>
           </div>

web/layouts/profile-layout.tsx

@@ -1,3 +1,4 @@
+import { useRouter } from "next/router";
 // hooks
 import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
 // layouts
@@ -5,24 +6,27 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
 import { ProfileNavbar, ProfileSidebar } from "components/profile";
 // ui
-import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
+import { Breadcrumbs, BreadcrumbItem } from "@plane/ui";
 
 type Props = {
   children: React.ReactNode;
   className?: string;
 };
 
-export const ProfileAuthWrapper = (props: Props) => (
+export const ProfileAuthWrapper = (props: Props) => {
-  <WorkspaceAuthorizationLayout
+  const router = useRouter();
-    breadcrumbs={
+  return (
-      <Breadcrumbs>
+    <WorkspaceAuthorizationLayout
-        <BreadcrumbItem title="User Profile" />
+      breadcrumbs={
-      </Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
-    }
+          <BreadcrumbItem title="User Profile" />
-  >
+        </Breadcrumbs>
-    <ProfileLayout {...props} />
+      }
-  </WorkspaceAuthorizationLayout>
+    >
-);
+      <ProfileLayout {...props} />
+    </WorkspaceAuthorizationLayout>
+  );
+};
 
 const ProfileLayout: React.FC<Props> = ({ children, className }) => {
   const { memberRole } = useWorkspaceMyMembership();

web/pages/[workspaceSlug]/me/my-issues.tsx

@@ -11,8 +11,7 @@ import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
 // components
 import { MyIssuesView, MyIssuesViewOptions } from "components/issues";
 // ui
-import { Button } from "@plane/ui";
+import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui";
-import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // types
 import type { NextPage } from "next";
 import useUser from "hooks/use-user";
@@ -78,7 +77,7 @@ const MyIssuesPage: NextPage = () => {
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem title="My Issues" />
         </Breadcrumbs>
       }

web/pages/[workspaceSlug]/me/profile/activity.tsx

@@ -11,8 +11,7 @@ import { RichReadOnlyEditor } from "@plane/rich-text-editor";
 // icons
 import { History, MessageSquare } from "lucide-react";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs, ExternalLinkIcon, Loader } from "@plane/ui";
-import { ExternalLinkIcon, Loader } from "@plane/ui";
 // fetch-keys
 import { USER_ACTIVITY } from "constants/fetch-keys";
 // helper
@@ -33,7 +32,7 @@ const ProfileActivity = () => {
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem title="My Profile Activity" />
         </Breadcrumbs>
       }

web/pages/[workspaceSlug]/me/profile/index.tsx

@@ -14,9 +14,8 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 import { ImagePickerPopover, ImageUploadModal } from "components/core";
 import { SettingsSidebar } from "components/project";
 // ui
-import { Button, Input, Spinner } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, Button, Input, Spinner } from "@plane/ui";
 import { CustomSearchSelect, CustomSelect } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { User2, UserCircle2 } from "lucide-react";
 // types
@@ -147,7 +146,7 @@ const Profile: NextPage = () => {
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem title="My Profile" />
         </Breadcrumbs>
       }

web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import useSWR, { mutate } from "swr";
 
@@ -16,8 +17,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
 // ui
-import { Breadcrumbs } from "components/breadcrumbs";
+import { ArchiveIcon, Breadcrumbs, Loader } from "@plane/ui";
-import { ArchiveIcon, Loader } from "@plane/ui";
 // icons
 import { History } from "lucide-react";
 // types
@@ -145,11 +145,18 @@ const ArchivedIssueDetailsPage: NextPage = () => {
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <Breadcrumbs.BreadcrumbItem
-            title={`${truncateText(issueDetails?.project_detail.name ?? "Project", 32)} Issues`}
+            link={
-            link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
+              <Link href={`/${workspaceSlug}/projects/${projectId as string}/issues`}>
-            linkTruncate
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p className="truncate">{`${truncateText(
+                    issueDetails?.project_detail.name ?? "Project",
+                    32
+                  )} Issues`}</p>
+                </a>
+              </Link>
+            }
           />
           <Breadcrumbs.BreadcrumbItem
             title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${

web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx

@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import useSWR from "swr";
 
@@ -13,10 +14,9 @@ import { truncateText } from "helpers/string.helper";
 // components
 import { IssuesFilterView, IssuesView } from "components/core";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { ArchiveIcon, BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 // icons
 import { X } from "lucide-react";
-import { ArchiveIcon } from "@plane/ui";
 // types
 import type { NextPage } from "next";
 // fetch-keys
@@ -38,8 +38,16 @@ const ProjectArchivedIssues: NextPage = () => {
     <IssueViewContextProvider>
       <ProjectAuthorizationWrapper
         breadcrumbs={
-          <Breadcrumbs>
+          <Breadcrumbs onBack={() => router.back()}>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+            <BreadcrumbItem
+              link={
+                <Link href={`/${workspaceSlug}/projects`}>
+                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                    <p>Projects</p>
+                  </a>
+                </Link>
+              }
+            />
             <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Archived Issues`} />
           </Breadcrumbs>
         }

web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
+import Link from "next/link";
 import useSWR from "swr";
 // icons
-import { ContrastIcon } from "@plane/ui";
 import { ArrowLeft } from "lucide-react";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
@@ -19,9 +19,9 @@ import { CycleService } from "services/cycle.service";
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
+import { BreadcrumbItem, Breadcrumbs, ContrastIcon } from "@plane/ui";
 import { CustomMenu } from "components/ui";
 import { EmptyState } from "components/common";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // images
 import emptyCycle from "public/empty-state/cycle.svg";
 // helpers
@@ -97,11 +97,18 @@ const SingleCycle: React.FC = () => {
       />
       <ProjectAuthorizationWrapper
         breadcrumbs={
-          <Breadcrumbs>
+          <Breadcrumbs onBack={() => router.back()}>
-            <BreadcrumbItem
+            <Breadcrumbs.BreadcrumbItem
-              title={`${truncateText(cycleDetails?.project_detail.name ?? "Project", 32)} Cycles`}
+              link={
-              link={`/${workspaceSlug}/projects/${projectId}/cycles`}
+                <Link href={`/${workspaceSlug}/projects/${projectId}/cycles`}>
-              linkTruncate
+                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                    <p className="truncate">{`${truncateText(
+                      cycleDetails?.project_detail.name ?? "Project",
+                      32
+                    )} Cycles`}</p>
+                  </a>
+                </Link>
+              }
             />
           </Breadcrumbs>
         }

web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx

@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import useSWR from "swr";
 
@@ -13,7 +14,7 @@ import { truncateText } from "helpers/string.helper";
 // components
 import { IssuesFilterView, IssuesView } from "components/core";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 // icons
 import { X, PenSquare } from "lucide-react";
 // types
@@ -37,8 +38,16 @@ const ProjectDraftIssues: NextPage = () => {
     <IssueViewContextProvider>
       <ProjectAuthorizationWrapper
         breadcrumbs={
-          <Breadcrumbs>
+          <Breadcrumbs onBack={() => router.back()}>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+            <BreadcrumbItem
+              link={
+                <Link href={`/${workspaceSlug}/projects`}>
+                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                    <p>Projects</p>
+                  </a>
+                </Link>
+              }
+            />
             <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Draft Issues`} />
           </Breadcrumbs>
         }

web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx

@@ -1,4 +1,6 @@
 import { useRouter } from "next/router";
+import Link from "next/link";
+
 import { NextPage } from "next";
 import useSWR from "swr";
 // hooks
@@ -11,7 +13,7 @@ import { ProjectInboxHeader } from "components/headers";
 // helper
 import { truncateText } from "helpers/string.helper";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 
 const ProjectInbox: NextPage = () => {
   const router = useRouter();
@@ -37,8 +39,16 @@ const ProjectInbox: NextPage = () => {
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
-          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+          <BreadcrumbItem
+            link={
+              <Link href={`/${workspaceSlug}/projects`}>
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p>Projects</p>
+                </a>
+              </Link>
+            }
+          />
           <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "", 32)} Inbox`} />
         </Breadcrumbs>
       }

web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect } from "react";
 
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import useSWR, { mutate } from "swr";
 
@@ -16,8 +17,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
 // ui
 import { EmptyState } from "components/common";
-import { Breadcrumbs } from "components/breadcrumbs";
+import { Breadcrumbs, Loader } from "@plane/ui";
-import { Loader } from "@plane/ui";
 // images
 import emptyIssue from "public/empty-state/issue.svg";
 // types
@@ -120,11 +120,18 @@ const IssueDetailsPage: NextPage = () => {
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <Breadcrumbs.BreadcrumbItem
-            title={`${truncateText(issueDetails?.project_detail.name ?? "Project", 32)} Issues`}
+            link={
-            link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
+              <Link href={`/${workspaceSlug}/projects/${projectId as string}/issues`}>
-            linkTruncate
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p className="truncate">{`${truncateText(
+                    issueDetails?.project_detail.name ?? "Project",
+                    32
+                  )} Issues`}</p>
+                </a>
+              </Link>
+            }
           />
           <Breadcrumbs.BreadcrumbItem
             title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${

web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx

@@ -1,8 +1,7 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
+import Link from "next/link";
 import useSWR from "swr";
-// icons
-import { DiceIcon } from "@plane/ui";
 // services
 import { ModuleService } from "services/module.service";
 // hooks
@@ -16,9 +15,9 @@ import { ModuleDetailsSidebar } from "components/modules";
 import { ModuleLayoutRoot } from "components/issues";
 import { ModuleIssuesHeader } from "components/headers";
 // ui
+import { BreadcrumbItem, Breadcrumbs, DiceIcon } from "@plane/ui";
 import { CustomMenu } from "components/ui";
 import { EmptyState } from "components/common";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // images
 import emptyModule from "public/empty-state/module.svg";
 // helpers
@@ -93,11 +92,18 @@ const SingleModule: React.FC = () => {
       />
       <ProjectAuthorizationWrapper
         breadcrumbs={
-          <Breadcrumbs>
+          <Breadcrumbs onBack={() => router.back()}>
             <BreadcrumbItem
-              title={`${truncateText(moduleDetails?.project_detail.name ?? "Project", 32)} Modules`}
+              link={
-              link={`/${workspaceSlug}/projects/${projectId}/modules`}
+                <Link href={`/${workspaceSlug}/projects/${projectId}/modules`}>
-              linkTruncate
+                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                    <p className="truncate">{`${truncateText(
+                      moduleDetails?.project_detail.name ?? "Project",
+                      32
+                    )} Modules`}</p>
+                  </a>
+                </Link>
+              }
             />
           </Breadcrumbs>
         }

web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import Link from "next/link";
 
 import { useRouter } from "next/router";
 
@@ -27,10 +28,9 @@ import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
 import { CreateLabelModal } from "components/labels";
 import { CreateBlock } from "components/pages/create-block";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import { CustomSearchSelect } from "components/ui";
 import { EmptyState } from "components/common";
-import { TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // images
 import emptyPage from "public/empty-state/page.svg";
 // icons
@@ -306,8 +306,16 @@ const SinglePage: NextPage = () => {
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
-          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+          <BreadcrumbItem
+            link={
+              <Link href={`/${workspaceSlug}/projects`}>
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p>Projects</p>
+                </a>
+              </Link>
+            }
+          />
           <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Pages`} />
         </Breadcrumbs>
       }

web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx

@@ -1,4 +1,5 @@
 import { useState, Fragment } from "react";
+import Link from "next/link";
 
 import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
@@ -19,8 +20,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "components/pages";
 // ui
-import { Button } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, Button } from "@plane/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
 import { TPageViewProps } from "types";
 import type { NextPage } from "next";
@@ -94,8 +94,16 @@ const ProjectPages: NextPage = () => {
       />
       <ProjectAuthorizationWrapper
         breadcrumbs={
-          <Breadcrumbs>
+          <Breadcrumbs onBack={() => router.back()}>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+            <BreadcrumbItem
+              link={
+                <Link href={`/${workspaceSlug}/projects`}>
+                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                    <p>Projects</p>
+                  </a>
+                </Link>
+              }
+            />
             <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Pages`} />
           </Breadcrumbs>
         }

web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import useSWR, { mutate } from "swr";
 
@@ -16,7 +17,7 @@ import useToast from "hooks/use-toast";
 import { AutoArchiveAutomation, AutoCloseAutomation } from "components/automation";
 import { SettingsSidebar } from "components/project";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 // types
 import type { NextPage } from "next";
 import { IProject } from "types";
@@ -76,11 +77,15 @@ const AutomationsSettings: NextPage = () => {
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem
-            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
+            link={
-            link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+              <Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
-            linkTruncate
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
+                </a>
+              </Link>
+            }
           />
           <BreadcrumbItem title="Automations Settings" unshrinkTitle />
         </Breadcrumbs>

web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
+import Link from "next/link";
 import useSWR, { mutate } from "swr";
 // services
 import { ProjectService, ProjectEstimateService } from "services/project";
@@ -14,9 +15,8 @@ import { SettingsSidebar } from "components/project";
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
-import { Button, Loader } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui";
 import { EmptyState } from "components/common";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { Plus } from "lucide-react";
 // images
@@ -112,11 +112,15 @@ const EstimatesSettings: NextPage = () => {
       />
       <ProjectAuthorizationWrapper
         breadcrumbs={
-          <Breadcrumbs>
+          <Breadcrumbs onBack={() => router.back()}>
             <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
+              link={
-              link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+                <Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
-              linkTruncate
+                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                    <p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
+                  </a>
+                </Link>
+              }
             />
             <BreadcrumbItem title="Estimates Settings" unshrinkTitle />
           </Breadcrumbs>

web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { useRouter } from "next/router";
+import Link from "next/link";
+
 import useSWR, { mutate } from "swr";
 // services
 import { ProjectService } from "services/project";
@@ -12,8 +14,7 @@ import useUserAuth from "hooks/use-user-auth";
 // components
 import { SettingsSidebar } from "components/project";
 // ui
-import { ContrastIcon, DiceIcon, ToggleSwitch } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, ContrastIcon, DiceIcon, ToggleSwitch } from "@plane/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { FileText, Inbox, Layers } from "lucide-react";
 // types
@@ -140,11 +141,15 @@ const FeaturesSettings: NextPage = () => {
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem
-            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
+            link={
-            link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+              <Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
-            linkTruncate
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
+                </a>
+              </Link>
+            }
           />
           <BreadcrumbItem title="Features Settings" unshrinkTitle />
         </Breadcrumbs>

web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx

@@ -1,5 +1,7 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
+import Link from "next/link";
+
 import useSWR from "swr";
 import { Disclosure, Transition } from "@headlessui/react";
 // layouts
@@ -8,8 +10,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 import { ProjectService } from "services/project";
 // components
 import { DeleteProjectModal, ProjectDetailsForm, ProjectDetailsFormLoader, SettingsSidebar } from "components/project";
-import { Button, Loader } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import { ChevronDown, ChevronUp } from "lucide-react";
 // helpers
 import { truncateText } from "helpers/string.helper";
@@ -58,11 +59,15 @@ const GeneralSettings: NextPage = observer(() => {
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem
-            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
+            link={
-            link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+              <Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
-            linkTruncate
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
+                </a>
+              </Link>
+            }
           />
           <BreadcrumbItem title="General Settings" unshrinkTitle />
         </Breadcrumbs>

web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import useSWR from "swr";
 
@@ -13,8 +14,7 @@ import { ProjectService } from "services/project";
 import { SettingsSidebar, SingleIntegration } from "components/project";
 // ui
 import { EmptyState } from "components/common";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs, Loader } from "@plane/ui";
-import { Loader } from "@plane/ui";
 // images
 import emptyIntegration from "public/empty-state/integration.svg";
 // types
@@ -55,11 +55,15 @@ const ProjectIntegrations: NextPage = () => {
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem
-            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
+            link={
-            link={`/${workspaceSlug}/projects/${projectId}/issues`}
+              <Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
-            linkTruncate
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
+                </a>
+              </Link>
+            }
           />
           <BreadcrumbItem title="Integrations Settings" unshrinkTitle />
         </Breadcrumbs>

web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef } from "react";
 
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import useSWR from "swr";
 
@@ -21,9 +22,8 @@ import {
 } from "components/labels";
 import { SettingsSidebar } from "components/project";
 // ui
-import { Button, Loader } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui";
 import { EmptyState } from "components/common";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // images
 import emptyLabel from "public/empty-state/label.svg";
 // types
@@ -104,11 +104,15 @@ const LabelsSettings: NextPage = () => {
       />
       <ProjectAuthorizationWrapper
         breadcrumbs={
-          <Breadcrumbs>
+          <Breadcrumbs onBack={() => router.back()}>
             <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
+              link={
-              link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+                <Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
-              linkTruncate
+                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                    <p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
+                  </a>
+                </Link>
+              }
             />
             <BreadcrumbItem title="Labels Settings" unshrinkTitle />
           </Breadcrumbs>

web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx

@@ -18,9 +18,8 @@ import ConfirmProjectMemberRemove from "components/project/confirm-project-membe
 import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
 import { MemberSelect, SettingsSidebar } from "components/project";
 // ui
-import { Button, Loader } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui";
 import { CustomMenu, CustomSelect } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { ChevronDown, X } from "lucide-react";
 // types
@@ -201,11 +200,15 @@ const MembersSettings: NextPage = () => {
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem
-            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
+            link={
-            link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+              <Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
-            linkTruncate
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
+                </a>
+              </Link>
+            }
           />
           <BreadcrumbItem title="Members Settings" unshrinkTitle />
         </Breadcrumbs>

web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import useSWR from "swr";
 
@@ -15,8 +16,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 import { CreateUpdateStateInline, DeleteStateModal, SingleState, StateGroup } from "components/states";
 import { SettingsSidebar } from "components/project";
 // ui
-import { Loader } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, Loader } from "@plane/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { Plus } from "lucide-react";
 // helpers
@@ -61,11 +61,15 @@ const StatesSettings: NextPage = () => {
       />
       <ProjectAuthorizationWrapper
         breadcrumbs={
-          <Breadcrumbs>
+          <Breadcrumbs onBack={() => router.back()}>
             <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
+              link={
-              link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+                <Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
-              linkTruncate
+                  <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                    <p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
+                  </a>
+                </Link>
+              }
             />
             <BreadcrumbItem title="States Settings" unshrinkTitle />
           </Breadcrumbs>

web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx

@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import useSWR from "swr";
 
@@ -10,11 +11,10 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { ProjectViewLayoutRoot } from "components/issues";
 // ui
+import { BreadcrumbItem, Breadcrumbs, PhotoFilterIcon } from "@plane/ui";
 import { CustomMenu } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import { EmptyState } from "components/common";
 // icons
-import { PhotoFilterIcon } from "@plane/ui";
 // images
 import emptyView from "public/empty-state/view.svg";
 // helpers
@@ -51,10 +51,15 @@ const SingleView: React.FC = () => {
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem
-            title={`${activeProject?.name ?? "Project"} Views`}
+            link={
-            link={`/${workspaceSlug}/projects/${activeProject?.id}/cycles`}
+              <Link href={`/${workspaceSlug}/projects/${activeProject?.id}/cycles`}>
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p className="truncate">{`${activeProject?.name ?? "Project"} Views`}</p>
+                </a>
+              </Link>
+            }
           />
         </Breadcrumbs>
       }

web/pages/[workspaceSlug]/settings/billing.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import useSWR from "swr";
 
@@ -11,8 +12,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // component
 import { SettingsSidebar } from "components/project";
 // ui
-import { Button } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, Button } from "@plane/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
 import type { NextPage } from "next";
 // fetch-keys
@@ -24,9 +24,8 @@ import { truncateText } from "helpers/string.helper";
 const workspaceService = new WorkspaceService();
 
 const BillingSettings: NextPage = () => {
-  const {
+  const router = useRouter();
-    query: { workspaceSlug },
+  const { workspaceSlug } = router.query;
-  } = useRouter();
 
   const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () =>
     workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null
@@ -35,11 +34,15 @@ const BillingSettings: NextPage = () => {
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
+            link={
-            link={`/${workspaceSlug}`}
+              <Link href={`/${workspaceSlug}`}>
-            linkTruncate
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p className="truncate">{`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}</p>
+                </a>
+              </Link>
+            }
           />
           <BreadcrumbItem title="Billing & Plans Settings" unshrinkTitle />
         </Breadcrumbs>

web/pages/[workspaceSlug]/settings/exports.tsx

@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import useSWR from "swr";
 
@@ -10,7 +11,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 import ExportGuide from "components/exporter/guide";
 import { SettingsSidebar } from "components/project";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 // types
 import type { NextPage } from "next";
 // fetch-keys
@@ -32,11 +33,15 @@ const ImportExport: NextPage = () => {
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
+            link={
-            link={`/${workspaceSlug}`}
+              <Link href={`/${workspaceSlug}`}>
-            linkTruncate
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p className="truncate">{`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}</p>
+                </a>
+              </Link>
+            }
           />
           <BreadcrumbItem title="Export Settings" unshrinkTitle />
         </Breadcrumbs>

web/pages/[workspaceSlug]/settings/imports.tsx

@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import useSWR from "swr";
 
@@ -10,7 +11,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 import IntegrationGuide from "components/integration/guide";
 import { SettingsSidebar } from "components/project";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
 // types
 import type { NextPage } from "next";
 // fetch-keys
@@ -32,11 +33,15 @@ const ImportExport: NextPage = () => {
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
+            link={
-            link={`/${workspaceSlug}`}
+              <Link href={`/${workspaceSlug}`}>
-            linkTruncate
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p className="truncate">{`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}</p>
+                </a>
+              </Link>
+            }
           />
           <BreadcrumbItem title="Import/ Export Settings" unshrinkTitle />
         </Breadcrumbs>

web/pages/[workspaceSlug]/settings/index.tsx

@@ -21,8 +21,7 @@ import { SettingsSidebar } from "components/project";
 // ui
 import { Disclosure, Transition } from "@headlessui/react";
 import { CustomSelect } from "components/ui";
-import { Button, Input, Spinner } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, Button, Input, Spinner } from "@plane/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { ChevronDown, ChevronUp, Pencil } from "lucide-react";
 // helpers
@@ -159,7 +158,7 @@ const WorkspaceSettings: NextPage = () => {
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)} Settings`} />
         </Breadcrumbs>
       }

web/pages/[workspaceSlug]/settings/integrations.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import useSWR from "swr";
 
@@ -14,8 +15,7 @@ import { SingleIntegrationCard } from "components/integration";
 import { SettingsSidebar } from "components/project";
 // ui
 import { IntegrationAndImportExportBanner } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs, Loader } from "@plane/ui";
-import { Loader } from "@plane/ui";
 // types
 import type { NextPage } from "next";
 // fetch-keys
@@ -42,11 +42,15 @@ const WorkspaceIntegrations: NextPage = () => {
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
+            link={
-            link={`/${workspaceSlug}`}
+              <Link href={`/${workspaceSlug}`}>
-            linkTruncate
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p className="truncate">{`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}</p>
+                </a>
+              </Link>
+            }
           />
           <BreadcrumbItem title="Integrations Settings" unshrinkTitle />
         </Breadcrumbs>

web/pages/[workspaceSlug]/settings/members.tsx

@@ -18,9 +18,8 @@ import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace
 import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal";
 import { SettingsSidebar } from "components/project";
 // ui
-import { Button, Loader } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui";
 import { CustomMenu, CustomSelect } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { ChevronDown, X } from "lucide-react";
 // types
@@ -101,11 +100,15 @@ const MembersSettings: NextPage = () => {
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
-        <Breadcrumbs>
+        <Breadcrumbs onBack={() => router.back()}>
           <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
+            link={
-            link={`/${workspaceSlug}`}
+              <Link href={`/${workspaceSlug}`}>
-            linkTruncate
+                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
+                  <p className="truncate">{`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}</p>
+                </a>
+              </Link>
+            }
           />
           <BreadcrumbItem title="Members Settings" unshrinkTitle />
         </Breadcrumbs>