From 0bfaf2f69282a5e2f48c127428edbbded5cfc0b6 Mon Sep 17 00:00:00 2001
From: Amit_Noyberg1 <219515702+amit-noy@users.noreply.github.com>
Date: Tue, 19 May 2026 13:11:57 +0300
Subject: [PATCH 1/4] add tab page name to breadcrumbs when navigating to inner
 page

---
 src/common/Breadcrumbs/Breadcrumbs.jsx        |  83 ++++---
 .../BreadcrumbsStep/BreadcrumbsStep.jsx       | 206 ++++++++++--------
 .../BreadcrumbsStep/breadcrumbsStep.scss      |   7 +-
 src/common/Breadcrumbs/breadcrumbs.scss       |   1 -
 src/common/Breadcrumbs/breadcrumbs.util.js    | 131 +++--------
 src/components/Alerts/Alerts.jsx              |   2 +-
 .../ApplicationMetrics/ApplicationMetrics.jsx |   2 +-
 src/components/Artifacts/Artifacts.jsx        |   1 +
 src/components/Artifacts/ArtifactsView.jsx    |   4 +-
 .../ConsumerGroupsWrapper.jsx                 |   2 +-
 src/components/FeatureStore/FeatureStore.jsx  |   6 +-
 src/components/FunctionsPage/Functions.jsx    |   1 +
 .../FunctionsPage/FunctionsView.jsx           |   7 +-
 .../FunctionsPageOld/FunctionsViewOld.jsx     |   2 +-
 src/components/Jobs/Jobs.jsx                  |   2 +-
 src/components/ModelsPage/ModelsPage.jsx      |   7 +-
 .../MonitoringApplicationsPage.jsx            |   2 +-
 src/components/Project/ProjectMonitorView.jsx |   2 +-
 src/constants.js                              |   6 +
 .../BreadcrumbsDropdown.jsx                   |  99 +++++----
 .../breadcrumbsDropdown.scss                  |  30 ++-
 21 files changed, 310 insertions(+), 293 deletions(-)

diff --git a/src/common/Breadcrumbs/Breadcrumbs.jsx b/src/common/Breadcrumbs/Breadcrumbs.jsx
index 44e48643a8..95f1974193 100644
--- a/src/common/Breadcrumbs/Breadcrumbs.jsx
+++ b/src/common/Breadcrumbs/Breadcrumbs.jsx
@@ -24,68 +24,86 @@ import { useSelector } from 'react-redux'
 
 import BreadcrumbsStep from './BreadcrumbsStep/BreadcrumbsStep'
 
-import { generateMlrunScreens, generateTabsList } from './breadcrumbs.util'
-import { MONITORING_APP_PAGE, PROJECTS_PAGE_PATH } from '../../constants'
+import { generateMlrunScreens } from './breadcrumbs.util'
+import { PROJECTS_PAGE_PATH } from '../../constants'
 import { generateProjectsList } from '../../utils/projects'
+import { useMode } from '../../hooks/mode.hook'
+
+import {
+  BREADCRUMBS_STEP_ITEM_TYPE,
+  BREADCRUMBS_STEP_PROJECT_TYPE,
+  BREADCRUMBS_STEP_SCREEN_TYPE
+} from '../../constants'
 
 import './breadcrumbs.scss'
 
-const Breadcrumbs = ({ onClick = () => {} }) => {
+const Breadcrumbs = ({ itemName = '', onClick = () => {} }) => {
   const [searchValue, setSearchValue] = useState('')
   const [showScreensList, setShowScreensList] = useState(false)
   const [showProjectsList, setShowProjectsList] = useState(false)
   const breadcrumbsRef = useRef()
   const params = useParams()
   const location = useLocation()
+  const { isDemoMode } = useMode()
 
   const projectStore = useSelector(state => state.projectStore)
 
   const projectsList = useMemo(() => {
-    return generateProjectsList(projectStore.projectsNames.data)
-  }, [projectStore.projectsNames.data])
+    const projectsList = generateProjectsList(projectStore.projectsNames.data, params.projectName)
+    return projectsList.map(project => ({
+      ...project,
+      link: location.pathname.replace(params.projectName, project.id)
+    }))
+  }, [projectStore.projectsNames.data, location.pathname, params.projectName])
 
   const mlrunScreens = useMemo(() => {
-    return generateMlrunScreens(params)
-  }, [params])
-  const projectTabs = useMemo(() => {
-    return generateTabsList()
-  }, [])
+    return generateMlrunScreens(params?.projectName ?? '', isDemoMode).filter(
+      screen => !screen.hidden
+    )
+  }, [isDemoMode, params?.projectName])
 
   const urlParts = useMemo(() => {
-    if (params.projectName) {
-      const [projects, projectName, screenName] = location.pathname.split('/').slice(1, 4)
-      const screen = mlrunScreens.find(screen => screen.id === screenName)
-      let tab = projectTabs.find(tab =>
-        location.pathname
-          .split('/')
-          .slice(3)
-          .find(pathItem => pathItem === tab.id)
-      )
-
-      if (screen.id === MONITORING_APP_PAGE) {
-        tab = {}
+    const innerScreenName = params?.['*']?.split('/')[0]
+    const [projects, projectName, page] = location.pathname.split('/').slice(1, 4)
+    const screen =
+      mlrunScreens.find(screen => screen.id === innerScreenName) ||
+      mlrunScreens.find(screen => screen.id === page)
+
+    const pathItems = [
+      { id: projects, label: 'Projects', link: `/${PROJECTS_PAGE_PATH}` },
+      {
+        id: projectName,
+        label: projectName,
+        link: `/projects/${projectName}`,
+        type: BREADCRUMBS_STEP_PROJECT_TYPE
+      },
+      {
+        id: screen?.id,
+        label: screen?.label,
+        link: screen?.link,
+        type: BREADCRUMBS_STEP_SCREEN_TYPE
       }
+    ]
+
+    itemName && pathItems.push({ id: itemName, label: itemName, type: BREADCRUMBS_STEP_ITEM_TYPE })
 
+    if (params.projectName) {
       return {
-        pathItems: [projects, projectName, screen?.label || screenName],
-        screen,
-        tab
+        pathItems,
+        screen
       }
     } else {
-      const [page] = location.pathname.split('/').slice(3, 4)
-      const screen = mlrunScreens.find(screen => screen.id === page)
-
       return {
-        pathItems: [PROJECTS_PAGE_PATH, screen?.label || page],
+        pathItems: pathItems.filter(item => item.type !== BREADCRUMBS_STEP_PROJECT_TYPE),
         screen
       }
     }
-  }, [location.pathname, params.projectName, mlrunScreens, projectTabs])
+  }, [itemName, location.pathname, params, mlrunScreens])
 
   return (
     <nav data-testid="breadcrumbs" className="breadcrumbs" ref={breadcrumbsRef}>
       <ul className="breadcrumbs__list">
-        {urlParts.pathItems.map((urlPart, index) => {
+        {urlParts.pathItems.map((pathItem, index) => {
           return (
             <BreadcrumbsStep
               key={index}
@@ -101,7 +119,7 @@ const Breadcrumbs = ({ onClick = () => {} }) => {
               setShowScreensList={setShowScreensList}
               showProjectsList={showProjectsList}
               showScreensList={showScreensList}
-              urlPart={urlPart}
+              pathItem={pathItem}
               urlParts={urlParts}
             />
           )
@@ -112,6 +130,7 @@ const Breadcrumbs = ({ onClick = () => {} }) => {
 }
 
 Breadcrumbs.propTypes = {
+  itemName: PropTypes.string,
   onClick: PropTypes.func
 }
 
diff --git a/src/common/Breadcrumbs/BreadcrumbsStep/BreadcrumbsStep.jsx b/src/common/Breadcrumbs/BreadcrumbsStep/BreadcrumbsStep.jsx
index 33969d13bb..e4cad6aeeb 100644
--- a/src/common/Breadcrumbs/BreadcrumbsStep/BreadcrumbsStep.jsx
+++ b/src/common/Breadcrumbs/BreadcrumbsStep/BreadcrumbsStep.jsx
@@ -20,11 +20,15 @@ such restriction.
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
-import classnames from 'classnames'
 
 import BreadcrumbsDropdown from '../../../elements/BreadcrumbsDropdown/BreadcrumbsDropdown'
 import { RoundedIcon } from 'igz-controls/components'
 
+import {
+  BREADCRUMBS_STEP_ITEM_TYPE,
+  BREADCRUMBS_STEP_PROJECT_TYPE,
+  BREADCRUMBS_STEP_SCREEN_TYPE
+} from '../../../constants'
 import { scrollToElement } from '../../../utils/scroll.util'
 
 import ArrowIcon from 'igz-controls/images/arrow.svg?react'
@@ -45,35 +49,20 @@ const BreadcrumbsStep = React.forwardRef(
       setShowScreensList,
       showProjectsList,
       showScreensList,
-      urlPart,
+      pathItem,
       urlParts
     },
     ref
   ) => {
     const projectListRef = useRef()
+    const screenListRef = useRef()
     const separatorRef = useRef()
 
-    const isParam = useMemo(() => Object.values(params ?? {}).includes(urlPart), [urlPart, params])
-    const label = useMemo(
-      () => (isParam ? urlPart : urlPart.charAt(0).toUpperCase() + urlPart.slice(1)),
-      [urlPart, isParam]
-    )
-    const to = useMemo(
-      () => `/${urlParts.pathItems.slice(0, index + 1).join('/')}`,
-      [index, urlParts.pathItems]
-    )
     const isLastStep = useMemo(
       () => index === urlParts.pathItems.length - 1,
       [index, urlParts.pathItems.length]
     )
 
-    const separatorClassNames = classnames(
-      'breadcrumbs__separator',
-      ((urlParts.pathItems[index + 1] === urlParts.screen?.id && !isParam) ||
-        urlParts.pathItems[index + 1] === params.projectName) &&
-        'breadcrumbs__separator_tumbler'
-    )
-
     const handleSelectDropdownItem = separatorRef => {
       if (showProjectsList) setShowProjectsList(false)
 
@@ -110,13 +99,27 @@ const BreadcrumbsStep = React.forwardRef(
 
     const scrollProjectOptionToView = useCallback(() => {
       scrollToElement(projectListRef, `#${params.projectName}`, searchValue)
-    }, [params.projectName, projectListRef, searchValue])
+    }, [params.projectName, searchValue])
+
+    const scrollScreenOptionToView = useCallback(() => {
+      scrollToElement(screenListRef, `#${urlParts.screen.id}`, searchValue)
+    }, [searchValue, urlParts.screen?.id])
 
     useEffect(() => {
       if (showProjectsList && projectListRef.current) {
         scrollProjectOptionToView()
       }
-    }, [showProjectsList, scrollProjectOptionToView, projectListRef])
+      if (showScreensList && screenListRef.current) {
+        scrollScreenOptionToView()
+      }
+    }, [
+      showProjectsList,
+      projectListRef,
+      screenListRef,
+      showScreensList,
+      scrollProjectOptionToView,
+      scrollScreenOptionToView
+    ])
 
     useEffect(() => {
       window.addEventListener('click', handleCloseDropdown)
@@ -127,19 +130,21 @@ const BreadcrumbsStep = React.forwardRef(
     }, [handleCloseDropdown])
 
     const handleSeparatorClick = (nextItem, separatorRef) => {
-      const nextItemIsScreen = Boolean(mlrunScreens.find(screen => screen.label === nextItem))
-
-      if (nextItemIsScreen || nextItem === params.projectName) {
+      if (
+        nextItem.type === BREADCRUMBS_STEP_SCREEN_TYPE ||
+        nextItem.type === BREADCRUMBS_STEP_PROJECT_TYPE
+      ) {
         const [activeSeparator] = document.getElementsByClassName('breadcrumbs__separator_active')
 
-        if (
-          activeSeparator &&
-          !separatorRef.current.classList.contains('breadcrumbs__separator_active')
-        ) {
-          activeSeparator.classList.remove('breadcrumbs__separator_active')
+        if (nextItem.type === BREADCRUMBS_STEP_PROJECT_TYPE) {
+          setShowProjectsList(state => !state)
+
+          if (showScreensList) {
+            setShowScreensList(false)
+          }
         }
 
-        if (nextItemIsScreen) {
+        if (nextItem.type === BREADCRUMBS_STEP_SCREEN_TYPE) {
           setShowScreensList(state => !state)
 
           if (showProjectsList) {
@@ -147,73 +152,79 @@ const BreadcrumbsStep = React.forwardRef(
           }
         }
 
-        if (nextItem === params.projectName) {
-          setShowProjectsList(state => !state)
-
-          if (showScreensList) {
-            setShowScreensList(false)
-          }
+        if (
+          activeSeparator &&
+          !separatorRef.current.classList.contains('breadcrumbs__separator_active')
+        ) {
+          activeSeparator.classList.remove('breadcrumbs__separator_active')
         }
 
         separatorRef.current.classList.toggle('breadcrumbs__separator_active')
       }
     }
 
-    return (
+    const nextBreadcrumbItem = urlParts.pathItems[index + 1]
+
+    return isLastStep ? (
+      <li
+        data-testid="breadcrumbs-last-item"
+        className="breadcrumbs__item"
+        key={pathItem.id + index}
+      >
+        {pathItem.label}
+      </li>
+    ) : (
       <>
-        {isLastStep ? (
-          <li
-            data-testid="breadcrumbs-last-item"
-            className="breadcrumbs__item"
-            key={`${index}${urlPart}`}
-          >
-            {label}
-          </li>
-        ) : (
-          [
-            <li key={`${index}${urlPart}`} className="breadcrumbs__item">
-              <Link to={to} onClick={onClick}>
-                {label}
-              </Link>
-            </li>,
-            <li key={index} className="breadcrumbs__item">
-              <RoundedIcon
-                className={separatorClassNames}
-                id="separator"
-                ref={separatorRef}
-                onClick={() => handleSeparatorClick(urlParts.pathItems[index + 1], separatorRef)}
-              >
-                <ArrowIcon />
-              </RoundedIcon>
-              {showScreensList && urlParts.pathItems[index + 1] === urlParts.screen?.label && (
-                <BreadcrumbsDropdown
-                  link={to}
-                  list={mlrunScreens}
-                  onClick={() => handleSelectDropdownItem(separatorRef)}
-                  selectedItem={urlParts.screen?.id}
-                  searchValue={searchValue}
-                  setSearchValue={setSearchValue}
-                />
-              )}
-              {showProjectsList && urlParts.pathItems[index + 1] === params.projectName && (
-                <>
-                  <BreadcrumbsDropdown
-                    link={to}
-                    list={projectsList}
-                    onClick={() => handleSelectDropdownItem(separatorRef)}
-                    ref={projectListRef}
-                    screen={urlParts.screen?.id}
-                    selectedItem={params.projectName}
-                    searchValue={searchValue}
-                    setSearchValue={setSearchValue}
-                    tab={urlParts.tab?.id}
-                    withSearch
-                  />
-                </>
-              )}
-            </li>
-          ]
-        )}
+        <li key={pathItem.id} className="breadcrumbs__item">
+          <Link to={pathItem.link} onClick={onClick}>
+            {pathItem.label}
+          </Link>
+        </li>
+        <li key={index} className="breadcrumbs__item">
+          {nextBreadcrumbItem?.type === BREADCRUMBS_STEP_ITEM_TYPE ? (
+            <div className="breadcrumbs__separator">
+              <ArrowIcon />
+            </div>
+          ) : (
+            <RoundedIcon
+              className="breadcrumbs__separator"
+              id={`separator-${index}`}
+              ref={separatorRef}
+              onClick={() => handleSeparatorClick(nextBreadcrumbItem, separatorRef)}
+            >
+              <ArrowIcon />
+            </RoundedIcon>
+          )}
+          {showScreensList && nextBreadcrumbItem.type === BREADCRUMBS_STEP_SCREEN_TYPE && (
+            <BreadcrumbsDropdown
+              id="breadcrumbs-screens-dropdown"
+              link={pathItem.link}
+              list={mlrunScreens}
+              onClick={() => handleSelectDropdownItem(separatorRef)}
+              ref={screenListRef}
+              selectedItem={urlParts.screen?.id}
+              searchValue={searchValue}
+              setSearchValue={setSearchValue}
+            />
+          )}
+          {showProjectsList && nextBreadcrumbItem.type === BREADCRUMBS_STEP_PROJECT_TYPE && (
+            <>
+              <BreadcrumbsDropdown
+                id="breadcrumbs-projects-dropdown"
+                link={pathItem.link}
+                list={projectsList}
+                onClick={() => handleSelectDropdownItem(separatorRef)}
+                ref={projectListRef}
+                selectedItem={params.projectName}
+                searchValue={searchValue}
+                setSearchValue={setSearchValue}
+                urlParts={urlParts}
+                withSearch
+                withAllProjects
+              />
+            </>
+          )}
+        </li>
       </>
     )
   }
@@ -226,6 +237,7 @@ BreadcrumbsStep.propTypes = {
   mlrunScreens: PropTypes.arrayOf(PropTypes.object).isRequired,
   onClick: PropTypes.func,
   params: PropTypes.object.isRequired,
+  pathItem: PropTypes.object.isRequired,
   projectsList: PropTypes.arrayOf(PropTypes.object).isRequired,
   searchValue: PropTypes.string.isRequired,
   setSearchValue: PropTypes.func.isRequired,
@@ -233,15 +245,19 @@ BreadcrumbsStep.propTypes = {
   setShowScreensList: PropTypes.func.isRequired,
   showProjectsList: PropTypes.bool.isRequired,
   showScreensList: PropTypes.bool.isRequired,
-  urlPart: PropTypes.string.isRequired,
   urlParts: PropTypes.shape({
-    pathItems: PropTypes.arrayOf(PropTypes.string).isRequired,
+    pathItems: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired,
+        link: PropTypes.string,
+        type: PropTypes.string
+      })
+    ).isRequired,
     screen: PropTypes.shape({
       id: PropTypes.string,
-      label: PropTypes.string
-    }),
-    tab: PropTypes.shape({
-      id: PropTypes.string
+      label: PropTypes.string,
+      link: PropTypes.string
     })
   }).isRequired
 }
diff --git a/src/common/Breadcrumbs/BreadcrumbsStep/breadcrumbsStep.scss b/src/common/Breadcrumbs/BreadcrumbsStep/breadcrumbsStep.scss
index 842453d31a..ad4a0a5c5a 100644
--- a/src/common/Breadcrumbs/BreadcrumbsStep/breadcrumbsStep.scss
+++ b/src/common/Breadcrumbs/BreadcrumbsStep/breadcrumbsStep.scss
@@ -4,6 +4,9 @@
   position: relative;
   max-width: 700px;
   color: colors.$topaz;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 
   &:last-child {
     color: colors.$mulledWine;
@@ -20,10 +23,6 @@
   transition: transform 0.2s linear;
   user-select: none;
 
-  &_tumbler {
-    cursor: pointer;
-  }
-
   &_active {
     transform: rotate(90deg);
   }
diff --git a/src/common/Breadcrumbs/breadcrumbs.scss b/src/common/Breadcrumbs/breadcrumbs.scss
index e92be42852..ae1a0a6a81 100644
--- a/src/common/Breadcrumbs/breadcrumbs.scss
+++ b/src/common/Breadcrumbs/breadcrumbs.scss
@@ -1,5 +1,4 @@
 @use 'igz-controls/scss/mixins';
-@use 'igz-controls/scss/colors';
 
 .breadcrumbs {
   @include mixins.resetSpaces;
diff --git a/src/common/Breadcrumbs/breadcrumbs.util.js b/src/common/Breadcrumbs/breadcrumbs.util.js
index f09aa4bbd2..b0cc8e3779 100644
--- a/src/common/Breadcrumbs/breadcrumbs.util.js
+++ b/src/common/Breadcrumbs/breadcrumbs.util.js
@@ -19,115 +19,52 @@ such restriction.
 */
 import {
   ALERTS_PAGE_PATH,
-  FEATURE_SETS_TAB,
-  FEATURE_VECTORS_TAB,
-  FEATURES_TAB,
-  MODEL_ENDPOINTS_TAB,
-  MONITOR_JOBS_TAB,
-  MODELS_TAB,
   MONITOR_ALERTS_PAGE,
-  MONITOR_WORKFLOWS_TAB,
-  PROJECT_MONITOR,
-  PROJECT_QUICK_ACTIONS_PAGE,
-  SCHEDULE_TAB,
-  REAL_TIME_PIPELINES_TAB,
   JOBS_MONITORING_PAGE,
   PROJECTS_PAGE_PATH,
-  MONITORING_APP_PAGE,
-  DOCUMENTS_PAGE,
-  LLM_PROMPTS_PAGE
+  PROJECTS_SETTINGS_PAGE_PATH
 } from '../../constants'
-import { generateNuclioLink } from '../../utils'
 
-export const generateMlrunScreens = params =>
-  params.projectName
-    ? [
-        {
-          label: 'Project monitoring',
-          id: PROJECT_MONITOR
-        },
-        {
-          label: 'Quick actions',
-          id: PROJECT_QUICK_ACTIONS_PAGE,
-          hidden: true
-        },
-        { label: 'Feature store', id: 'feature-store' },
-        { label: 'Datasets', id: 'datasets' },
-        { label: 'Documents', id: DOCUMENTS_PAGE },
-        { label: 'LLM prompts', id: LLM_PROMPTS_PAGE },
-        { label: 'Artifacts', id: 'files' },
-        { label: 'Models', id: 'models' },
-        { label: 'Monitoring app', id: MONITORING_APP_PAGE },
-        { label: 'Jobs and workflows', id: 'jobs' },
-        { label: 'ML functions', id: 'functions' },
-        {
-          label: 'Real-time functions',
-          id: 'Real-time functions',
-          link: generateNuclioLink(`/projects/${params.projectName}/functions`)
-        },
-        {
-          label: 'API gateways',
-          id: 'API gateways',
-          link: generateNuclioLink(`/projects/${params.projectName}/api-gateways`)
-        },
-        {
-          label: 'Alerts',
-          id: ALERTS_PAGE_PATH,
-          linkTo: `/${PROJECTS_PAGE_PATH}/${params.projectName}/${ALERTS_PAGE_PATH}`
-        },
-        {
-          label: 'Settings',
-          id: 'settings'
-        }
-      ]
+import { getLinks } from '../../layout/Navbar/navbar.util'
+
+export const generateMlrunScreens = (projectName, isDemoMode) => {
+  const navbarLinks = getLinks(projectName, isDemoMode)
+
+  const mlrunScreens = navbarLinks.reduce((list, navbarLink) => {
+    if (navbarLink.nestedLinks) {
+      navbarLink.nestedLinks.forEach(nestedScreen => list.push(nestedScreen))
+    } else {
+      list.push(navbarLink)
+    }
+
+    return list
+  }, [])
+
+  mlrunScreens.push(
+    {
+      label: 'Alerts',
+      id: ALERTS_PAGE_PATH,
+      link: `/${PROJECTS_PAGE_PATH}/${projectName}/${ALERTS_PAGE_PATH}`
+    },
+    {
+      label: 'Settings',
+      id: 'settings',
+      link: `/${PROJECTS_PAGE_PATH}/${projectName}/${PROJECTS_SETTINGS_PAGE_PATH}`
+    }
+  )
+
+  return projectName
+    ? mlrunScreens
     : [
         {
           label: 'Alerts monitoring',
           id: MONITOR_ALERTS_PAGE,
-          linkTo: `/${PROJECTS_PAGE_PATH}/*/${MONITOR_ALERTS_PAGE}`
+          link: `/${PROJECTS_PAGE_PATH}/*/${MONITOR_ALERTS_PAGE}`
         },
         {
           label: 'Jobs monitoring',
           id: JOBS_MONITORING_PAGE,
-          linkTo: `/${PROJECTS_PAGE_PATH}/*/${JOBS_MONITORING_PAGE}`
+          link: `/${PROJECTS_PAGE_PATH}/*/${JOBS_MONITORING_PAGE}`
         }
       ]
-
-export const generateTabsList = () => [
-  {
-    label: MONITOR_JOBS_TAB,
-    id: MONITOR_JOBS_TAB
-  },
-  {
-    label: MONITOR_WORKFLOWS_TAB,
-    id: MONITOR_WORKFLOWS_TAB
-  },
-  {
-    label: SCHEDULE_TAB,
-    id: SCHEDULE_TAB
-  },
-  {
-    label: FEATURE_SETS_TAB,
-    id: FEATURE_SETS_TAB
-  },
-  {
-    label: FEATURE_VECTORS_TAB,
-    id: FEATURE_VECTORS_TAB
-  },
-  {
-    label: FEATURES_TAB,
-    id: FEATURES_TAB
-  },
-  {
-    label: REAL_TIME_PIPELINES_TAB,
-    id: REAL_TIME_PIPELINES_TAB
-  },
-  {
-    label: MODEL_ENDPOINTS_TAB,
-    id: MODEL_ENDPOINTS_TAB
-  },
-  {
-    label: MODELS_TAB,
-    id: MODELS_TAB
-  }
-]
+}
diff --git a/src/components/Alerts/Alerts.jsx b/src/components/Alerts/Alerts.jsx
index e322cfd27b..e2bd2bc99b 100644
--- a/src/components/Alerts/Alerts.jsx
+++ b/src/components/Alerts/Alerts.jsx
@@ -142,7 +142,7 @@ const Alerts = () => {
   return (
     <div className="content-wrapper">
       <div className="content__header">
-        <Breadcrumbs />
+        <Breadcrumbs itemName={params.alertName} />
       </div>
       <div className="content">
         <div className="table-container alerts-container">
diff --git a/src/components/ApplicationMetrics/ApplicationMetrics.jsx b/src/components/ApplicationMetrics/ApplicationMetrics.jsx
index dddc4941ab..46cdc2c97b 100644
--- a/src/components/ApplicationMetrics/ApplicationMetrics.jsx
+++ b/src/components/ApplicationMetrics/ApplicationMetrics.jsx
@@ -240,7 +240,7 @@ const ApplicationMetrics = () => {
   return (
     <div className="content-wrapper applications-metrics">
       <div className="content__header">
-        <Breadcrumbs />
+        <Breadcrumbs itemName={params.appName} />
       </div>
       <div className="content">
         <div className="application-metrics-container">
diff --git a/src/components/Artifacts/Artifacts.jsx b/src/components/Artifacts/Artifacts.jsx
index 340350b130..ecf370df88 100644
--- a/src/components/Artifacts/Artifacts.jsx
+++ b/src/components/Artifacts/Artifacts.jsx
@@ -536,6 +536,7 @@ const Artifacts = ({
       paginationConfigArtifactsRef={
         isAllVersions ? paginationConfigArtifactVersionsRef : paginationConfigArtifactsRef
       }
+      params={params}
       ref={{ artifactsRef }}
       requestErrorMessage={requestErrorMessage}
       selectedArtifact={selectedArtifact}
diff --git a/src/components/Artifacts/ArtifactsView.jsx b/src/components/Artifacts/ArtifactsView.jsx
index 86b6e7b8da..741e9868bc 100644
--- a/src/components/Artifacts/ArtifactsView.jsx
+++ b/src/components/Artifacts/ArtifactsView.jsx
@@ -49,6 +49,7 @@ let ArtifactsView = React.forwardRef(
       page,
       pageData,
       paginationConfigArtifactsRef,
+      params,
       requestErrorMessage = '',
       selectedArtifact,
       setSearchArtifactsParams,
@@ -98,7 +99,7 @@ let ArtifactsView = React.forwardRef(
       <>
         <div className="content-wrapper" ref={artifactsRef}>
           <div className="content__header">
-            <Breadcrumbs />
+            <Breadcrumbs itemName={params.artifactName}/>
           </div>
           <div className="content">
             {artifactsStore.loading && <Loader />}
@@ -164,6 +165,7 @@ ArtifactsView.propTypes = {
   page: PropTypes.string.isRequired,
   pageData: PropTypes.object.isRequired,
   paginationConfigArtifactsRef: PropTypes.object.isRequired,
+  params: PropTypes.object.isRequired,
   requestErrorMessage: PropTypes.string,
   selectedArtifact: PropTypes.object.isRequired,
   setSearchArtifactsParams: PropTypes.func.isRequired,
diff --git a/src/components/ConsumerGroupsWrapper/ConsumerGroupsWrapper.jsx b/src/components/ConsumerGroupsWrapper/ConsumerGroupsWrapper.jsx
index d0d73ba9d0..ed17356720 100644
--- a/src/components/ConsumerGroupsWrapper/ConsumerGroupsWrapper.jsx
+++ b/src/components/ConsumerGroupsWrapper/ConsumerGroupsWrapper.jsx
@@ -87,7 +87,7 @@ const ConsumerGroupsWrapper = () => {
   return (
     <div className="page">
       <div className="page-breadcrumbs">
-        <Breadcrumbs />
+        <Breadcrumbs itemName={params.streamName}/>
       </div>
       <div className="page-content">
         <Outlet context={[requestErrorMessage]} />
diff --git a/src/components/FeatureStore/FeatureStore.jsx b/src/components/FeatureStore/FeatureStore.jsx
index 753179f93a..bb98050488 100644
--- a/src/components/FeatureStore/FeatureStore.jsx
+++ b/src/components/FeatureStore/FeatureStore.jsx
@@ -18,7 +18,7 @@ under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
 import React, { useCallback, useState } from 'react'
-import { Outlet } from 'react-router-dom'
+import { Outlet, useParams } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
 
 import Breadcrumbs from '../../common/Breadcrumbs/Breadcrumbs'
@@ -33,6 +33,8 @@ export const FeatureStoreContext = React.createContext({})
 
 const FeatureStore = () => {
   const dispatch = useDispatch()
+  const params = useParams()
+
   const [featureSetsPanelIsOpen, setFeatureSetsPanelIsOpen] = useState(false)
   const [createVectorPopUpIsOpen, setCreateVectorPopUpIsOpen] = useState(false)
   const [confirmData, setConfirmData] = useState(null)
@@ -49,7 +51,7 @@ const FeatureStore = () => {
     <>
       <div className="content-wrapper">
         <div className="content__header">
-          <Breadcrumbs />
+          <Breadcrumbs itemName={params.name}/>
         </div>
         <div className="content">
           <div className={TABLE_CONTAINER}>
diff --git a/src/components/FunctionsPage/Functions.jsx b/src/components/FunctionsPage/Functions.jsx
index 19ebe69555..ab638c4da4 100644
--- a/src/components/FunctionsPage/Functions.jsx
+++ b/src/components/FunctionsPage/Functions.jsx
@@ -743,6 +743,7 @@ const Functions = ({ isAllVersions = false }) => {
       paginationConfigFunctionsRef={
         isAllVersions ? paginationConfigFunctionVersionsRef : paginationConfigFunctionsRef
       }
+      params={params}
       requestErrorMessage={requestErrorMessage}
       selectedFunction={selectedFunction}
       setSearchFunctionsParams={
diff --git a/src/components/FunctionsPage/FunctionsView.jsx b/src/components/FunctionsPage/FunctionsView.jsx
index f058f7abe1..163d72a8aa 100644
--- a/src/components/FunctionsPage/FunctionsView.jsx
+++ b/src/components/FunctionsPage/FunctionsView.jsx
@@ -18,7 +18,6 @@ under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
 import React from 'react'
-import { useParams } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
 import ActionBar from '../ActionBar/ActionBar'
@@ -68,18 +67,17 @@ const FunctionsView = ({
   isDemoMode,
   pageData,
   paginationConfigFunctionsRef,
+  params,
   requestErrorMessage,
   selectedFunction,
   setSearchFunctionsParams,
   tableContent
 }) => {
-  const params = useParams()
-
   return (
     <>
       <div className="content-wrapper">
         <div className="content__header">
-          <Breadcrumbs />
+          <Breadcrumbs itemName={params.funcName} />
         </div>
         <div className="content">
           <div className="table-container">
@@ -228,6 +226,7 @@ FunctionsView.propTypes = {
   isDemoMode: PropTypes.bool.isRequired,
   pageData: PropTypes.object.isRequired,
   paginationConfigFunctionsRef: PropTypes.object.isRequired,
+  params: PropTypes.object.isRequired,
   requestErrorMessage: PropTypes.string.isRequired,
   selectedFunction: PropTypes.object.isRequired,
   setSearchFunctionsParams: PropTypes.func.isRequired,
diff --git a/src/components/FunctionsPageOld/FunctionsViewOld.jsx b/src/components/FunctionsPageOld/FunctionsViewOld.jsx
index d29cb7f2ab..3ccc9e0466 100644
--- a/src/components/FunctionsPageOld/FunctionsViewOld.jsx
+++ b/src/components/FunctionsPageOld/FunctionsViewOld.jsx
@@ -77,7 +77,7 @@ const FunctionsViewOld = ({
     <>
       <div className="content-wrapper">
         <div className="content__header">
-          <Breadcrumbs />
+          <Breadcrumbs itemName={params.funcName}/>
         </div>
         <div className="content">
           <div className="table-container">
diff --git a/src/components/Jobs/Jobs.jsx b/src/components/Jobs/Jobs.jsx
index fbf1fe027f..3cdda4f2c9 100644
--- a/src/components/Jobs/Jobs.jsx
+++ b/src/components/Jobs/Jobs.jsx
@@ -194,7 +194,7 @@ const Jobs = () => {
     <>
       <div className="content-wrapper">
         <div className="content__header">
-          <Breadcrumbs />
+          <Breadcrumbs itemName={params.jobName || params.workflowId} />
         </div>
         {selectedTab && filters && (
           <div className="content">
diff --git a/src/components/ModelsPage/ModelsPage.jsx b/src/components/ModelsPage/ModelsPage.jsx
index d1d2233fed..f4283db3b1 100644
--- a/src/components/ModelsPage/ModelsPage.jsx
+++ b/src/components/ModelsPage/ModelsPage.jsx
@@ -18,7 +18,7 @@ under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
 import React from 'react'
-import { Outlet } from 'react-router-dom'
+import { Outlet, useParams } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 
 import Breadcrumbs from '../../common/Breadcrumbs/Breadcrumbs'
@@ -30,13 +30,16 @@ import { ModelsPageProvider } from './ModelsPage.context'
 import './modelsPage.scss'
 
 const ModelsPage = () => {
+  const params = useParams()
   const artifactsStore = useSelector(store => store.artifactsStore)
 
   return (
     <>
       <div className="content-wrapper">
         <div className="content__header">
-          <Breadcrumbs />
+          <Breadcrumbs
+            itemName={params.modelName || params.artifactName || params.pipelineId || params.name}
+          />
         </div>
         <div className="content">
           {artifactsStore.loading && <Loader />}
diff --git a/src/components/MonitoringApplicationsPage/MonitoringApplicationsPage.jsx b/src/components/MonitoringApplicationsPage/MonitoringApplicationsPage.jsx
index 12e61c9919..825d3b7dd1 100644
--- a/src/components/MonitoringApplicationsPage/MonitoringApplicationsPage.jsx
+++ b/src/components/MonitoringApplicationsPage/MonitoringApplicationsPage.jsx
@@ -137,7 +137,7 @@ const MonitoringApplicationsPage = () => {
   return (
     <div className="content-wrapper">
       <div className="content__header">
-        <Breadcrumbs />
+        <Breadcrumbs itemName={params.name} />
       </div>
       <div className="content monitoring-app-content" ref={contentRef}>
         <div className="content__action-bar-wrapper">
diff --git a/src/components/Project/ProjectMonitorView.jsx b/src/components/Project/ProjectMonitorView.jsx
index dc51ed26ec..275a7d4249 100644
--- a/src/components/Project/ProjectMonitorView.jsx
+++ b/src/components/Project/ProjectMonitorView.jsx
@@ -64,7 +64,7 @@ const ProjectMonitorView = ({
   return (
     <div className="content-wrapper">
       <div className="content__header">
-        <Breadcrumbs />
+        <Breadcrumbs itemName={params.jobName || params.workflowProjectName} />
       </div>
       {project.loading ? (
         <Loader />
diff --git a/src/constants.js b/src/constants.js
index e5f31baa2d..48ef4f28cf 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -84,6 +84,7 @@ export const ITEMS_COUNT_END = 'itemsCountEnd'
 export const PROJECTS_PAGE = 'PROJECTS'
 export const PROJECTS_PAGE_PATH = 'projects'
 export const PROJECTS_SETTINGS_PAGE = 'SETTINGS'
+export const PROJECTS_SETTINGS_PAGE_PATH = 'settings'
 export const PROJECTS_SETTINGS_GENERAL_TAB = 'general'
 export const PROJECTS_SETTINGS_MEMBERS_TAB = 'members'
 export const PROJECTS_SETTINGS_SECRETS_TAB = 'secrets'
@@ -558,3 +559,8 @@ export const RESULT_TYPE = 'result'
 
 export const COUNTERS_GENERAL_MESSAGE =
   'Counters use a caching mechanism, and are not auto-refreshed.'
+
+/*=========== BREADCRUMBS TYPES =============*/
+export const BREADCRUMBS_STEP_PROJECT_TYPE = 'project'
+export const BREADCRUMBS_STEP_SCREEN_TYPE = 'screen'
+export const BREADCRUMBS_STEP_ITEM_TYPE = 'item'
\ No newline at end of file
diff --git a/src/elements/BreadcrumbsDropdown/BreadcrumbsDropdown.jsx b/src/elements/BreadcrumbsDropdown/BreadcrumbsDropdown.jsx
index e71b8b97b6..321b818a09 100644
--- a/src/elements/BreadcrumbsDropdown/BreadcrumbsDropdown.jsx
+++ b/src/elements/BreadcrumbsDropdown/BreadcrumbsDropdown.jsx
@@ -26,29 +26,30 @@ import { Tooltip, TextTooltipTemplate } from 'igz-controls/components'
 
 import SearchIcon from 'igz-controls/images/search.svg?react'
 import CheckmarkIcon from 'igz-controls/images/checkmark.svg?react'
+import HomepageIcon from 'igz-controls/images/navbar/mlrun-project-home.svg?react'
 
 import './breadcrumbsDropdown.scss'
 
 const BreadcrumbsDropdown = forwardRef(
   (
     {
-      link,
+      id = '',
       list = [],
       onClick = () => {},
-      screen = '',
-      searchValue,
+      searchValue = '',
       setSearchValue,
       selectedItem,
-      tab = '',
-      withSearch = false
+      withSearch = false,
+      withAllProjects = false
     },
     ref
   ) => {
     return (
-      <div className="breadcrumbs__dropdown-wrapper" data-testid="breadcrumbs-dropdown">
+      <div className="breadcrumbs__dropdown-wrapper" data-testid={id}>
         {withSearch && (
           <div className="breadcrumbs__dropdown-search" data-testid="breadcrumbs-search">
             <input
+              name="projects-search"
               className="input"
               onChange={event => setSearchValue(event.target.value)}
               placeholder="Type to search"
@@ -61,7 +62,7 @@ const BreadcrumbsDropdown = forwardRef(
         <div className="breadcrumbs__dropdown" ref={ref}>
           {list
             .filter(listItem =>
-              listItem.id.toLocaleLowerCase().startsWith(searchValue.toLocaleLowerCase())
+              listItem.id.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase())
             )
             .map(listItem => {
               const isItemSelected = selectedItem === listItem.id
@@ -71,42 +72,53 @@ const BreadcrumbsDropdown = forwardRef(
                 isItemSelected && 'breadcrumbs__dropdown-item_selected'
               )
 
-              return (
-                !listItem.hidden &&
-                (listItem.link ? (
-                  <a
-                    href={listItem.link}
-                    id={listItem.id}
-                    data-testid={`breadcrumbs-dropdown-item-${listItem.id}`}
-                    key={listItem.id}
-                    className={dropdownItemClassNames}
-                  >
-                    <span>{listItem.label}</span>
-                    {isItemSelected && <CheckmarkIcon className="checkmark" />}
-                  </a>
-                ) : (
-                  <Link
-                    to={
-                      listItem.linkTo ||
-                      `${link}/${listItem.id}${screen ? `/${screen}` : ''}${tab ? `/${tab}` : ''}`
-                    }
-                    onClick={event => {
-                      isItemSelected ? event.preventDefault() : onClick(event)
-                    }}
-                    id={listItem.id}
-                    data-testid={`breadcrumbs-dropdown-item-${listItem.id}`}
-                    key={listItem.id}
-                    className={dropdownItemClassNames}
-                  >
-                    <Tooltip template={<TextTooltipTemplate text={listItem.label} />}>
-                      {listItem.label}
-                    </Tooltip>
-                    {isItemSelected && <CheckmarkIcon className="checkmark" />}
-                  </Link>
-                ))
+              return listItem.externalLink ? (
+                <a
+                  href={listItem.link}
+                  id={listItem.id}
+                  data-testid={`breadcrumbs-dropdown-item-${listItem.id}`}
+                  key={listItem.id}
+                  className={dropdownItemClassNames}
+                >
+                  <span>{listItem.label}</span>
+                  {isItemSelected && <CheckmarkIcon className="checkmark" />}
+                </a>
+              ) : (
+                <Link
+                  to={listItem.link}
+                  onClick={event => {
+                    isItemSelected ? event.preventDefault() : onClick(event)
+                  }}
+                  id={listItem.id}
+                  data-testid={`breadcrumbs-dropdown-item-${listItem.id}`}
+                  key={listItem.id}
+                  className={dropdownItemClassNames}
+                >
+                  <Tooltip template={<TextTooltipTemplate text={listItem.label} />}>
+                    {listItem.label}
+                  </Tooltip>
+                  {isItemSelected && <CheckmarkIcon className="checkmark" />}
+                </Link>
               )
             })}
         </div>
+        {withAllProjects && (
+          <>
+            <div className="navbar__separator"></div>
+            <div className="breadcrumbs__dropdown-all-projects">
+              <Link
+                to="/"
+                id="all-projects"
+                data-testid="breadcrumbs-dropdown-item-all-projects"
+                key="all-projects"
+                className="breadcrumbs__dropdown-item"
+              >
+                <HomepageIcon />
+                <span>All Projects</span>
+              </Link>
+            </div>
+          </>
+        )}
       </div>
     )
   }
@@ -115,15 +127,14 @@ const BreadcrumbsDropdown = forwardRef(
 BreadcrumbsDropdown.displayName = 'BreadcrumbsDropdown'
 
 BreadcrumbsDropdown.propTypes = {
-  link: PropTypes.string.isRequired,
+  id: PropTypes.string,
   list: PropTypes.arrayOf(PropTypes.object).isRequired,
   onClick: PropTypes.func,
-  screen: PropTypes.string,
   searchValue: PropTypes.string.isRequired,
   selectedItem: PropTypes.string.isRequired,
   setSearchValue: PropTypes.func.isRequired,
-  tab: PropTypes.string,
-  withSearch: PropTypes.bool
+  withSearch: PropTypes.bool,
+  withAllProjects: PropTypes.bool
 }
 
 export default BreadcrumbsDropdown
diff --git a/src/elements/BreadcrumbsDropdown/breadcrumbsDropdown.scss b/src/elements/BreadcrumbsDropdown/breadcrumbsDropdown.scss
index dad7cf67ec..20f4168a13 100644
--- a/src/elements/BreadcrumbsDropdown/breadcrumbsDropdown.scss
+++ b/src/elements/BreadcrumbsDropdown/breadcrumbsDropdown.scss
@@ -6,18 +6,20 @@
   max-height: 384px;
   min-width: 220px;
   overflow-y: auto;
+  margin: 10px 0;
 
   &-wrapper {
     position: absolute;
-    top: 35px;
+    top: 40px;
     left: 14px;
     z-index: 7;
     min-width: 130px;
-    padding: 12px 0;
+    padding: 0;
     font-size: 15px;
     line-height: 18px;
     background: colors.$white;
     box-shadow: shadows.$dropdownShadow;
+    border-radius: 8px;
   }
 
   &-item {
@@ -55,8 +57,9 @@
   &-search {
     display: flex;
     align-items: center;
-    margin: 0 9px 4px;
     border-bottom: borders.$dividerBorder;
+    margin: 8px;
+    border-radius: 4px;
 
     .input {
       width: 100%;
@@ -65,4 +68,23 @@
       border: none;
     }
   }
-}
+
+  &-all-projects {
+    margin-top: 5px;
+
+    .breadcrumbs__dropdown-item {
+      justify-content: flex-start;
+    }
+
+    svg {
+      flex: 0 0 20px;
+      width: 20px;
+      height: 20px;
+      margin-right: 5px;
+
+      & * {
+        fill: colors.$topaz;
+      }
+    }
+  }
+}
\ No newline at end of file

From d86cbc869cf2fafdb4490f738ba73621dea8ddfa Mon Sep 17 00:00:00 2001
From: Amit_Noyberg1 <219515702+amit-noy@users.noreply.github.com>
Date: Wed, 20 May 2026 08:42:23 +0300
Subject: [PATCH 2/4] fix breadcrumbs dropdown not displaying

---
 .../Breadcrumbs/BreadcrumbsStep/BreadcrumbsStep.jsx      | 2 +-
 .../Breadcrumbs/BreadcrumbsStep/breadcrumbsStep.scss     | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/common/Breadcrumbs/BreadcrumbsStep/BreadcrumbsStep.jsx b/src/common/Breadcrumbs/BreadcrumbsStep/BreadcrumbsStep.jsx
index e4cad6aeeb..947ab1bafb 100644
--- a/src/common/Breadcrumbs/BreadcrumbsStep/BreadcrumbsStep.jsx
+++ b/src/common/Breadcrumbs/BreadcrumbsStep/BreadcrumbsStep.jsx
@@ -102,7 +102,7 @@ const BreadcrumbsStep = React.forwardRef(
     }, [params.projectName, searchValue])
 
     const scrollScreenOptionToView = useCallback(() => {
-      scrollToElement(screenListRef, `#${urlParts.screen.id}`, searchValue)
+      scrollToElement(screenListRef, `#${urlParts.screen?.id}`, searchValue)
     }, [searchValue, urlParts.screen?.id])
 
     useEffect(() => {
diff --git a/src/common/Breadcrumbs/BreadcrumbsStep/breadcrumbsStep.scss b/src/common/Breadcrumbs/BreadcrumbsStep/breadcrumbsStep.scss
index ad4a0a5c5a..bd0e4f1ee8 100644
--- a/src/common/Breadcrumbs/BreadcrumbsStep/breadcrumbsStep.scss
+++ b/src/common/Breadcrumbs/BreadcrumbsStep/breadcrumbsStep.scss
@@ -4,9 +4,12 @@
   position: relative;
   max-width: 700px;
   color: colors.$topaz;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+
+  &:not(:has(.breadcrumbs__separator)) {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 
   &:last-child {
     color: colors.$mulledWine;

From b5b78f3abecada94d1b82cd108698a6a4ebba15d Mon Sep 17 00:00:00 2001
From: Amit_Noyberg1 <219515702+amit-noy@users.noreply.github.com>
Date: Wed, 20 May 2026 09:05:17 +0300
Subject: [PATCH 3/4] Remove "All Projects" link from breadcrumbs project
 dropdown

---
 .../BreadcrumbsStep/BreadcrumbsStep.jsx       |  1 -
 .../BreadcrumbsDropdown.jsx                   | 20 -------------------
 .../breadcrumbsDropdown.scss                  | 18 -----------------
 3 files changed, 39 deletions(-)

diff --git a/src/common/Breadcrumbs/BreadcrumbsStep/BreadcrumbsStep.jsx b/src/common/Breadcrumbs/BreadcrumbsStep/BreadcrumbsStep.jsx
index 947ab1bafb..70e09e3fd3 100644
--- a/src/common/Breadcrumbs/BreadcrumbsStep/BreadcrumbsStep.jsx
+++ b/src/common/Breadcrumbs/BreadcrumbsStep/BreadcrumbsStep.jsx
@@ -220,7 +220,6 @@ const BreadcrumbsStep = React.forwardRef(
                 setSearchValue={setSearchValue}
                 urlParts={urlParts}
                 withSearch
-                withAllProjects
               />
             </>
           )}
diff --git a/src/elements/BreadcrumbsDropdown/BreadcrumbsDropdown.jsx b/src/elements/BreadcrumbsDropdown/BreadcrumbsDropdown.jsx
index 321b818a09..bbbebe99e0 100644
--- a/src/elements/BreadcrumbsDropdown/BreadcrumbsDropdown.jsx
+++ b/src/elements/BreadcrumbsDropdown/BreadcrumbsDropdown.jsx
@@ -26,7 +26,6 @@ import { Tooltip, TextTooltipTemplate } from 'igz-controls/components'
 
 import SearchIcon from 'igz-controls/images/search.svg?react'
 import CheckmarkIcon from 'igz-controls/images/checkmark.svg?react'
-import HomepageIcon from 'igz-controls/images/navbar/mlrun-project-home.svg?react'
 
 import './breadcrumbsDropdown.scss'
 
@@ -40,7 +39,6 @@ const BreadcrumbsDropdown = forwardRef(
       setSearchValue,
       selectedItem,
       withSearch = false,
-      withAllProjects = false
     },
     ref
   ) => {
@@ -102,23 +100,6 @@ const BreadcrumbsDropdown = forwardRef(
               )
             })}
         </div>
-        {withAllProjects && (
-          <>
-            <div className="navbar__separator"></div>
-            <div className="breadcrumbs__dropdown-all-projects">
-              <Link
-                to="/"
-                id="all-projects"
-                data-testid="breadcrumbs-dropdown-item-all-projects"
-                key="all-projects"
-                className="breadcrumbs__dropdown-item"
-              >
-                <HomepageIcon />
-                <span>All Projects</span>
-              </Link>
-            </div>
-          </>
-        )}
       </div>
     )
   }
@@ -134,7 +115,6 @@ BreadcrumbsDropdown.propTypes = {
   selectedItem: PropTypes.string.isRequired,
   setSearchValue: PropTypes.func.isRequired,
   withSearch: PropTypes.bool,
-  withAllProjects: PropTypes.bool
 }
 
 export default BreadcrumbsDropdown
diff --git a/src/elements/BreadcrumbsDropdown/breadcrumbsDropdown.scss b/src/elements/BreadcrumbsDropdown/breadcrumbsDropdown.scss
index 20f4168a13..b4159bc5d8 100644
--- a/src/elements/BreadcrumbsDropdown/breadcrumbsDropdown.scss
+++ b/src/elements/BreadcrumbsDropdown/breadcrumbsDropdown.scss
@@ -69,22 +69,4 @@
     }
   }
 
-  &-all-projects {
-    margin-top: 5px;
-
-    .breadcrumbs__dropdown-item {
-      justify-content: flex-start;
-    }
-
-    svg {
-      flex: 0 0 20px;
-      width: 20px;
-      height: 20px;
-      margin-right: 5px;
-
-      & * {
-        fill: colors.$topaz;
-      }
-    }
-  }
 }
\ No newline at end of file

From e050b9ad6f419de4c739c80064950b90179e5bd2 Mon Sep 17 00:00:00 2001
From: Amit_Noyberg1 <219515702+amit-noy@users.noreply.github.com>
Date: Wed, 20 May 2026 10:45:12 +0300
Subject: [PATCH 4/4] formatting

---
 src/components/Artifacts/ArtifactsView.jsx                    | 2 +-
 .../ConsumerGroupsWrapper/ConsumerGroupsWrapper.jsx           | 2 +-
 src/components/FeatureStore/FeatureStore.jsx                  | 2 +-
 src/components/FunctionsPageOld/FunctionsViewOld.jsx          | 2 +-
 src/constants.js                                              | 2 +-
 src/elements/BreadcrumbsDropdown/BreadcrumbsDropdown.jsx      | 4 ++--
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Artifacts/ArtifactsView.jsx b/src/components/Artifacts/ArtifactsView.jsx
index 741e9868bc..6ff07dc370 100644
--- a/src/components/Artifacts/ArtifactsView.jsx
+++ b/src/components/Artifacts/ArtifactsView.jsx
@@ -99,7 +99,7 @@ let ArtifactsView = React.forwardRef(
       <>
         <div className="content-wrapper" ref={artifactsRef}>
           <div className="content__header">
-            <Breadcrumbs itemName={params.artifactName}/>
+            <Breadcrumbs itemName={params.artifactName} />
           </div>
           <div className="content">
             {artifactsStore.loading && <Loader />}
diff --git a/src/components/ConsumerGroupsWrapper/ConsumerGroupsWrapper.jsx b/src/components/ConsumerGroupsWrapper/ConsumerGroupsWrapper.jsx
index ed17356720..8f084f2463 100644
--- a/src/components/ConsumerGroupsWrapper/ConsumerGroupsWrapper.jsx
+++ b/src/components/ConsumerGroupsWrapper/ConsumerGroupsWrapper.jsx
@@ -87,7 +87,7 @@ const ConsumerGroupsWrapper = () => {
   return (
     <div className="page">
       <div className="page-breadcrumbs">
-        <Breadcrumbs itemName={params.streamName}/>
+        <Breadcrumbs itemName={params.streamName} />
       </div>
       <div className="page-content">
         <Outlet context={[requestErrorMessage]} />
diff --git a/src/components/FeatureStore/FeatureStore.jsx b/src/components/FeatureStore/FeatureStore.jsx
index bb98050488..32bd29e910 100644
--- a/src/components/FeatureStore/FeatureStore.jsx
+++ b/src/components/FeatureStore/FeatureStore.jsx
@@ -51,7 +51,7 @@ const FeatureStore = () => {
     <>
       <div className="content-wrapper">
         <div className="content__header">
-          <Breadcrumbs itemName={params.name}/>
+          <Breadcrumbs itemName={params.name} />
         </div>
         <div className="content">
           <div className={TABLE_CONTAINER}>
diff --git a/src/components/FunctionsPageOld/FunctionsViewOld.jsx b/src/components/FunctionsPageOld/FunctionsViewOld.jsx
index 3ccc9e0466..aefc493a39 100644
--- a/src/components/FunctionsPageOld/FunctionsViewOld.jsx
+++ b/src/components/FunctionsPageOld/FunctionsViewOld.jsx
@@ -77,7 +77,7 @@ const FunctionsViewOld = ({
     <>
       <div className="content-wrapper">
         <div className="content__header">
-          <Breadcrumbs itemName={params.funcName}/>
+          <Breadcrumbs itemName={params.funcName} />
         </div>
         <div className="content">
           <div className="table-container">
diff --git a/src/constants.js b/src/constants.js
index 48ef4f28cf..04ad4506db 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -563,4 +563,4 @@ export const COUNTERS_GENERAL_MESSAGE =
 /*=========== BREADCRUMBS TYPES =============*/
 export const BREADCRUMBS_STEP_PROJECT_TYPE = 'project'
 export const BREADCRUMBS_STEP_SCREEN_TYPE = 'screen'
-export const BREADCRUMBS_STEP_ITEM_TYPE = 'item'
\ No newline at end of file
+export const BREADCRUMBS_STEP_ITEM_TYPE = 'item'
diff --git a/src/elements/BreadcrumbsDropdown/BreadcrumbsDropdown.jsx b/src/elements/BreadcrumbsDropdown/BreadcrumbsDropdown.jsx
index bbbebe99e0..6f20e1b146 100644
--- a/src/elements/BreadcrumbsDropdown/BreadcrumbsDropdown.jsx
+++ b/src/elements/BreadcrumbsDropdown/BreadcrumbsDropdown.jsx
@@ -38,7 +38,7 @@ const BreadcrumbsDropdown = forwardRef(
       searchValue = '',
       setSearchValue,
       selectedItem,
-      withSearch = false,
+      withSearch = false
     },
     ref
   ) => {
@@ -114,7 +114,7 @@ BreadcrumbsDropdown.propTypes = {
   searchValue: PropTypes.string.isRequired,
   selectedItem: PropTypes.string.isRequired,
   setSearchValue: PropTypes.func.isRequired,
-  withSearch: PropTypes.bool,
+  withSearch: PropTypes.bool
 }
 
 export default BreadcrumbsDropdown