chore: breadcrumb component improvement (#3537)

* chore: breadcrumb component improvement * chore: code refactor
2024-06-14 14:31:34 +00:00 · 2024-02-01 18:13:30 +05:30 · 2024-02-01 18:13:30 +05:30 · 67cf1785b8
commit 67cf1785b8
parent 7d08a57be6
28 changed files with 480 additions and 323 deletions
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@ -2,8 +2,6 @@ import * as React from "react";

 // icons
 import { ChevronRight } from "lucide-react";
-// components
-import { Tooltip } from "../tooltip";

 type BreadcrumbsProps = {
  children: any;
@ -25,42 +23,11 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
 type Props = {
  type?: "text" | "component";
  component?: React.ReactNode;
-  label?: string;
-  icon?: React.ReactNode;
-  link?: string;
+  link?: JSX.Element;
 };
 const BreadcrumbItem: React.FC<Props> = (props) => {
-  const { type = "text", component, label, icon, link } = props;
-  return (
-    <>
-      {type != "text" ? (
-        <div className="flex items-center space-x-2">{component}</div>
-      ) : (
-        <Tooltip tooltipContent={label} position="bottom">
-          <li className="flex items-center space-x-2">
-            <div className="flex flex-wrap items-center gap-2.5">
-              {link ? (
-                <a
-                  className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
-                  href={link}
-                >
-                  {icon && (
-                    <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
-                  )}
-                  <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
-                </a>
-              ) : (
-                <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
-                  {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
-                  <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
-                </div>
-              )}
-            </div>
-          </li>
-        </Tooltip>
-      )}
-    </>
-  );
+  const { type = "text", component, link } = props;
+  return <>{type != "text" ? <div className="flex items-center space-x-2">{component}</div> : link}</>;
 };

 Breadcrumbs.BreadcrumbItem = BreadcrumbItem;
--- a/web/components/common/breadcrumb-link.tsx
+++ b/web/components/common/breadcrumb-link.tsx
@ -0,0 +1,36 @@
+import { Tooltip } from "@plane/ui";
+import Link from "next/link";
+
+type Props = {
+  label?: string;
+  href?: string;
+  icon?: React.ReactNode | undefined;
+};
+
+export const BreadcrumbLink: React.FC<Props> = (props) => {
+  const { href, label, icon } = props;
+  return (
+    <Tooltip tooltipContent={label} position="bottom">
+      <li className="flex items-center space-x-2">
+        <div className="flex flex-wrap items-center gap-2.5">
+          {href ? (
+            <Link
+              className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
+              href={href}
+            >
+              {icon && (
+                <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
+              )}
+              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
+            </Link>
+          ) : (
+            <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
+              {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
+              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
+            </div>
+          )}
+        </div>
+      </li>
+    </Tooltip>
+  );
+};
--- a/web/components/common/index.ts
+++ b/web/components/common/index.ts
@ -1,3 +1,4 @@
 export * from "./product-updates-modal";
 export * from "./empty-state";
 export * from "./latest-feature-block";
+export * from "./breadcrumb-link";
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@ -18,6 +18,7 @@ import useLocalStorage from "hooks/use-local-storage";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui";
 // icons
@ -151,6 +152,10 @@ export const CycleIssuesHeader: React.FC = observer(() => {
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
+              link={
+                <BreadcrumbLink
+                  label={currentProjectDetails?.name ?? "Project"}
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                  icon={
                    currentProjectDetails?.emoji ? (
                      renderEmoji(currentProjectDetails.emoji)
@ -162,14 +167,18 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                      </span>
                    )
                  }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                />
+              }
            />
            <Breadcrumbs.BreadcrumbItem
              type="text"
-              icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
+              link={
+                <BreadcrumbLink
                  label="Cycles"
-              link={`/${workspaceSlug}/projects/${projectId}/cycles`}
+                  href={`/${workspaceSlug}/projects/${projectId}/cycles`}
+                  icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
            />
            <Breadcrumbs.BreadcrumbItem
              type="component"
--- a/web/components/headers/cycles.tsx
+++ b/web/components/headers/cycles.tsx
@ -11,6 +11,7 @@ import { renderEmoji } from "helpers/emoji.helper";
 import { EUserProjectRoles } from "constants/project";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";

 export const CyclesHeader: FC = observer(() => {
  // router
@ -37,7 +38,10 @@ export const CyclesHeader: FC = observer(() => {
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
+              link={
+                <BreadcrumbLink
                  label={currentProjectDetails?.name ?? "Project"}
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                  icon={
                    currentProjectDetails?.emoji ? (
                      renderEmoji(currentProjectDetails.emoji)
@ -49,12 +53,12 @@ export const CyclesHeader: FC = observer(() => {
                      </span>
                    )
                  }
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                />
+              }
            />
            <Breadcrumbs.BreadcrumbItem
              type="text"
-              icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Cycles"
+              link={<BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />}
            />
          </Breadcrumbs>
        </div>
--- a/web/components/headers/global-issues.tsx
+++ b/web/components/headers/global-issues.tsx
@ -8,6 +8,7 @@ import { useLabel, useMember, useUser, useIssues } from "hooks/store";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "components/issues";
 import { CreateUpdateWorkspaceViewModal } from "components/workspace";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, LayersIcon, PhotoFilterIcon, Tooltip } from "@plane/ui";
 // icons
@ -112,6 +113,9 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
+              link={
+                <BreadcrumbLink
+                  label={`All ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`}
                  icon={
                    activeLayout === "spreadsheet" ? (
                      <LayersIcon className="h-4 w-4 text-custom-text-300" />
@ -119,7 +123,8 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
                      <PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
                    )
                  }
-              label={`All ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`}
+                />
+              }
            />
          </Breadcrumbs>
        </div>
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@ -18,6 +18,7 @@ import useLocalStorage from "hooks/use-local-storage";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, CustomMenu, DiceIcon } from "@plane/ui";
 // icons
@ -154,6 +155,10 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
+              link={
+                <BreadcrumbLink
+                  label={currentProjectDetails?.name ?? "Project"}
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                  icon={
                    currentProjectDetails?.emoji ? (
                      renderEmoji(currentProjectDetails.emoji)
@ -165,14 +170,18 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                      </span>
                    )
                  }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                />
+              }
            />
            <Breadcrumbs.BreadcrumbItem
              type="text"
-              icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${projectId}/modules`}
                  label="Modules"
-              link={`/${workspaceSlug}/projects/${projectId}/modules`}
+                  icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
            />
            <Breadcrumbs.BreadcrumbItem
              type="component"
--- a/web/components/headers/modules-list.tsx
+++ b/web/components/headers/modules-list.tsx
@ -13,6 +13,7 @@ import { MODULE_VIEW_LAYOUTS } from "constants/module";
 import { EUserProjectRoles } from "constants/project";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";

 export const ModulesListHeader: React.FC = observer(() => {
  // router
@ -38,6 +39,9 @@ export const ModulesListHeader: React.FC = observer(() => {
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                  label={currentProjectDetails?.name ?? "Project"}
                  icon={
                    currentProjectDetails?.emoji ? (
@ -50,12 +54,12 @@ export const ModulesListHeader: React.FC = observer(() => {
                      </span>
                    )
                  }
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                />
+              }
            />
            <Breadcrumbs.BreadcrumbItem
              type="text"
-              icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Modules"
+              link={<BreadcrumbLink label="Modules" icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />} />}
            />
          </Breadcrumbs>
        </div>
--- a/web/components/headers/page-details.tsx
+++ b/web/components/headers/page-details.tsx
@ -10,6 +10,7 @@ import { Breadcrumbs, Button } from "@plane/ui";
 import { renderEmoji } from "helpers/emoji.helper";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";

 export interface IPagesHeaderProps {
  showButton?: boolean;
@ -34,6 +35,9 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                  label={currentProjectDetails?.name ?? "Project"}
                  icon={
                    currentProjectDetails?.emoji ? (
@ -46,18 +50,27 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
                      </span>
                    )
                  }
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                />
+              }
            />
            <Breadcrumbs.BreadcrumbItem
              type="text"
-              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages`}
                  label="Pages"
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages`}
+                  icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
            />
            <Breadcrumbs.BreadcrumbItem
              type="text"
-              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+              link={
+                <BreadcrumbLink
                  label={pageDetails?.name ?? "Page"}
+                  icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
            />
          </Breadcrumbs>
        </div>
--- a/web/components/headers/pages.tsx
+++ b/web/components/headers/pages.tsx
@ -11,6 +11,7 @@ import { renderEmoji } from "helpers/emoji.helper";
 import { EUserProjectRoles } from "constants/project";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";

 export const PagesHeader = observer(() => {
  // router
@ -36,6 +37,9 @@ export const PagesHeader = observer(() => {
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                  label={currentProjectDetails?.name ?? "Project"}
                  icon={
                    currentProjectDetails?.emoji ? (
@ -48,12 +52,12 @@ export const PagesHeader = observer(() => {
                      </span>
                    )
                  }
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                />
+              }
            />
            <Breadcrumbs.BreadcrumbItem
              type="text"
-              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
-              label="Pages"
+              link={<BreadcrumbLink label="Pages" icon={<FileText className="h-4 w-4 text-custom-text-300" />} />}
            />
          </Breadcrumbs>
        </div>
--- a/web/components/headers/profile-preferences.tsx
+++ b/web/components/headers/profile-preferences.tsx
@ -1,12 +1,13 @@
 // components
 import { Breadcrumbs } from "@plane/ui";
+import { BreadcrumbLink } from "components/common";

 export const ProfilePreferencesHeader = () => (
  <div className="relative z-10 flex h-[3.75rem] 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 w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
      <div>
        <Breadcrumbs>
-          <Breadcrumbs.BreadcrumbItem type="text" label="My Profile Preferences" />
+          <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="My Profile Preferences" />} />
        </Breadcrumbs>
      </div>
    </div>
--- a/web/components/headers/profile-settings.tsx
+++ b/web/components/headers/profile-settings.tsx
@ -2,6 +2,7 @@ import { FC } from "react";
 // ui
 import { Breadcrumbs } from "@plane/ui";
 import { Settings } from "lucide-react";
+import { BreadcrumbLink } from "components/common";

 interface IProfileSettingHeader {
  title: string;
@ -17,11 +18,15 @@ export const ProfileSettingsHeader: FC<IProfileSettingHeader> = (props) => {
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
+              link={
+                <BreadcrumbLink
+                  href="/profile"
                  label="My Profile"
                  icon={<Settings className="h-4 w-4 text-custom-text-300" />}
-              link="/profile"
                />
-            <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+              }
+            />
+            <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
          </Breadcrumbs>
        </div>
      </div>
--- a/web/components/headers/project-archived-issue-details.tsx
+++ b/web/components/headers/project-archived-issue-details.tsx
@ -16,6 +16,7 @@ import { IssueArchiveService } from "services/issue";
 import { renderEmoji } from "helpers/emoji.helper";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";

 const issueArchiveService = new IssueArchiveService();

@ -46,6 +47,10 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
                  icon={
                    currentProjectDetails?.emoji ? (
                      renderEmoji(currentProjectDetails.emoji)
@ -57,21 +62,30 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
                      </span>
                    )
                  }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects`}
+                />
+              }
            />

            <Breadcrumbs.BreadcrumbItem
              type="text"
-              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${projectId}/archived-issues`}
                  label="Archived Issues"
-              link={`/${workspaceSlug}/projects/${projectId}/archived-issues`}
+                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
            />

            <Breadcrumbs.BreadcrumbItem
              type="text"
+              link={
+                <BreadcrumbLink
                  label={
-                `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ?? "..."
+                    `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ??
+                    "..."
+                  }
+                />
              }
            />
          </Breadcrumbs>
--- a/web/components/headers/project-archived-issues.tsx
+++ b/web/components/headers/project-archived-issues.tsx
@ -11,6 +11,7 @@ import { Breadcrumbs, LayersIcon } from "@plane/ui";
 // components
 import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "components/issues";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 // types
@ -85,6 +86,10 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
                  icon={
                    currentProjectDetails?.emoji ? (
                      renderEmoji(currentProjectDetails.emoji)
@ -96,14 +101,18 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
                      </span>
                    )
                  }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects`}
+                />
+              }
            />

            <Breadcrumbs.BreadcrumbItem
              type="text"
-              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              link={
+                <BreadcrumbLink
                  label="Archived Issues"
+                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
            />
          </Breadcrumbs>
        </div>
--- a/web/components/headers/project-draft-issues.tsx
+++ b/web/components/headers/project-draft-issues.tsx
@ -6,6 +6,7 @@ import { useIssues, useLabel, useMember, useProject, useProjectState } from "hoo
 // components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, LayersIcon } from "@plane/ui";
 // helper
@ -80,6 +81,10 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
                  icon={
                    currentProjectDetails?.emoji ? (
                      renderEmoji(currentProjectDetails.emoji)
@ -91,14 +96,15 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
                      </span>
                    )
                  }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects`}
+                />
+              }
            />

            <Breadcrumbs.BreadcrumbItem
              type="text"
-              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Draft Issues"
+              link={
+                <BreadcrumbLink label="Inbox Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
+              }
            />
          </Breadcrumbs>
        </div>
--- a/web/components/headers/project-inbox.tsx
+++ b/web/components/headers/project-inbox.tsx
@ -9,6 +9,7 @@ import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
 // components
 import { CreateInboxIssueModal } from "components/inbox";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // helper
 import { renderEmoji } from "helpers/emoji.helper";

@ -29,6 +30,10 @@ export const ProjectInboxHeader: FC = observer(() => {
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
                  icon={
                    currentProjectDetails?.emoji ? (
                      renderEmoji(currentProjectDetails.emoji)
@ -40,14 +45,15 @@ export const ProjectInboxHeader: FC = observer(() => {
                      </span>
                    )
                  }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects`}
+                />
+              }
            />

            <Breadcrumbs.BreadcrumbItem
              type="text"
-              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Inbox Issues"
+              link={
+                <BreadcrumbLink label="Inbox Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
+              }
            />
          </Breadcrumbs>
        </div>
--- a/web/components/headers/project-issue-details.tsx
+++ b/web/components/headers/project-issue-details.tsx
@ -14,6 +14,7 @@ import { IssueService } from "services/issue";
 import { ISSUE_DETAILS } from "constants/fetch-keys";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";

 // services
 const issueService = new IssueService();
@ -40,6 +41,10 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
                  icon={
                    currentProjectDetails?.emoji ? (
                      renderEmoji(currentProjectDetails.emoji)
@ -51,21 +56,30 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
                      </span>
                    )
                  }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects`}
+                />
+              }
            />

            <Breadcrumbs.BreadcrumbItem
              type="text"
-              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${projectId}/issues`}
                  label="Issues"
-              link={`/${workspaceSlug}/projects/${projectId}/issues`}
+                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
            />

            <Breadcrumbs.BreadcrumbItem
              type="text"
+              link={
+                <BreadcrumbLink
                  label={
-                `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ?? "..."
+                    `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ??
+                    "..."
+                  }
+                />
              }
            />
          </Breadcrumbs>
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@ -9,6 +9,7 @@ import { useApplication, useLabel, useProject, useProjectState, useUser, useInbo
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
 // types
@ -120,6 +121,10 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
            <Breadcrumbs>
              <Breadcrumbs.BreadcrumbItem
                type="text"
+                link={
+                  <BreadcrumbLink
+                    href={`/${workspaceSlug}/projects`}
+                    label={currentProjectDetails?.name ?? "Project"}
                    icon={
                      currentProjectDetails ? (
                        currentProjectDetails?.emoji ? (
@ -141,14 +146,13 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                        </span>
                      )
                    }
-                label={currentProjectDetails?.name ?? "Project"}
-                link={`/${workspaceSlug}/projects`}
+                  />
+                }
              />

              <Breadcrumbs.BreadcrumbItem
                type="text"
-                icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-                label="Issues"
+                link={<BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
              />
            </Breadcrumbs>
          </div>
--- a/web/components/headers/project-settings.tsx
+++ b/web/components/headers/project-settings.tsx
@ -11,6 +11,7 @@ import { useProject, useUser } from "hooks/store";
 import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "constants/project";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";

 export interface IProjectSettingHeader {
  title: string;
@ -38,6 +39,9 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
            <Breadcrumbs>
              <Breadcrumbs.BreadcrumbItem
                type="text"
+                link={
+                  <BreadcrumbLink
+                    href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                    label={currentProjectDetails?.name ?? "Project"}
                    icon={
                      currentProjectDetails?.emoji ? (
@ -50,10 +54,11 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
                        </span>
                      )
                    }
-                link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  />
+                }
              />
              <div className="hidden sm:hidden md:block lg:block">
-                <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+                <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
              </div>
            </Breadcrumbs>
          </div>
@ -62,13 +67,18 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
          className="flex-shrink-0 block sm:block md:hidden lg:hidden"
          maxHeight="lg"
          customButton={
-            <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">{title}</span>
+            <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">
+              {title}
+            </span>
          }
          placement="bottom-start"
          closeOnSelect
        >
          {PROJECT_SETTINGS_LINKS.map((item) => (
-            <CustomMenu.MenuItem key={item.key} onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}${item.href}`)}>
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}${item.href}`)}
+            >
              {item.label}
            </CustomMenu.MenuItem>
          ))}
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@ -17,6 +17,7 @@ import {
 // components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, CustomMenu, PhotoFilterIcon } from "@plane/ui";
 // helpers
@ -112,6 +113,9 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
        <Breadcrumbs>
          <Breadcrumbs.BreadcrumbItem
            type="text"
+            link={
+              <BreadcrumbLink
+                href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                label={currentProjectDetails?.name ?? "Project"}
                icon={
                  currentProjectDetails?.emoji ? (
@ -128,13 +132,18 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
                    </span>
                  )
                }
-            link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+              />
+            }
          />
          <Breadcrumbs.BreadcrumbItem
            type="text"
-            icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
+            link={
+              <BreadcrumbLink
+                href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/views`}
                label="Views"
-            link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/views`}
+                icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
+              />
+            }
          />
          <Breadcrumbs.BreadcrumbItem
            type="component"
--- a/web/components/headers/project-views.tsx
+++ b/web/components/headers/project-views.tsx
@ -6,6 +6,7 @@ import { useApplication, useProject, useUser } from "hooks/store";
 // components
 import { Breadcrumbs, PhotoFilterIcon, Button } from "@plane/ui";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 // constants
@ -36,6 +37,9 @@ export const ProjectViewsHeader: React.FC = observer(() => {
            <Breadcrumbs>
              <Breadcrumbs.BreadcrumbItem
                type="text"
+                link={
+                  <BreadcrumbLink
+                    href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                    label={currentProjectDetails?.name ?? "Project"}
                    icon={
                      currentProjectDetails?.emoji ? (
@ -52,12 +56,14 @@ export const ProjectViewsHeader: React.FC = observer(() => {
                        </span>
                      )
                    }
-                link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  />
+                }
              />
              <Breadcrumbs.BreadcrumbItem
                type="text"
-                icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
-                label="Views"
+                link={
+                  <BreadcrumbLink label="Views" icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />} />
+                }
              />
            </Breadcrumbs>
          </div>
--- a/web/components/headers/projects.tsx
+++ b/web/components/headers/projects.tsx
@ -8,6 +8,7 @@ import { Breadcrumbs, Button } from "@plane/ui";
 import { EUserWorkspaceRoles } from "constants/workspace";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";

 export const ProjectsHeader = observer(() => {
  // store hooks
@ -30,8 +31,7 @@ export const ProjectsHeader = observer(() => {
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
-              icon={<Briefcase className="h-4 w-4 text-custom-text-300" />}
-              label="Projects"
+              link={<BreadcrumbLink label="Projects" icon={<Briefcase className="h-4 w-4 text-custom-text-300" />} />}
            />
          </Breadcrumbs>
        </div>
--- a/web/components/headers/user-profile.tsx
+++ b/web/components/headers/user-profile.tsx
@ -1,5 +1,6 @@
 // ui
 import { Breadcrumbs } from "@plane/ui";
+import { BreadcrumbLink } from "components/common";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";

@ -9,7 +10,7 @@ export const UserProfileHeader = () => (
      <SidebarHamburgerToggle />
      <div>
        <Breadcrumbs>
-          <Breadcrumbs.BreadcrumbItem type="text" label="Activity Overview" link="/profile" />
+          <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink href="/profile" label="Activity Overview" />} />
        </Breadcrumbs>
      </div>
    </div>
--- a/web/components/headers/workspace-active-cycles.tsx
+++ b/web/components/headers/workspace-active-cycles.tsx
@ -1,9 +1,10 @@
 import { observer } from "mobx-react-lite";
 // ui
 import { Breadcrumbs, ContrastIcon } from "@plane/ui";
+import { BreadcrumbLink } from "components/common";
+import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 // icons
 import { Crown } from "lucide-react";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";

 export const WorkspaceActiveCycleHeader = observer(() => (
  <div className="relative z-10 flex h-[3.75rem] 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">
@ -13,8 +14,12 @@ export const WorkspaceActiveCycleHeader = observer(() => (
        <Breadcrumbs>
          <Breadcrumbs.BreadcrumbItem
            type="text"
-            icon={<ContrastIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
+            link={
+              <BreadcrumbLink
                label="Active Cycles"
+                icon={<ContrastIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
+              />
+            }
          />
        </Breadcrumbs>
        <Crown className="h-3.5 w-3.5 text-amber-400" />
--- a/web/components/headers/workspace-analytics.tsx
+++ b/web/components/headers/workspace-analytics.tsx
@ -4,6 +4,7 @@ import { ArrowLeft, BarChart2 } from "lucide-react";
 import { Breadcrumbs } from "@plane/ui";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";

 export const WorkspaceAnalyticsHeader = () => {
  const router = useRouter();
@ -28,8 +29,9 @@ export const WorkspaceAnalyticsHeader = () => {
            <Breadcrumbs>
              <Breadcrumbs.BreadcrumbItem
                type="text"
-                icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />}
-                label="Analytics"
+                link={
+                  <BreadcrumbLink label="Analytics" icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />} />
+                }
              />
            </Breadcrumbs>
          </div>
--- a/web/components/headers/workspace-dashboard.tsx
+++ b/web/components/headers/workspace-dashboard.tsx
@ -6,7 +6,7 @@ import { useTheme } from "next-themes";
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
 // components
-import { ProductUpdatesModal } from "components/common";
+import { BreadcrumbLink, ProductUpdatesModal } from "components/common";
 import { Breadcrumbs } from "@plane/ui";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";

@ -25,8 +25,9 @@ export const WorkspaceDashboardHeader = () => {
            <Breadcrumbs>
              <Breadcrumbs.BreadcrumbItem
                type="text"
-                icon={<LayoutGrid className="h-4 w-4 text-custom-text-300" />}
-                label="Dashboard"
+                link={
+                  <BreadcrumbLink label="Dashboard" icon={<LayoutGrid className="h-4 w-4 text-custom-text-300" />} />
+                }
              />
            </Breadcrumbs>
          </div>
--- a/web/components/headers/workspace-settings.tsx
+++ b/web/components/headers/workspace-settings.tsx
@ -8,6 +8,7 @@ import { observer } from "mobx-react-lite";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 import { WORKSPACE_SETTINGS_LINKS } from "constants/workspace";
+import { BreadcrumbLink } from "components/common";

 export interface IWorkspaceSettingHeader {
  title: string;
@ -27,12 +28,16 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/settings`}
                  label="Settings"
                  icon={<Settings className="h-4 w-4 text-custom-text-300" />}
-              link={`/${workspaceSlug}/settings`}
+                />
+              }
            />
            <div className="hidden sm:hidden md:block lg:block">
-              <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+              <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
            </div>
          </Breadcrumbs>
        </div>
@ -40,7 +45,9 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
          className="flex-shrink-0 block sm:block md:hidden lg:hidden"
          maxHeight="lg"
          customButton={
-            <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">{title}</span>
+            <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">
+              {title}
+            </span>
          }
          placement="bottom-start"
          closeOnSelect
--- a/web/layouts/admin-layout/header.tsx
+++ b/web/layouts/admin-layout/header.tsx
@ -5,6 +5,7 @@ import { observer } from "mobx-react-lite";
 import { Breadcrumbs } from "@plane/ui";
 // icons
 import { Settings } from "lucide-react";
+import { BreadcrumbLink } from "components/common";

 export interface IInstanceAdminHeader {
  title?: string;
@ -21,11 +22,15 @@ export const InstanceAdminHeader: FC<IInstanceAdminHeader> = observer((props) =>
            <Breadcrumbs>
              <Breadcrumbs.BreadcrumbItem
                type="text"
-                icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+                link={
+                  <BreadcrumbLink
+                    href="/god-mode"
                    label="Settings"
-                link="/god-mode"
+                    icon={<Settings className="h-4 w-4 text-custom-text-300" />}
                  />
-              <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+                }
+              />
+              <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
            </Breadcrumbs>
          </div>
        )}