chore: breadcrumbs ui component (#2458)

* chore: swap breadcrumbs component with plane/ui component * chore: breadcrumb refactor
2023-10-17 17:25:02 +05:30 · 2023-10-17 17:25:02 +05:30 · b0c1af2b25
commit b0c1af2b25
parent 123634f5e8
38 changed files with 403 additions and 183 deletions
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/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 };
--- a/packages/ui/src/breadcrumbs/index.tsx
+++ b/packages/ui/src/breadcrumbs/index.tsx
@ -0,0 +1 @@
+export * from "./breadcrumbs";
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@ -5,3 +5,4 @@ export * from "./spinners";
 export * from "./loader";
 export * from "./tooltip";
 export * from "./icons";
+export * from "./breadcrumbs";
--- a/web/components/headers/cycles.tsx
+++ b/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>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+          <Breadcrumbs onBack={() => router.back()}>
+            <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>
--- a/web/components/headers/modules.tsx
+++ b/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>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-            <BreadcrumbItem title={`${truncateText(name ?? "Project", 32)} Cycles`} />
+          <Breadcrumbs onBack={() => router.back()}>
+            <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)} 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)}
--- a/web/components/headers/profile-preferences.tsx
+++ b/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>
--- a/web/components/headers/project-issues.tsx
+++ b/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 } from "components/breadcrumbs";
+import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
 // constants
@ -115,8 +114,16 @@ export const ProjectIssuesHeader: FC = observer(() => {
            </button>
          </div>
          <div>
-            <Breadcrumbs>
-              <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+            <Breadcrumbs onBack={() => router.back()}>
+              <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>
--- a/web/components/headers/project-views.tsx
+++ b/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>
-              <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+            <Breadcrumbs onBack={() => router.back()}>
+              <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>
--- a/web/components/headers/projects.tsx
+++ b/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 { Button } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, 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}
--- a/web/components/headers/workspace-analytics.tsx
+++ b/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>
--- a/web/layouts/profile-layout.tsx
+++ b/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) => (
-  <WorkspaceAuthorizationLayout
-    breadcrumbs={
-      <Breadcrumbs>
-        <BreadcrumbItem title="User Profile" />
-      </Breadcrumbs>
-    }
-  >
-    <ProfileLayout {...props} />
-  </WorkspaceAuthorizationLayout>
-);
+export const ProfileAuthWrapper = (props: Props) => {
+  const router = useRouter();
+  return (
+    <WorkspaceAuthorizationLayout
+      breadcrumbs={
+        <Breadcrumbs onBack={() => router.back()}>
+          <BreadcrumbItem title="User Profile" />
+        </Breadcrumbs>
+      }
+    >
+      <ProfileLayout {...props} />
+    </WorkspaceAuthorizationLayout>
+  );
+};

 const ProfileLayout: React.FC<Props> = ({ children, className }) => {
  const { memberRole } = useWorkspaceMyMembership();
--- a/web/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/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 } from "components/breadcrumbs";
+import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui";
 // 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>
      }
--- a/web/pages/[workspaceSlug]/me/profile/activity.tsx
+++ b/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 { ExternalLinkIcon, Loader } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, 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>
      }
--- a/web/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/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>
      }
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
+++ b/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, Loader } from "@plane/ui";
+import { ArchiveIcon, Breadcrumbs, 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={`/${workspaceSlug}/projects/${projectId as string}/issues`}
-            linkTruncate
+            link={
+              <Link href={`/${workspaceSlug}/projects/${projectId as string}/issues`}>
+                <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"}-${
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
+++ b/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>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+          <Breadcrumbs onBack={() => router.back()}>
+            <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>
        }
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/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>
-            <BreadcrumbItem
-              title={`${truncateText(cycleDetails?.project_detail.name ?? "Project", 32)} Cycles`}
-              link={`/${workspaceSlug}/projects/${projectId}/cycles`}
-              linkTruncate
+          <Breadcrumbs onBack={() => router.back()}>
+            <Breadcrumbs.BreadcrumbItem
+              link={
+                <Link href={`/${workspaceSlug}/projects/${projectId}/cycles`}>
+                  <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>
        }
--- a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
+++ b/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>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+          <Breadcrumbs onBack={() => router.back()}>
+            <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>
        }
--- a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
+++ b/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>
-          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+        <Breadcrumbs onBack={() => router.back()}>
+          <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>
      }
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/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 { Loader } from "@plane/ui";
+import { Breadcrumbs, 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={`/${workspaceSlug}/projects/${projectId as string}/issues`}
-            linkTruncate
+            link={
+              <Link href={`/${workspaceSlug}/projects/${projectId as string}/issues`}>
+                <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"}-${
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/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={`/${workspaceSlug}/projects/${projectId}/modules`}
-              linkTruncate
+              link={
+                <Link href={`/${workspaceSlug}/projects/${projectId}/modules`}>
+                  <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>
        }
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/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>
-          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+        <Breadcrumbs onBack={() => router.back()}>
+          <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>
      }
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/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 } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs, Button } from "@plane/ui";
 // types
 import { TPageViewProps } from "types";
 import type { NextPage } from "next";
@ -94,8 +94,16 @@ const ProjectPages: NextPage = () => {
      />
      <ProjectAuthorizationWrapper
        breadcrumbs={
-          <Breadcrumbs>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+          <Breadcrumbs onBack={() => router.back()}>
+            <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>
        }
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
+++ b/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={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
-            linkTruncate
+            link={
+              <Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
+                <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>
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/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={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
-              linkTruncate
+              link={
+                <Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
+                  <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>
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/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 } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs, ContrastIcon, DiceIcon, ToggleSwitch } from "@plane/ui";
 // 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={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
-            linkTruncate
+            link={
+              <Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
+                <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>
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/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 } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui";
 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={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
-            linkTruncate
+            link={
+              <Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
+                <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>
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/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 { Loader } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, 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={`/${workspaceSlug}/projects/${projectId}/issues`}
-            linkTruncate
+            link={
+              <Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
+                <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>
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/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={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
-              linkTruncate
+              link={
+                <Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
+                  <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>
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/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={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
-            linkTruncate
+            link={
+              <Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
+                <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>
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/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 } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs, Loader } from "@plane/ui";
 // 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={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
-              linkTruncate
+              link={
+                <Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
+                  <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>
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
+++ b/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={`/${workspaceSlug}/projects/${activeProject?.id}/cycles`}
+            link={
+              <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>
      }
--- a/web/pages/[workspaceSlug]/settings/billing.tsx
+++ b/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 } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs, Button } from "@plane/ui";
 // 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 {
-    query: { workspaceSlug },
-  } = useRouter();
+  const router = useRouter();
+  const { workspaceSlug } = router.query;

  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={`/${workspaceSlug}`}
-            linkTruncate
+            link={
+              <Link href={`/${workspaceSlug}`}>
+                <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>
--- a/web/pages/[workspaceSlug]/settings/exports.tsx
+++ b/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={`/${workspaceSlug}`}
-            linkTruncate
+            link={
+              <Link href={`/${workspaceSlug}`}>
+                <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>
--- a/web/pages/[workspaceSlug]/settings/imports.tsx
+++ b/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={`/${workspaceSlug}`}
-            linkTruncate
+            link={
+              <Link href={`/${workspaceSlug}`}>
+                <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>
--- a/web/pages/[workspaceSlug]/settings/index.tsx
+++ b/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 } from "components/breadcrumbs";
+import { BreadcrumbItem, Breadcrumbs, Button, Input, Spinner } from "@plane/ui";
 // 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>
      }
--- a/web/pages/[workspaceSlug]/settings/integrations.tsx
+++ b/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 { Loader } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, 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={`/${workspaceSlug}`}
-            linkTruncate
+            link={
+              <Link href={`/${workspaceSlug}`}>
+                <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>
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/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={`/${workspaceSlug}`}
-            linkTruncate
+            link={
+              <Link href={`/${workspaceSlug}`}>
+                <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>