From 4114234714e8dac6b59e19939f6c2dfa06b920e2 Mon Sep 17 00:00:00 2001
From: OverDsh <overdshdev@gmail.com>
Date: Mon, 6 Apr 2026 11:01:58 +0200
Subject: [PATCH 1/3] chore: install breadcrumb ui component

---
 src/components/ui/breadcrumb.tsx | 109 +++++++++++++++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 src/components/ui/breadcrumb.tsx

diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..8757be9
--- /dev/null
+++ b/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from "react"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/src/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

From 9aa1fbc735348715ce1042bacd8db77a0ca87c89 Mon Sep 17 00:00:00 2001
From: OverDsh <overdshdev@gmail.com>
Date: Mon, 6 Apr 2026 11:57:00 +0200
Subject: [PATCH 2/3] feat: add breadcrumbs to the dashboard navbar with
 switcher dropdowns

---
 .../dashboard/components/DashboardNavbar.tsx  | 148 ++++++++++++++++--
 1 file changed, 137 insertions(+), 11 deletions(-)

diff --git a/src/app/dashboard/components/DashboardNavbar.tsx b/src/app/dashboard/components/DashboardNavbar.tsx
index 07dd719..464bd41 100644
--- a/src/app/dashboard/components/DashboardNavbar.tsx
+++ b/src/app/dashboard/components/DashboardNavbar.tsx
@@ -1,24 +1,150 @@
+"use client";
 import Navbar from "@/src/components/Navbar";
 import Link from "next/link";
 import Image from "next/image";
 import UserDropdown from "@/src/components/Navbar/UserDropdown";
 import { SidebarTrigger } from "@/src/components/ui/sidebar";
+import { useTeam, useTeams } from "@/src/hooks/useTeam";
+import { useProject, useProjects } from "@/src/hooks/useProject";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/src/components/ui/breadcrumb";
+import { Box, Building2, Check, ChevronsUpDown } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/src/components/ui/dropdown-menu";
+import { Button } from "@/src/components/ui/button";
+
+interface ItemDropdownProps<T> {
+  label: string;
+  items: T[] | undefined;
+  activeItem: T | undefined;
+  getLabel: (item: T) => string;
+  getHref: (item: T) => string;
+}
+function ItemDropdown<T extends { id: string | number }>({
+  label,
+  items,
+  activeItem,
+  getLabel,
+  getHref,
+}: ItemDropdownProps<T>) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant={"ghost"} className="size-7 m-0">
+          <ChevronsUpDown className="h-3 w-3" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>{label}</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          {items?.map((t) => (
+            <DropdownMenuItem key={t.id} asChild>
+              <Link href={getHref(t)} className={activeItem?.id == t.id ? "bg-accent" : ""}>
+                {getLabel(t)}
+                {t.id == activeItem?.id && <Check />}
+              </Link>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
 
 export default function DashboardNavbar() {
+  const { data: teams, isLoading: isTeamsLoading } = useTeams();
+  const { data: team, isLoading: isTeamLoading } = useTeam();
+  const { data: projects, isLoading: isProjectsLoading } = useProjects();
+  const { data: project, isLoading: isProjectLoading } = useProject();
+
   return (
     <Navbar className="h-14">
       <div className="w-full flex justify-between items-center px-2">
-        <div className="flex items-center gap-2">
-          <SidebarTrigger className="md:hidden" />
-          <Link href={"/dashboard"}>
-            <Image
-              src={"/brand/logo.svg"}
-              width={60}
-              height={60}
-              alt="Logo"
-              className="invert dark:invert-0"
-            />
-          </Link>
+        <div className="flex items-center gap-2 flex-1 min-w-0">
+          <SidebarTrigger className="md:hidden shrink-0" />
+          <Breadcrumb className="flex-1 min-w-0 relative">
+            <BreadcrumbList className="flex flex-nowrap items-center overflow-x-auto overflow-y-hidden no-scrollbar mr-3 mask-gradient">
+              <BreadcrumbItem className="shrink-0">
+                <Link href={"/dashboard"}>
+                  <Image
+                    src={"/brand/logo.svg"}
+                    width={60}
+                    height={60}
+                    alt="Logo"
+                    className="invert dark:invert-0"
+                  />
+                </Link>
+              </BreadcrumbItem>
+              {team && (
+                <>
+                  <div className="flex items-center gap-2.5 animate-in fade-in slide-in-from-left-2 duration-500">
+                    <BreadcrumbSeparator />
+                    <div className="flex gap-1 items-center">
+                      <BreadcrumbItem>
+                        <BreadcrumbLink asChild>
+                          <Link
+                            href={`/dashboard/${team.slug}`}
+                            className="flex gap-1 items-center"
+                          >
+                            <Building2 className="max-h-4" />
+                            <span className="truncate">{team.displayName}</span>
+                          </Link>
+                        </BreadcrumbLink>
+                      </BreadcrumbItem>
+                      <ItemDropdown
+                        label="Switch Team"
+                        items={teams}
+                        activeItem={team}
+                        getLabel={(t) => t.displayName}
+                        getHref={(t) => `/dashboard/${t.slug}`}
+                      />
+                    </div>
+                  </div>
+                </>
+              )}
+              {team && project && (
+                <>
+                  <div className="flex items-center gap-2.5 animate-in fade-in slide-in-from-left-2 duration-500">
+                    <BreadcrumbSeparator />
+                    <div className="flex gap-1 items-center">
+                      <BreadcrumbItem>
+                        <BreadcrumbLink asChild>
+                          <Link
+                            href={`/dashboard/${team.slug}/projects/${project.slug}`}
+                            className="flex gap-1 items-center"
+                          >
+                            <Box className="max-h-4" />
+                            <span className="truncate">{project.name}</span>
+                          </Link>
+                        </BreadcrumbLink>
+                      </BreadcrumbItem>
+                      <ItemDropdown
+                        label="Switch Project"
+                        items={projects}
+                        activeItem={project}
+                        getLabel={(p) => p.name}
+                        getHref={(p) => `/dashboard/${team.slug}/projects/${p.slug}`}
+                      />
+                    </div>
+                  </div>
+                </>
+              )}
+            </BreadcrumbList>
+            <div className="pointer-events-none absolute inset-y-0 right-0 w-9 bg-linear-to-l from-background to-transparent max-h-5/6" />
+          </Breadcrumb>
         </div>
         <UserDropdown triggerProps={{ className: "rounded-full" }} />
       </div>

From 70df7a58e29b69a56ab82d45395104e28808d206 Mon Sep 17 00:00:00 2001
From: OverDsh <overdshdev@gmail.com>
Date: Mon, 6 Apr 2026 11:59:28 +0200
Subject: [PATCH 3/3] feat: add contextual switching

---
 src/app/dashboard/components/DashboardNavbar.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/app/dashboard/components/DashboardNavbar.tsx b/src/app/dashboard/components/DashboardNavbar.tsx
index 464bd41..da0f365 100644
--- a/src/app/dashboard/components/DashboardNavbar.tsx
+++ b/src/app/dashboard/components/DashboardNavbar.tsx
@@ -24,6 +24,7 @@ import {
   DropdownMenuTrigger,
 } from "@/src/components/ui/dropdown-menu";
 import { Button } from "@/src/components/ui/button";
+import { usePathname } from "next/navigation";
 
 interface ItemDropdownProps<T> {
   label: string;
@@ -65,11 +66,15 @@ function ItemDropdown<T extends { id: string | number }>({
 }
 
 export default function DashboardNavbar() {
+  const pathname = usePathname();
   const { data: teams, isLoading: isTeamsLoading } = useTeams();
   const { data: team, isLoading: isTeamLoading } = useTeam();
   const { data: projects, isLoading: isProjectsLoading } = useProjects();
   const { data: project, isLoading: isProjectLoading } = useProject();
 
+  const afterTeamPath = pathname.split(`/dashboard/${team?.slug}`)[1];
+  const afterProjectPath = pathname.split(`/dashboard/${team?.slug}/projects/${project?.slug}`)[1];
+
   return (
     <Navbar className="h-14">
       <div className="w-full flex justify-between items-center px-2">
@@ -109,7 +114,9 @@ export default function DashboardNavbar() {
                         items={teams}
                         activeItem={team}
                         getLabel={(t) => t.displayName}
-                        getHref={(t) => `/dashboard/${t.slug}`}
+                        getHref={(t) =>
+                          project ? `/dashboard/${t.slug}` : `/dashboard/${t.slug}/${afterTeamPath}`
+                        }
                       />
                     </div>
                   </div>
@@ -136,14 +143,16 @@ export default function DashboardNavbar() {
                         items={projects}
                         activeItem={project}
                         getLabel={(p) => p.name}
-                        getHref={(p) => `/dashboard/${team.slug}/projects/${p.slug}`}
+                        getHref={(p) =>
+                          `/dashboard/${team.slug}/projects/${p.slug}/${afterProjectPath}`
+                        }
                       />
                     </div>
                   </div>
                 </>
               )}
             </BreadcrumbList>
-            <div className="pointer-events-none absolute inset-y-0 right-0 w-9 bg-linear-to-l from-background to-transparent max-h-5/6" />
+            <div className="pointer-events-none absolute inset-y-0 right-0 w-12 bg-linear-to-l from-background to-transparent max-h-5/6" />
           </Breadcrumb>
         </div>
         <UserDropdown triggerProps={{ className: "rounded-full" }} />