snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/breadcrumbs/common.tsx

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local components
+import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
+import { ProjectBreadcrumb } from "./project";
+
+type TCommonProjectBreadcrumbProps = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export function CommonProjectBreadcrumbs(props: TCommonProjectBreadcrumbProps) {
+  const { workspaceSlug, projectId } = props;
+  // preferences
+  const { preferences: projectPreferences } = useProjectNavigationPreferences();
+
+  if (projectPreferences.navigationMode === "TABBED") return null;
+  return <ProjectBreadcrumb workspaceSlug={workspaceSlug} projectId={projectId} />;
+}

apps/web/core/components/breadcrumbs/project.tsx

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { ProjectsOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { ICustomSearchSelectOption } from "@plane/types";
+import { BreadcrumbNavigationSearchDropdown, Breadcrumbs } from "@plane/ui";
+import { SwitcherLabel } from "@/components/common/switcher-label";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+import type { TProject } from "@plane/types";
+
+type TProjectBreadcrumbProps = {
+  workspaceSlug: string;
+  projectId: string;
+  handleOnClick?: () => void;
+};
+
+export const ProjectBreadcrumb = observer(function ProjectBreadcrumb(props: TProjectBreadcrumbProps) {
+  const { workspaceSlug, projectId, handleOnClick } = props;
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { joinedProjectIds, getPartialProjectById } = useProject();
+  const currentProjectDetails = getPartialProjectById(projectId);
+
+  // store hooks
+
+  if (!currentProjectDetails) return null;
+
+  // derived values
+  const switcherOptions = joinedProjectIds
+    // oxlint-disable-next-line no-shadow
+    .map((projectId) => {
+      const project = getPartialProjectById(projectId);
+      return {
+        value: projectId,
+        query: project?.name,
+        content: (
+          <SwitcherLabel
+            name={project?.name}
+            logo_props={project?.logo_props}
+            LabelIcon={ProjectsOutline}
+            type="material"
+          />
+        ),
+      };
+    })
+    .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
+
+  // helpers
+  // oxlint-disable-next-line unicorn/consistent-function-scoping
+  const renderIcon = (projectDetails: TProject) => (
+    <span className="grid size-4 flex-shrink-0 place-items-center">
+      <Logo logo={projectDetails.logo_props} size={14} />
+    </span>
+  );
+
+  return (
+    <>
+      <Breadcrumbs.Item
+        component={
+          <BreadcrumbNavigationSearchDropdown
+            selectedItem={currentProjectDetails.id}
+            navigationItems={switcherOptions}
+            onChange={(value: string) => {
+              router.push(`/${workspaceSlug}/projects/${value}/issues`);
+            }}
+            title={currentProjectDetails?.name}
+            icon={renderIcon(currentProjectDetails)}
+            handleOnClick={() => {
+              if (handleOnClick) handleOnClick();
+              else router.push(`/${workspaceSlug}/projects/${currentProjectDetails.id}/issues/`);
+            }}
+            shouldTruncate
+          />
+        }
+        showSeparator={false}
+      />
+    </>
+  );
+});