From fbd7f53208ef669ee1f336e83f02f6ee346cb888 Mon Sep 17 00:00:00 2001
From: gbubemismith <gsmithwalter@gmail.com>
Date: Fri, 4 Sep 2026 18:50:50 -0400
Subject: [PATCH] [PM-43083][PM-43122] fix: show header breadcrumbs and
 identity tiles for every vault scope

Give the scoped vault header the right identity on every destination, across web
and desktop: a title with an icon tile for All items / My vault, and a breadcrumb
trail for organization vaults (All vault items, My items, shared folders).

Fixes the blank "My items" header under the organization data-ownership policy
(PM-43083, web) and the desktop screens that errantly titled themselves "Vault"
instead of their scope (PM-43122).

The scope-to-title and scope-to-tile logic is shared through libs/vault
(vaultScopeTitle, vaultScopeHeaderTile) so both clients derive the header the same
way. bit-header gains a title-icon slot to host the tile in its heading.
---
 .../header/desktop-header.component.html      |   4 +
 .../vault/app/vault-v3/vault.component.html   |  15 +-
 .../src/vault/app/vault-v3/vault.component.ts |  36 ++++
 .../layouts/header/web-header.component.html  |   4 +
 .../vault-next.component.html                 |  17 +-
 .../vault-next.component.spec.ts              |  21 ++-
 .../individual-vault/vault-next.component.ts  |  39 ++---
 .../src/header/header.component.html          |  15 +-
 libs/components/src/header/header.mdx         |  28 ++-
 libs/components/src/header/header.stories.ts  |  14 ++
 .../vault-breadcrumbs.component.html          |  21 +++
 .../vault-breadcrumbs.component.spec.ts       | 163 ++++++++++++++++++
 .../vault-breadcrumbs.component.ts}           |  86 +++++++--
 ...ault-collection-breadcrumbs.component.html |  23 ---
 .../vault-nav-section.component.html          |   7 +-
 .../vault-nav-section.component.ts            |   4 +-
 libs/vault/src/index.ts                       |   2 +-
 libs/vault/src/models/vault-icon-tile.spec.ts |  62 ++++++-
 libs/vault/src/models/vault-icon-tile.ts      |  39 ++++-
 libs/vault/src/models/vault-scope.ts          |  32 ++++
 20 files changed, 544 insertions(+), 88 deletions(-)
 create mode 100644 libs/vault/src/components/vault-breadcrumbs/vault-breadcrumbs.component.html
 create mode 100644 libs/vault/src/components/vault-breadcrumbs/vault-breadcrumbs.component.spec.ts
 rename libs/vault/src/components/{vault-collection-breadcrumbs/vault-collection-breadcrumbs.component.ts => vault-breadcrumbs/vault-breadcrumbs.component.ts} (60%)
 delete mode 100644 libs/vault/src/components/vault-collection-breadcrumbs/vault-collection-breadcrumbs.component.html

diff --git a/apps/desktop/src/app/layout/header/desktop-header.component.html b/apps/desktop/src/app/layout/header/desktop-header.component.html
index 882bae9cdba3..0eb19e1fb8ec 100644
--- a/apps/desktop/src/app/layout/header/desktop-header.component.html
+++ b/apps/desktop/src/app/layout/header/desktop-header.component.html
@@ -1,4 +1,8 @@
 <bit-header [title]="resolvedTitle()" [icon]="icon()">
+  <ng-container slot="title-icon">
+    <ng-content select="[slot=title-icon]" />
+  </ng-container>
+
   <ng-container slot="breadcrumbs">
     <ng-content select="[slot=breadcrumbs]" />
   </ng-container>
diff --git a/apps/desktop/src/vault/app/vault-v3/vault.component.html b/apps/desktop/src/vault/app/vault-v3/vault.component.html
index a2d5c6cc3950..84349f655270 100644
--- a/apps/desktop/src/vault/app/vault-v3/vault.component.html
+++ b/apps/desktop/src/vault/app/vault-v3/vault.component.html
@@ -4,7 +4,20 @@
 >
   <div [ngClass]="vfo1Foundation() ? 'tw-pt-6 tw-px-8' : 'tw-pt-6 tw-px-6'">
     <vault-organization-user-notifications></vault-organization-user-notifications>
-    <app-header>
+    <app-header [title]="title()">
+      @if (organizationScoped()) {
+        <vault-breadcrumbs slot="breadcrumbs" [scope]="vaultScope()" />
+      } @else if (headerTile(); as tile) {
+        <bit-icon-tile
+          slot="title-icon"
+          [icon]="tile.icon"
+          [variant]="tile.variant ?? 'primary'"
+          [color]="tile.color"
+          [emphasis]="tile.emphasis ?? 'subtle'"
+          size="sm"
+          aria-hidden="true"
+        />
+      }
       @if (!vfo1Foundation()) {
         <vault-new-cipher-menu
           [canCreateCipher]="(canCreateCipher$ | async) ?? true"
diff --git a/apps/desktop/src/vault/app/vault-v3/vault.component.ts b/apps/desktop/src/vault/app/vault-v3/vault.component.ts
index 84d8a70d1abf..07cbb7363400 100644
--- a/apps/desktop/src/vault/app/vault-v3/vault.component.ts
+++ b/apps/desktop/src/vault/app/vault-v3/vault.component.ts
@@ -86,6 +86,7 @@ import {
   ToastService,
   SearchModule,
   AutofocusDirective,
+  IconTileComponent,
 } from "@bitwarden/components";
 import {
   AddEditFolderDialogComponent,
@@ -126,7 +127,10 @@ import {
   resolveVaultScope,
   scopedCollectionSegment,
   SharedFolderCardGridComponent,
+  VaultBreadcrumbsComponent,
   VaultNavService,
+  vaultScopeHeaderTile,
+  vaultScopeTitle,
   VaultScopeType,
 } from "@bitwarden/vault";
 
@@ -169,6 +173,8 @@ type EmptyStateMap = Record<EmptyStateType, EmptyStateItem>;
     VaultOrganizationUserNotificationsComponent,
     AutofocusDirective,
     SharedFolderCardGridComponent,
+    VaultBreadcrumbsComponent,
+    IconTileComponent,
   ],
   providers: [
     { provide: VaultItemsTransferService, useClass: DefaultVaultItemsTransferService },
@@ -322,6 +328,36 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
     }),
   );
 
+  private readonly vaultNav$ = this.userId$.pipe(
+    switchMap((userId) => this.vaultNavService.viewModel$(userId)),
+  );
+
+  /** The scope's page title under VFO1; unset otherwise so the header keeps its route title. */
+  protected readonly title = toSignal(
+    combineLatest([this.vfo1Foundation$, this.vaultScope$, this.selectedOrganization$]).pipe(
+      map(([vfo1Foundation, scope, organization]) =>
+        vfo1Foundation ? vaultScopeTitle(scope, this.i18nService, organization?.name) : undefined,
+      ),
+    ),
+  );
+
+  protected readonly headerTile = toSignal(
+    combineLatest([this.vfo1Foundation$, this.vaultScope$, this.vaultNav$]).pipe(
+      map(([vfo1Foundation, scope, nav]) =>
+        vfo1Foundation ? vaultScopeHeaderTile(scope, nav) : undefined,
+      ),
+    ),
+  );
+
+  protected readonly organizationScoped = toSignal(
+    combineLatest([this.vfo1Foundation$, this.vaultScope$]).pipe(
+      map(
+        ([vfo1Foundation, scope]) => vfo1Foundation && scope.type === VaultScopeType.Organization,
+      ),
+    ),
+    { initialValue: false },
+  );
+
   protected readonly showAddCipherBtn$ = combineLatest([
     this.vfo1Foundation$,
     this.vaultScope$,
diff --git a/apps/web/src/app/layouts/header/web-header.component.html b/apps/web/src/app/layouts/header/web-header.component.html
index 0657c73ab629..9d9223c9bead 100644
--- a/apps/web/src/app/layouts/header/web-header.component.html
+++ b/apps/web/src/app/layouts/header/web-header.component.html
@@ -1,6 +1,10 @@
 @let routeData = routeData$ | async;
 @if (routeData) {
   <bit-header [title]="title() || (routeData.titleId | i18n)" [icon]="icon()">
+    <ng-container slot="title-icon">
+      <ng-content select="[slot=title-icon]"></ng-content>
+    </ng-container>
+
     <ng-container slot="breadcrumbs">
       <ng-content select="[slot=breadcrumbs]"></ng-content>
     </ng-container>
diff --git a/apps/web/src/app/vault/individual-vault/vault-next.component.html b/apps/web/src/app/vault/individual-vault/vault-next.component.html
index 1bd3dd5c4e4e..6b2d18b5579e 100644
--- a/apps/web/src/app/vault/individual-vault/vault-next.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault-next.component.html
@@ -1,9 +1,16 @@
 <app-header [title]="title()">
-  @if (collectionSelected()) {
-    <vault-collection-breadcrumbs
-      slot="breadcrumbs"
-      [scope]="parsedVaultScope()"
-    ></vault-collection-breadcrumbs>
+  @if (organizationScoped()) {
+    <vault-breadcrumbs slot="breadcrumbs" [scope]="parsedVaultScope()"></vault-breadcrumbs>
+  } @else if (headerTile(); as tile) {
+    <bit-icon-tile
+      slot="title-icon"
+      [icon]="tile.icon"
+      [variant]="tile.variant ?? 'primary'"
+      [color]="tile.color"
+      [emphasis]="tile.emphasis ?? 'subtle'"
+      size="sm"
+      aria-hidden="true"
+    />
   }
 </app-header>
 
diff --git a/apps/web/src/app/vault/individual-vault/vault-next.component.spec.ts b/apps/web/src/app/vault/individual-vault/vault-next.component.spec.ts
index 2411d457f769..6d831f23c55e 100644
--- a/apps/web/src/app/vault/individual-vault/vault-next.component.spec.ts
+++ b/apps/web/src/app/vault/individual-vault/vault-next.component.spec.ts
@@ -356,9 +356,9 @@ describe("VaultNextComponent", () => {
         expect(organizationIds()).toEqual([organizationId, otherOrganizationId]);
       });
 
-      it("leaves the search index unscoped and the header on its route title", () => {
+      it("leaves the search index unscoped and titles the header All items", () => {
         expect(component().scopedOrganizationId()).toBeUndefined();
-        expect(component().title()).toBeUndefined();
+        expect(component().title()).toBe("allItems");
       });
 
       it("offers Import and New item", () => {
@@ -390,9 +390,9 @@ describe("VaultNextComponent", () => {
           fixture.detectChanges();
         });
 
-        it("stays on All items, with the header on its route title", () => {
+        it("stays on All items, titling the header All items", () => {
           expect(component().vaultScope()).toEqual({ type: "allItems" });
-          expect(component().title()).toBeUndefined();
+          expect(component().title()).toBe("allItems");
         });
       });
     });
@@ -489,6 +489,19 @@ describe("VaultNextComponent", () => {
       it("titles the header with the organization name", () => {
         expect(component().title()).toBe("Acme corporation");
       });
+
+      it("shows breadcrumbs rather than a header tile", () => {
+        expect(component().organizationScoped()).toBe(true);
+        expect(component().headerTile()).toBeUndefined();
+      });
+    });
+
+    describe("scoped to an organization's My items", () => {
+      beforeEach(() => scopeTo(organizationId, MY_ITEMS_ROUTE));
+
+      it("counts as an organization scope, so it shows breadcrumbs", () => {
+        expect(component().organizationScoped()).toBe(true);
+      });
     });
 
     it("falls back to every active item when the segment names no destination", () => {
diff --git a/apps/web/src/app/vault/individual-vault/vault-next.component.ts b/apps/web/src/app/vault/individual-vault/vault-next.component.ts
index 2754416e4760..d941f9725466 100644
--- a/apps/web/src/app/vault/individual-vault/vault-next.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault-next.component.ts
@@ -15,7 +15,7 @@ import { CipherType } from "@bitwarden/common/vault/enums";
 import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
 import { CipherViewLike } from "@bitwarden/common/vault/utils/cipher-view-like-utils";
 import { filterOutNullish } from "@bitwarden/common/vault/utils/observable-utilities";
-import { ButtonModule, DialogService } from "@bitwarden/components";
+import { ButtonModule, DialogService, IconTileComponent } from "@bitwarden/components";
 import { PolicyType } from "@bitwarden/sdk-internal";
 import { I18nPipe, safeProvider } from "@bitwarden/ui-common";
 import {
@@ -28,7 +28,7 @@ import {
   NewCipherMenuComponent,
   SharedFolderCardGridComponent,
   VaultCopyButtonsService,
-  VaultCollectionBreadcrumbsComponent,
+  VaultBreadcrumbsComponent,
   VaultItemsTableComponent,
   VaultItemsTableCopyPresentation,
   VaultItemsTableRowAction,
@@ -37,11 +37,12 @@ import {
   ALL_ITEMS_SCOPE,
   cipherInScope,
   collectionInScope,
-  MY_ITEMS_ROUTE,
   organizationInScope,
   parseVaultScope,
   resolveVaultScope,
   scopedCollectionSegment,
+  vaultScopeHeaderTile,
+  vaultScopeTitle,
   VaultScopeType,
 } from "@bitwarden/vault";
 
@@ -75,7 +76,8 @@ import { VaultOnboardingComponent } from "./vault-onboarding/vault-onboarding.co
     HeaderModule,
     NewCipherMenuComponent,
     VaultBannersComponent,
-    VaultCollectionBreadcrumbsComponent,
+    VaultBreadcrumbsComponent,
+    IconTileComponent,
     VaultItemsTableComponent,
     VaultOnboardingComponent,
     VaultOrganizationUserNotificationsComponent,
@@ -132,10 +134,13 @@ export class VaultNextComponent {
     () => parseVaultScope(this.vaultIdParam(), this.collectionSegment()) ?? ALL_ITEMS_SCOPE,
   );
 
-  protected readonly collectionSelected = computed(() => {
-    const seg = this.collectionSegment();
-    return seg != null && seg !== MY_ITEMS_ROUTE;
-  });
+  protected readonly organizationScoped = computed(
+    () => this.parsedVaultScope().type === VaultScopeType.Organization,
+  );
+
+  protected readonly headerTile = computed(() =>
+    vaultScopeHeaderTile(this.vaultScope(), this.vaultNav()),
+  );
 
   /**
    * Every item the user can see, in every state. Which of trashed, archived, and active items a
@@ -241,21 +246,9 @@ export class VaultNextComponent {
     return type !== VaultScopeType.Trash && type !== VaultScopeType.Archive;
   });
 
-  protected readonly title = computed(() => {
-    const scope = this.vaultScope();
-    switch (scope.type) {
-      case VaultScopeType.MyVault:
-        return this.i18nService.t("myVault");
-      case VaultScopeType.Organization:
-        return this.scopedOrganizations()[0]?.name;
-      case VaultScopeType.Trash:
-        return this.i18nService.t("trash");
-      case VaultScopeType.Archive:
-        return this.i18nService.t("archiveNoun");
-      default:
-        return undefined;
-    }
-  });
+  protected readonly title = computed(() =>
+    vaultScopeTitle(this.vaultScope(), this.i18nService, this.scopedOrganizations()[0]?.name),
+  );
 
   protected readonly copyPresentation = toSignal(
     this.copyButtonsService.showQuickCopyActions$.pipe(
diff --git a/libs/components/src/header/header.component.html b/libs/components/src/header/header.component.html
index dde8513a9c77..80b1a401ab92 100644
--- a/libs/components/src/header/header.component.html
+++ b/libs/components/src/header/header.component.html
@@ -27,15 +27,18 @@
           <h1
             bitTypography="h1"
             noMargin
-            class="tw-m-0 tw-leading-10 tw-flex tw-gap-1"
+            class="tw-m-0 tw-leading-10 tw-flex tw-items-center tw-gap-1"
             [title]="title()"
           >
-            <div class="tw-truncate">
-              @if (icon()) {
-                <bit-icon [name]="icon()" />
-              }
+            <div class="tw-flex tw-min-w-0 tw-items-center tw-gap-3">
+              <ng-content select="[slot=title-icon]"></ng-content>
+              <div class="tw-truncate">
+                @if (icon()) {
+                  <bit-icon [name]="icon()" />
+                }
 
-              {{ title() }}
+                {{ title() }}
+              </div>
             </div>
             <div class="tw-flex tw-items-center">
               <ng-container *ngTemplateOutlet="titleSuffix"></ng-container>
diff --git a/libs/components/src/header/header.mdx b/libs/components/src/header/header.mdx
index 9efb58d0bed8..d690c6ac9662 100644
--- a/libs/components/src/header/header.mdx
+++ b/libs/components/src/header/header.mdx
@@ -28,7 +28,8 @@ the required `title` input, prefixed by `icon` and followed by anything in `slot
 When a `bit-breadcrumbs` projected into the header has an **active** breadcrumb — one whose `route`
 matches the current URL — that breadcrumb becomes the page's `<h1>` instead, marked
 `aria-current="page"`. The header then skips its own heading so the page never has two `<h1>`
-elements, which means `title`, `icon`, and `slot="title-suffix"` don't render in this case.
+elements, which means `title`, `icon`, `slot="title-icon"`, and `slot="title-suffix"` don't render
+in this case.
 
 <Canvas of={stories.WithActiveBreadcrumbVfo1} />
 
@@ -50,14 +51,15 @@ Without it the breadcrumbs have no context to register with.
 
 ## Content slots
 
-| Slot                  | Description                                                            |
-| --------------------- | ---------------------------------------------------------------------- |
-| default               | controls that act on the page, aligned to the end of the title row     |
-| `slot="breadcrumbs"`  | a `bit-breadcrumbs` showing where the page sits in the hierarchy       |
-| `slot="title-suffix"` | content appended inline to the title, typically an icon or icon button |
-| `slot="subtitle"`     | additional page information to complement the page title               |
-| `slot="tabs"`         | a `bit-tab-nav-bar` for navigation within the page                     |
-| `slot="secondary"`    | **Deprecated.** A second row of controls below the default slot        |
+| Slot                  | Description                                                              |
+| --------------------- | ------------------------------------------------------------------------ |
+| default               | controls that act on the page, aligned to the end of the title row       |
+| `slot="breadcrumbs"`  | a `bit-breadcrumbs` showing where the page sits in the hierarchy         |
+| `slot="title-icon"`   | a leading icon tile shown before the title, in place of the `icon` input |
+| `slot="title-suffix"` | content appended inline to the title, typically an icon or icon button   |
+| `slot="subtitle"`     | additional page information to complement the page title                 |
+| `slot="tabs"`         | a `bit-tab-nav-bar` for navigation within the page                       |
+| `slot="secondary"`    | **Deprecated.** A second row of controls below the default slot          |
 
 ### Default slot
 
@@ -73,6 +75,14 @@ Breadcrumbs render above the title. An active breadcrumb also changes what the h
 
 <Canvas of={stories.BreadcrumbsWithPrimaryContentVfo1} />
 
+### Title icon
+
+A leading icon tile before the title, for a page that identifies itself with a `bit-icon-tile`
+rather than the monochrome `icon` input. Like the title suffix, it is part of the heading and drops
+when a breadcrumb is promoted. Only renders while the `VFO1Foundation` feature flag is on.
+
+<Canvas of={stories.WithTitleIconVfo1} />
+
 ### Title suffix
 
 The title suffix is part of the heading, so it is rendered only when the header renders its own
diff --git a/libs/components/src/header/header.stories.ts b/libs/components/src/header/header.stories.ts
index f83cef4a37df..2c4cc0693b2e 100644
--- a/libs/components/src/header/header.stories.ts
+++ b/libs/components/src/header/header.stories.ts
@@ -24,6 +24,7 @@ import {
   TabsModule,
   TypographyModule,
   IconComponent,
+  IconTileComponent,
 } from "..";
 import { I18nMockService } from "../utils";
 
@@ -44,6 +45,7 @@ export default {
         ButtonModule,
         IconButtonModule,
         IconComponent,
+        IconTileComponent,
         SvgModule,
         InputModule,
         MenuModule,
@@ -349,6 +351,18 @@ export const WithTabsVfo1: Story = {
   globals: enabledFlags(FeatureFlag.VFO1Foundation),
 };
 
+export const WithTitleIconVfo1: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+    <bit-header title="My vault" class="tw-text-main">
+      <bit-icon-tile slot="title-icon" icon="bwi-user" variant="brand" emphasis="bold" size="sm" />
+    </bit-header>
+  `,
+  }),
+  globals: enabledFlags(FeatureFlag.VFO1Foundation),
+};
+
 export const WithTitleSuffixComponent: Story = {
   render: (args) => ({
     props: args,
diff --git a/libs/vault/src/components/vault-breadcrumbs/vault-breadcrumbs.component.html b/libs/vault/src/components/vault-breadcrumbs/vault-breadcrumbs.component.html
new file mode 100644
index 000000000000..3e54891d2f65
--- /dev/null
+++ b/libs/vault/src/components/vault-breadcrumbs/vault-breadcrumbs.component.html
@@ -0,0 +1,21 @@
+<bit-breadcrumbs>
+  <bit-breadcrumb [route]="orgRootCrumbRoute()">
+    <bit-icon-tile
+      slot="start"
+      [icon]="orgTile()?.icon"
+      [variant]="orgTile()?.variant ?? 'primary'"
+      [emphasis]="orgTile()?.emphasis ?? 'subtle'"
+      aria-hidden="true"
+    />
+    {{ orgNavItem()?.label }}
+  </bit-breadcrumb>
+  @for (crumb of trailCrumbs(); track crumb.key) {
+    <bit-breadcrumb
+      [icon]="crumb.icon"
+      [route]="crumb.route"
+      [queryParamsHandling]="crumb.queryParamsHandling"
+    >
+      {{ crumb.label }}
+    </bit-breadcrumb>
+  }
+</bit-breadcrumbs>
diff --git a/libs/vault/src/components/vault-breadcrumbs/vault-breadcrumbs.component.spec.ts b/libs/vault/src/components/vault-breadcrumbs/vault-breadcrumbs.component.spec.ts
new file mode 100644
index 000000000000..73f752b9c3dd
--- /dev/null
+++ b/libs/vault/src/components/vault-breadcrumbs/vault-breadcrumbs.component.spec.ts
@@ -0,0 +1,163 @@
+import { NO_ERRORS_SCHEMA } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { mock } from "jest-mock-extended";
+import { BehaviorSubject, of } from "rxjs";
+
+// eslint-disable-next-line no-restricted-imports
+import { CollectionService } from "@bitwarden/admin-console/common";
+import { CollectionView } from "@bitwarden/common/admin-console/models/collections";
+import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { CollectionId, OrganizationId, UserId } from "@bitwarden/common/types/guid";
+
+import { VaultNavItemType, VaultsNavViewModel } from "../../models/vault-nav-view-model";
+import { MY_ITEMS_ROUTE, VaultScope, VaultScopeType } from "../../models/vault-scope";
+import { VaultNavService } from "../../services/vault-nav.service";
+
+import { VaultBreadcrumbsComponent } from "./vault-breadcrumbs.component";
+
+const userId = "user-1" as UserId;
+const organizationId = "org-1" as OrganizationId;
+const myItemsCollectionId = "col-my-items" as CollectionId;
+const engineeringId = "col-engineering" as CollectionId;
+const backendId = "col-backend" as CollectionId;
+
+const buildCollection = (id: CollectionId, name: string) =>
+  new CollectionView({ id, organizationId, name });
+
+describe("VaultBreadcrumbsComponent", () => {
+  let fixture: ComponentFixture<VaultBreadcrumbsComponent>;
+  let collections$: BehaviorSubject<CollectionView[]>;
+  let vaultNav$: BehaviorSubject<VaultsNavViewModel>;
+
+  const component = () => fixture.componentInstance as any;
+
+  const scopeTo = (scope: VaultScope) => {
+    fixture.componentRef.setInput("scope", scope);
+    fixture.detectChanges();
+  };
+
+  beforeEach(async () => {
+    collections$ = new BehaviorSubject<CollectionView[]>([]);
+    vaultNav$ = new BehaviorSubject<VaultsNavViewModel>({
+      vaults: [
+        {
+          id: organizationId,
+          label: "Acme corporation",
+          icon: "bwi-business",
+          type: VaultNavItemType.Organization,
+          defaultUserCollectionId: myItemsCollectionId,
+        },
+      ],
+      organizationDataOwnership: true,
+    });
+
+    const accountService = mock<AccountService>();
+    accountService.activeAccount$ = of({ id: userId } as Account);
+
+    const collectionService = mock<CollectionService>();
+    collectionService.decryptedCollections$.mockReturnValue(collections$);
+
+    const i18nService = mock<I18nService>();
+    i18nService.t.mockImplementation((key: string) => key);
+
+    await TestBed.configureTestingModule({
+      imports: [VaultBreadcrumbsComponent],
+      providers: [
+        { provide: AccountService, useValue: accountService },
+        { provide: CollectionService, useValue: collectionService },
+        { provide: I18nService, useValue: i18nService },
+        { provide: VaultNavService, useValue: { viewModel$: () => vaultNav$ } },
+      ],
+    })
+      .overrideComponent(VaultBreadcrumbsComponent, {
+        set: { imports: [], schemas: [NO_ERRORS_SCHEMA] },
+      })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(VaultBreadcrumbsComponent);
+  });
+
+  it("trails the whole organization vault with an All vault items crumb", () => {
+    scopeTo({ type: VaultScopeType.Organization, organizationId });
+
+    expect(component().trailCrumbs()).toEqual([
+      {
+        key: "all-vault-items",
+        icon: "bwi-list-alt",
+        label: "allVaultItems",
+        route: [],
+        queryParamsHandling: "preserve",
+      },
+    ]);
+  });
+
+  it("does not link the organization root crumb on the All vault items page", () => {
+    scopeTo({ type: VaultScopeType.Organization, organizationId });
+
+    expect(component().orgRootCrumbRoute()).toBeUndefined();
+  });
+
+  it("trails My items when the URL names it by sentinel", () => {
+    scopeTo({ type: VaultScopeType.Organization, organizationId, collectionId: MY_ITEMS_ROUTE });
+
+    expect(component().trailCrumbs()).toEqual([
+      {
+        key: "my-items",
+        icon: "bwi-user",
+        label: "myItemsV2",
+        route: [],
+        queryParamsHandling: "preserve",
+      },
+    ]);
+    expect(component().orgRootCrumbRoute()).toEqual(["/vault", organizationId]);
+  });
+
+  it("trails My items when the scope carries the resolved collection id", () => {
+    scopeTo({
+      type: VaultScopeType.Organization,
+      organizationId,
+      collectionId: myItemsCollectionId,
+    });
+
+    expect(component().trailCrumbs()).toEqual([
+      {
+        key: "my-items",
+        icon: "bwi-user",
+        label: "myItemsV2",
+        route: [],
+        queryParamsHandling: "preserve",
+      },
+    ]);
+  });
+
+  it("trails a shared folder through its ancestors to the folder in view", () => {
+    collections$.next([
+      buildCollection(engineeringId, "Engineering"),
+      buildCollection(backendId, "Engineering/Backend"),
+    ]);
+    scopeTo({ type: VaultScopeType.Organization, organizationId, collectionId: backendId });
+
+    expect(component().trailCrumbs()).toEqual([
+      {
+        key: "shared-folders",
+        icon: "bwi-shared-folder",
+        label: "sharedFolders",
+        route: ["/vault", organizationId, "shared-folders"],
+      },
+      {
+        key: engineeringId,
+        icon: "bwi-shared-folder",
+        label: "Engineering",
+        route: ["/vault", organizationId, "shared-folders", engineeringId],
+      },
+      {
+        key: "shared-folder",
+        icon: "bwi-shared-folder",
+        label: "Backend",
+        route: [],
+        queryParamsHandling: "preserve",
+      },
+    ]);
+  });
+});
diff --git a/libs/vault/src/components/vault-collection-breadcrumbs/vault-collection-breadcrumbs.component.ts b/libs/vault/src/components/vault-breadcrumbs/vault-breadcrumbs.component.ts
similarity index 60%
rename from libs/vault/src/components/vault-collection-breadcrumbs/vault-collection-breadcrumbs.component.ts
rename to libs/vault/src/components/vault-breadcrumbs/vault-breadcrumbs.component.ts
index 7df936b3674e..36e5af8b9c60 100644
--- a/libs/vault/src/components/vault-collection-breadcrumbs/vault-collection-breadcrumbs.component.ts
+++ b/libs/vault/src/components/vault-breadcrumbs/vault-breadcrumbs.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
 import { toSignal } from "@angular/core/rxjs-interop";
+import { QueryParamsHandling } from "@angular/router";
 import { switchMap } from "rxjs";
 
 // eslint-disable-next-line no-restricted-imports
@@ -8,12 +9,19 @@ import { CollectionView } from "@bitwarden/common/admin-console/models/collectio
 import { getNestedCollectionTree } from "@bitwarden/common/admin-console/utils/collection-utils";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { ServiceUtils } from "@bitwarden/common/vault/service-utils";
-import { BreadcrumbsModule, IconTileComponent, IconTileOptions } from "@bitwarden/components";
-import { I18nPipe } from "@bitwarden/ui-common";
+import {
+  BitwardenIcon,
+  BreadcrumbsModule,
+  IconTileComponent,
+  IconTileOptions,
+} from "@bitwarden/components";
 
 import { navIconTile } from "../../models/vault-icon-tile";
 import {
+  defaultUserCollectionId,
+  MY_ITEMS_ROUTE,
   sharedFoldersCommands,
   vaultScopeCommands,
   VaultScope,
@@ -21,20 +29,29 @@ import {
 } from "../../models/vault-scope";
 import { VaultNavService } from "../../services/vault-nav.service";
 
+type TrailCrumb = {
+  key: string;
+  icon: BitwardenIcon;
+  label: string;
+  route: string[];
+  queryParamsHandling?: QueryParamsHandling;
+};
+
 @Component({
-  selector: "vault-collection-breadcrumbs",
-  templateUrl: "./vault-collection-breadcrumbs.component.html",
+  selector: "vault-breadcrumbs",
+  templateUrl: "./vault-breadcrumbs.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [BreadcrumbsModule, IconTileComponent, I18nPipe],
+  imports: [BreadcrumbsModule, IconTileComponent],
   host: {
     // `bit-breadcrumbs` sizes itself to its container, so this wrapper has to be one.
     class: "tw-flex tw-w-full tw-min-w-0",
   },
 })
-export class VaultCollectionBreadcrumbsComponent {
+export class VaultBreadcrumbsComponent {
   private readonly accountService = inject(AccountService);
   private readonly collectionService = inject(CollectionService);
   private readonly vaultNavService = inject(VaultNavService);
+  private readonly i18nService = inject(I18nService);
 
   readonly scope = input.required<VaultScope>();
 
@@ -54,6 +71,16 @@ export class VaultCollectionBreadcrumbsComponent {
     this.userId$.pipe(switchMap((userId) => this.vaultNavService.viewModel$(userId))),
   );
 
+  /** True for the org's "My items", by URL sentinel or resolved id, so either scope form matches. */
+  private readonly myItems = computed(() => {
+    const collectionId = this.collectionId();
+    if (collectionId === MY_ITEMS_ROUTE) {
+      return true;
+    }
+    const orgId = this.organizationId();
+    return orgId != null && collectionId === defaultUserCollectionId(orgId, this.vaultNav());
+  });
+
   protected readonly orgNavItem = computed(() => {
     const orgId = this.organizationId();
     if (orgId == null) {
@@ -67,12 +94,12 @@ export class VaultCollectionBreadcrumbsComponent {
     return item == null ? undefined : navIconTile(item);
   });
 
-  protected readonly sharedFoldersRoute = computed((): string[] => {
+  private readonly sharedFoldersRoute = computed((): string[] => {
     const orgId = this.organizationId();
     return orgId == null ? [] : sharedFoldersCommands(orgId);
   });
 
-  protected readonly orgRootRoute = computed((): string[] => {
+  private readonly orgRootRoute = computed((): string[] => {
     const orgId = this.organizationId();
     if (orgId == null) {
       return [];
@@ -80,6 +107,11 @@ export class VaultCollectionBreadcrumbsComponent {
     return vaultScopeCommands({ type: VaultScopeType.Organization, organizationId: orgId });
   });
 
+  /** Unset on the all-vault-items page, where a link to the org root would point at the current URL. */
+  protected readonly orgRootCrumbRoute = computed((): string[] | undefined =>
+    this.collectionId() == null ? undefined : this.orgRootRoute(),
+  );
+
   private readonly collections = toSignal(
     this.userId$.pipe(switchMap((userId) => this.collectionService.decryptedCollections$(userId))),
     { initialValue: [] as CollectionView[] },
@@ -106,10 +138,10 @@ export class VaultCollectionBreadcrumbsComponent {
     return ServiceUtils.getTreeNodeObjectFromList(this.collectionTree(), collectionId) ?? undefined;
   });
 
-  protected readonly sharedFolderName = computed(() => this.sharedFolderNode()?.node.name ?? "");
+  private readonly sharedFolderName = computed(() => this.sharedFolderNode()?.node.name ?? "");
 
   /** Ancestors of the selected folder, from org root to immediate parent. Current folder excluded. */
-  protected readonly collectionBreadcrumbs = computed((): CollectionView[] => {
+  private readonly collectionBreadcrumbs = computed((): CollectionView[] => {
     const node = this.sharedFolderNode();
     if (node == null) {
       return [];
@@ -124,7 +156,39 @@ export class VaultCollectionBreadcrumbsComponent {
       .map((n) => n.node);
   });
 
-  protected sharedFolderRoute(folder: CollectionView): string[] {
+  protected readonly trailCrumbs = computed((): TrailCrumb[] => {
+    if (this.collectionId() == null) {
+      return [
+        this.currentCrumb("all-vault-items", "bwi-list-alt", this.i18nService.t("allVaultItems")),
+      ];
+    }
+
+    if (this.myItems()) {
+      return [this.currentCrumb("my-items", "bwi-user", this.i18nService.t("myItemsV2"))];
+    }
+
+    return [
+      {
+        key: "shared-folders",
+        icon: "bwi-shared-folder",
+        label: this.i18nService.t("sharedFolders"),
+        route: this.sharedFoldersRoute(),
+      },
+      ...this.collectionBreadcrumbs().map((folder): TrailCrumb => ({
+        key: folder.id,
+        icon: "bwi-shared-folder",
+        label: folder.name,
+        route: this.sharedFolderRoute(folder),
+      })),
+      this.currentCrumb("shared-folder", "bwi-shared-folder", this.sharedFolderName()),
+    ];
+  });
+
+  private currentCrumb(key: string, icon: BitwardenIcon, label: string): TrailCrumb {
+    return { key, icon, label, route: [], queryParamsHandling: "preserve" };
+  }
+
+  private sharedFolderRoute(folder: CollectionView): string[] {
     const orgId = this.organizationId();
     if (orgId == null) {
       return [];
diff --git a/libs/vault/src/components/vault-collection-breadcrumbs/vault-collection-breadcrumbs.component.html b/libs/vault/src/components/vault-collection-breadcrumbs/vault-collection-breadcrumbs.component.html
deleted file mode 100644
index b3a95dfab88d..000000000000
--- a/libs/vault/src/components/vault-collection-breadcrumbs/vault-collection-breadcrumbs.component.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<bit-breadcrumbs>
-  <bit-breadcrumb [route]="orgRootRoute()">
-    <bit-icon-tile
-      slot="start"
-      [icon]="orgTile()?.icon"
-      [variant]="orgTile()?.variant ?? 'primary'"
-      [emphasis]="orgTile()?.emphasis ?? 'subtle'"
-      aria-hidden="true"
-    />
-    {{ orgNavItem()?.label }}
-  </bit-breadcrumb>
-  <bit-breadcrumb [icon]="'bwi-shared-folder'" [route]="sharedFoldersRoute()">
-    {{ "sharedFolders" | i18n }}
-  </bit-breadcrumb>
-  @for (crumb of collectionBreadcrumbs(); track crumb.id) {
-    <bit-breadcrumb [icon]="'bwi-shared-folder'" [route]="sharedFolderRoute(crumb)">
-      {{ crumb.name }}
-    </bit-breadcrumb>
-  }
-  <bit-breadcrumb [icon]="'bwi-shared-folder'" [route]="[]" queryParamsHandling="preserve">
-    {{ sharedFolderName() }}
-  </bit-breadcrumb>
-</bit-breadcrumbs>
diff --git a/libs/vault/src/components/vault-nav-section/vault-nav-section.component.html b/libs/vault/src/components/vault-nav-section/vault-nav-section.component.html
index 59ced7580afd..6276d1d173e0 100644
--- a/libs/vault/src/components/vault-nav-section/vault-nav-section.component.html
+++ b/libs/vault/src/components/vault-nav-section/vault-nav-section.component.html
@@ -7,7 +7,12 @@
       [queryParamsHandling]="queryParamsHandling(allItemsRoute)"
       [routerLinkActiveOptions]="exactRouteOptions"
     >
-      <bit-icon-tile icon="bwi-list" variant="brand" emphasis="bold" size="sm" />
+      <bit-icon-tile
+        [icon]="allItemsTile.icon"
+        [variant]="allItemsTile.variant ?? 'primary'"
+        [emphasis]="allItemsTile.emphasis ?? 'subtle'"
+        size="sm"
+      />
     </bit-nav-item>
   }
 
diff --git a/libs/vault/src/components/vault-nav-section/vault-nav-section.component.ts b/libs/vault/src/components/vault-nav-section/vault-nav-section.component.ts
index 36fffd24148e..9ca340415c5c 100644
--- a/libs/vault/src/components/vault-nav-section/vault-nav-section.component.ts
+++ b/libs/vault/src/components/vault-nav-section/vault-nav-section.component.ts
@@ -10,7 +10,7 @@ import { OrganizationId } from "@bitwarden/common/types/guid";
 import { IconTileComponent, IconTileOptions, NavigationModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
-import { navIconTile } from "../../models/vault-icon-tile";
+import { ALL_ITEMS_ICON_TILE, navIconTile } from "../../models/vault-icon-tile";
 import { VaultNavItemType, VaultNavItemViewModel } from "../../models/vault-nav-view-model";
 import {
   ALL_ITEMS_SCOPE,
@@ -49,6 +49,8 @@ export class VaultNavSectionComponent {
 
   protected readonly allItemsRoute = vaultScopeCommands(ALL_ITEMS_SCOPE);
 
+  protected readonly allItemsTile = ALL_ITEMS_ICON_TILE;
+
   /**
    * The match for the two entries naming a whole vault — All items and an organization's All vault
    * items. Every deeper destination nests under the route each links to, so `routerLinkActive`'s
diff --git a/libs/vault/src/index.ts b/libs/vault/src/index.ts
index 4fa94a864eeb..7e6c4e27d1ab 100644
--- a/libs/vault/src/index.ts
+++ b/libs/vault/src/index.ts
@@ -147,4 +147,4 @@ export {
   matchesFolder,
   idString,
 } from "./utils/vault-filter-predicates";
-export { VaultCollectionBreadcrumbsComponent } from "./components/vault-collection-breadcrumbs/vault-collection-breadcrumbs.component";
+export { VaultBreadcrumbsComponent } from "./components/vault-breadcrumbs/vault-breadcrumbs.component";
diff --git a/libs/vault/src/models/vault-icon-tile.spec.ts b/libs/vault/src/models/vault-icon-tile.spec.ts
index f35e6a32f329..6b6c82b3eb2c 100644
--- a/libs/vault/src/models/vault-icon-tile.spec.ts
+++ b/libs/vault/src/models/vault-icon-tile.spec.ts
@@ -1,8 +1,21 @@
 import { ProductTierType } from "@bitwarden/common/billing/enums";
+import { OrganizationId } from "@bitwarden/common/types/guid";
 import { BitwardenIcon } from "@bitwarden/components";
 
-import { navIconTile, orgIconTile, personalIconTile, vaultTileColor } from "./vault-icon-tile";
-import { VaultNavItemType, VaultNavItemViewModel } from "./vault-nav-view-model";
+import {
+  ALL_ITEMS_ICON_TILE,
+  navIconTile,
+  orgIconTile,
+  personalIconTile,
+  vaultScopeHeaderTile,
+  vaultTileColor,
+} from "./vault-icon-tile";
+import {
+  VaultNavItemType,
+  VaultNavItemViewModel,
+  VaultsNavViewModel,
+} from "./vault-nav-view-model";
+import { VaultScopeType } from "./vault-scope";
 
 describe("vaultTileColor", () => {
   it("resolves a palette avatar color to its hex value", () => {
@@ -77,3 +90,48 @@ describe("personalIconTile", () => {
     expect(personalIconTile("#123456")).toEqual({ icon: "bwi-user", color: "#123456" });
   });
 });
+
+describe("vaultScopeHeaderTile", () => {
+  const personalNav: VaultsNavViewModel = {
+    vaults: [
+      {
+        id: "user-1",
+        label: "My vault",
+        type: VaultNavItemType.Personal,
+        color: "#abcdef",
+        icon: "bwi-user",
+      },
+    ],
+    organizationDataOwnership: false,
+  };
+
+  it("gives All items the brand list tile", () => {
+    expect(vaultScopeHeaderTile({ type: VaultScopeType.AllItems }, personalNav)).toEqual(
+      ALL_ITEMS_ICON_TILE,
+    );
+  });
+
+  it("gives My vault the personal tile from the nav", () => {
+    expect(vaultScopeHeaderTile({ type: VaultScopeType.MyVault }, personalNav)).toEqual({
+      icon: "bwi-user",
+      color: "#abcdef",
+    });
+  });
+
+  it("has no tile until the nav loads", () => {
+    expect(vaultScopeHeaderTile({ type: VaultScopeType.MyVault }, undefined)).toBeUndefined();
+  });
+
+  // Organization vaults carry their tile on the breadcrumb trail's root crumb instead.
+  it("has no tile for an organization vault, trash, or archive", () => {
+    const orgId = "1b2c3d4e-5f60-4a1b-8c2d-3e4f5a6b7c8d" as OrganizationId;
+    expect(
+      vaultScopeHeaderTile(
+        { type: VaultScopeType.Organization, organizationId: orgId },
+        personalNav,
+      ),
+    ).toBeUndefined();
+    expect(vaultScopeHeaderTile({ type: VaultScopeType.Trash }, personalNav)).toBeUndefined();
+    expect(vaultScopeHeaderTile({ type: VaultScopeType.Archive }, personalNav)).toBeUndefined();
+  });
+});
diff --git a/libs/vault/src/models/vault-icon-tile.ts b/libs/vault/src/models/vault-icon-tile.ts
index 3f96b2ae7533..839fa28d365f 100644
--- a/libs/vault/src/models/vault-icon-tile.ts
+++ b/libs/vault/src/models/vault-icon-tile.ts
@@ -8,7 +8,13 @@ import {
 
 import { getOrgIconForTier } from "../components/org-icon.directive";
 
-import { VaultNavColor, VaultNavItemType, VaultNavItemViewModel } from "./vault-nav-view-model";
+import {
+  VaultNavColor,
+  VaultNavItemType,
+  VaultNavItemViewModel,
+  VaultsNavViewModel,
+} from "./vault-nav-view-model";
+import { VaultScope, VaultScopeType } from "./vault-scope";
 
 /**
  * The tile variant for an organization, keyed off its plan: Free and Families orgs read as personal
@@ -57,6 +63,17 @@ export function orgIconTile(tier: ProductTierType): IconTileOptions {
   };
 }
 
+/**
+ * The icon tile for the "All items" destination, which spans every vault and so belongs to no one
+ * of them — the brand list tile the side nav and the page header share. A fixed triple, so a shared
+ * frozen value rather than a factory like {@link orgIconTile}.
+ */
+export const ALL_ITEMS_ICON_TILE: IconTileOptions = Object.freeze({
+  icon: "bwi-list",
+  variant: "brand",
+  emphasis: "bold",
+});
+
 /**
  * The icon tile for the user's own vault, tinted to match their avatar so the two read as the same
  * identity.
@@ -99,3 +116,23 @@ export function navIconTile(vault: VaultNavItemViewModel): IconTileOptions {
     emphasis: "bold",
   };
 }
+
+/**
+ * The tile shown before a scoped vault's page title. Organization vaults carry their tile in the
+ * breadcrumb trail instead, and Trash and Archive have none, so both yield `undefined`.
+ */
+export function vaultScopeHeaderTile(
+  scope: VaultScope,
+  nav: VaultsNavViewModel | undefined,
+): IconTileOptions | undefined {
+  switch (scope.type) {
+    case VaultScopeType.AllItems:
+      return ALL_ITEMS_ICON_TILE;
+    case VaultScopeType.MyVault: {
+      const personal = nav?.vaults.find((vault) => vault.type === VaultNavItemType.Personal);
+      return personal == null ? undefined : navIconTile(personal);
+    }
+    default:
+      return undefined;
+  }
+}
diff --git a/libs/vault/src/models/vault-scope.ts b/libs/vault/src/models/vault-scope.ts
index 07997518f323..c0e147596604 100644
--- a/libs/vault/src/models/vault-scope.ts
+++ b/libs/vault/src/models/vault-scope.ts
@@ -1,5 +1,6 @@
 import { CollectionView } from "@bitwarden/common/admin-console/models/collections";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CollectionId, OrganizationId } from "@bitwarden/common/types/guid";
 import {
   CipherViewLike,
@@ -85,6 +86,37 @@ export type VaultScope =
 
 export const ALL_ITEMS_SCOPE: VaultScope = { type: VaultScopeType.AllItems };
 
+/**
+ * The i18n key titling a scope's page. `null` for an organization vault, whose title is the
+ * organization's own name rather than a fixed string.
+ */
+function vaultScopeTitleKey(scope: VaultScope): string | null {
+  switch (scope.type) {
+    case VaultScopeType.MyVault:
+      return "myVault";
+    case VaultScopeType.Trash:
+      return "trash";
+    case VaultScopeType.Archive:
+      return "archiveNoun";
+    case VaultScopeType.Organization:
+      return null;
+    default:
+      return "allItems";
+  }
+}
+
+/**
+ * The page title for a scope: an organization vault's own name, or a localized string for the rest.
+ */
+export function vaultScopeTitle(
+  scope: VaultScope,
+  i18nService: I18nService,
+  organizationName?: string,
+): string | undefined {
+  const key = vaultScopeTitleKey(scope);
+  return key == null ? organizationName : i18nService.t(key);
+}
+
 /** The scopes named by a fixed route segment rather than an organization id. */
 const NAMED_SCOPES = new Map<string, VaultScope>([
   [MY_VAULT_ROUTE, { type: VaultScopeType.MyVault }],