From 2c498ab193b24317f106c8495b32719e0f845a40 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 4 Oct 2022 12:35:29 +0700
Subject: [PATCH] Updated breadcrumb and title style across admin

Refs https://www.notion.so/ghost/Switch-breadcrumb-style-513a624c0e0d490ca39a2fdb97a6971a

- Separating out the breadcrumbs and the title makes it easier to navigate back on multiple levels for nested pages.
- Avoids very long titles, as it doesn't include breadcrumbs anymore
---
 .../app/components/gh-custom-view-title.hbs   | 20 +++--
 .../app/components/gh-member-details.hbs      |  2 +-
 .../components/gh-member-settings-form.hbs    |  2 +-
 .../app/components/gh-nav-menu/design.hbs     |  3 +-
 .../admin/app/components/posts/analytics.hbs  | 74 ++++++++++---------
 ghost/admin/app/styles/app-dark.css           |  5 --
 ghost/admin/app/styles/layouts/apps.css       | 31 ++++----
 ghost/admin/app/styles/layouts/content.css    |  8 +-
 ghost/admin/app/styles/layouts/main.css       | 56 +++++++-------
 ghost/admin/app/styles/layouts/members.css    |  2 +-
 ghost/admin/app/styles/layouts/settings.css   | 33 ++++-----
 ghost/admin/app/templates/member.hbs          | 26 ++++---
 ghost/admin/app/templates/offer.hbs           | 29 +++++---
 ghost/admin/app/templates/offers.hbs          |  2 +-
 ghost/admin/app/templates/pages-loading.hbs   |  2 +-
 ghost/admin/app/templates/pages.hbs           |  2 +-
 ghost/admin/app/templates/posts-clicks.hbs    |  2 +-
 ghost/admin/app/templates/posts-loading.hbs   |  2 +-
 ghost/admin/app/templates/posts.hbs           |  2 +-
 .../settings/code-injection-loading.hbs       | 16 ++--
 .../app/templates/settings/code-injection.hbs | 16 ++--
 .../templates/settings/general-loading.hbs    | 18 +++--
 .../admin/app/templates/settings/general.hbs  | 16 ++--
 .../admin/app/templates/settings/history.hbs  | 46 +++++++-----
 .../app/templates/settings/integration.hbs    | 22 ++++--
 .../app/templates/settings/integrations.hbs   | 16 ++--
 .../settings/integrations/amp-loading.hbs     | 19 +++--
 .../templates/settings/integrations/amp.hbs   | 23 +++---
 .../settings/integrations/firstpromoter.hbs   | 23 +++---
 .../settings/integrations/slack-loading.hbs   | 19 +++--
 .../templates/settings/integrations/slack.hbs | 23 +++---
 .../integrations/unsplash-loading.hbs         | 19 +++--
 .../settings/integrations/unsplash.hbs        | 23 +++---
 .../settings/integrations/zapier.hbs          | 21 ++++--
 .../app/templates/settings/labs-loading.hbs   | 20 +++--
 ghost/admin/app/templates/settings/labs.hbs   | 16 ++--
 .../app/templates/settings/membership.hbs     | 16 ++--
 .../app/templates/settings/navigation.hbs     | 16 ++--
 .../app/templates/settings/newsletters.hbs    | 16 ++--
 .../app/templates/settings/staff/index.hbs    | 17 +++--
 .../templates/settings/staff/user-loading.hbs | 33 ++++++---
 .../app/templates/settings/staff/user.hbs     | 33 +++++----
 ghost/admin/app/templates/tag.hbs             | 17 +++--
 ghost/admin/app/templates/tags-loading.hbs    |  2 +-
 ghost/admin/app/templates/tags.hbs            |  2 +-
 ghost/admin/tests/acceptance/content-test.js  |  4 +-
 ghost/admin/tests/acceptance/staff-test.js    |  4 +-
 47 files changed, 488 insertions(+), 331 deletions(-)

diff --git a/ghost/admin/app/components/gh-custom-view-title.hbs b/ghost/admin/app/components/gh-custom-view-title.hbs
index 3add7fab4c..53f1cc7755 100644
--- a/ghost/admin/app/components/gh-custom-view-title.hbs
+++ b/ghost/admin/app/components/gh-custom-view-title.hbs
@@ -1,7 +1,17 @@
-<h2 class="gh-canvas-title" data-test-screen-title>
-    <LinkTo @route={{this.router.currentRouteName}} @query={{@query}}>{{or @title "No @title provided"}}</LinkTo>
+<div class="flex flex-column">
     {{#if this.customViews.activeView}}
-        <span>{{svg-jar "arrow-right"}}</span>
-        <span class="truncate">{{this.customViews.activeView.name}}</span>
+        <div class="gh-canvas-breadcrumb">
+            <LinkTo @route={{this.router.currentRouteName}} @query={{@query}}>
+                {{or @title "No @title provided"}}
+            </LinkTo>
+            {{svg-jar "arrow-right-small"}} {{this.customViews.activeView.name}}
+        </div>
+        <h2 class="gh-canvas-title gh-post-title" data-test-screen-title>
+            {{this.customViews.activeView.name}}
+        </h2>
+    {{else}}
+        <h2 class="gh-canvas-title" data-test-screen-title>
+            <LinkTo @route={{this.router.currentRouteName}} @query={{@query}}>{{or @title "No @title provided"}}</LinkTo>
+        </h2>
     {{/if}}
-</h2>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/ghost/admin/app/components/gh-member-details.hbs b/ghost/admin/app/components/gh-member-details.hbs
index cfa9485970..178eff4c8b 100644
--- a/ghost/admin/app/components/gh-member-details.hbs
+++ b/ghost/admin/app/components/gh-member-details.hbs
@@ -1,5 +1,5 @@
 <section class="gh-member-details" ...attributes>
-    <div class="flex flex-column mt4">
+    <div class="flex flex-column">
         <div class="gh-member-details-identity">
             {{#if (or @member.name @member.email)}}
                 <GhMemberAvatar
diff --git a/ghost/admin/app/components/gh-member-settings-form.hbs b/ghost/admin/app/components/gh-member-settings-form.hbs
index 8d74314c8f..a0eec3c8f1 100644
--- a/ghost/admin/app/components/gh-member-settings-form.hbs
+++ b/ghost/admin/app/components/gh-member-settings-form.hbs
@@ -2,7 +2,7 @@
     <section class="gh-main-section columns-3">
         <GhMemberDetails @member={{@member}} />
 
-        <div class="gh-main-section-block span-2 mt6">
+        <div class="gh-main-section-block span-2">
             <div class="gh-main-section-content grey">
                 <div>
                     <div class="gh-cp-member-email-name">
diff --git a/ghost/admin/app/components/gh-nav-menu/design.hbs b/ghost/admin/app/components/gh-nav-menu/design.hbs
index be0e34f95b..84b9ff1dce 100644
--- a/ghost/admin/app/components/gh-nav-menu/design.hbs
+++ b/ghost/admin/app/components/gh-nav-menu/design.hbs
@@ -1,6 +1,7 @@
 <div class="flex flex-column h-100" {{css-transition "gh-nav-contextual"}} data-test-nav-menu="design" ...attributes>
     <header class="gh-nav-header">
-        <LinkTo @route="settings" class="gh-nav-menu-back-button" data-test-link="back-to-settings">{{svg-jar "arrow-left-small"}} Settings</LinkTo>
+        <LinkTo @route="settings" class="gh-nav-menu-back-button" data-test-link="back-to-settings">Settings</LinkTo>
+        {{svg-jar "arrow-right-small"}} Design
     </header>
     <section class="gh-nav-body gh-nav-design">
         <div class="gh-nav-top" {{on "click" this.transitionBackToIndex}}>
diff --git a/ghost/admin/app/components/posts/analytics.hbs b/ghost/admin/app/components/posts/analytics.hbs
index d3cccd7c73..d308d372f2 100644
--- a/ghost/admin/app/components/posts/analytics.hbs
+++ b/ghost/admin/app/components/posts/analytics.hbs
@@ -1,42 +1,44 @@
 <section class="gh-canvas" {{did-insert this.loadData}}>
 
-    <GhCanvasHeader class="gh-canvas-header stacked gh-post-analytics-header">
-        <div class="gh-canvas-breadcrumb">
-            <LinkTo @route="posts">
-                Posts
-            </LinkTo>
-            {{svg-jar "arrow-right-small"}}Analytics
-        </div>
-        <h2 class="gh-canvas-title gh-post-title">
-            {{this.post.title}}
-        </h2>
-        <div class="gh-post-analytics-meta">
-            <div class="gh-post-analytics-meta-text">
-                {{#if
-                    (or this.post.isSent
-                        (and this.post.isPublished this.post.email)
-                        this.post.willEmail
-                    )
-                }}
-                    {{#if this.post.emailOnly}}
-                        Sent
-                    {{else}}
-                        Published and sent
-                    {{/if}}
-                {{else}}
-                    Published on your site
-                {{/if}}
-
-                {{#let (moment-site-tz this.post.publishedAtUTC) as |publishedAt|}}
-                    on
-                    {{moment-format publishedAt "D MMM YYYY"}}
-                    at
-                    {{moment-format publishedAt "HH:mm"}}
-                {{/let}}
+    <GhCanvasHeader class="gh-canvas-header gh-post-analytics-header">
+        <div class="flex flex-column flex-grow-1">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="posts">
+                    Posts
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}}Analytics
+            </div>
+            <h2 class="gh-canvas-title gh-post-title">
+                {{this.post.title}}
+            </h2>
+            <div class="gh-post-analytics-meta">
+                <div class="gh-post-analytics-meta-text">
+                    {{#if
+                        (or this.post.isSent
+                            (and this.post.isPublished this.post.email)
+                            this.post.willEmail
+                        )
+                    }}
+                        {{#if this.post.emailOnly}}
+                            Sent
+                        {{else}}
+                            Published and sent
+                        {{/if}}
+                    {{else}}
+                        Published on your site
+                    {{/if}}
+
+                    {{#let (moment-site-tz this.post.publishedAtUTC) as |publishedAt|}}
+                        on
+                        {{moment-format publishedAt "D MMM YYYY"}}
+                        at
+                        {{moment-format publishedAt "HH:mm"}}
+                    {{/let}}
+                </div>
+                <LinkTo @route="editor.edit" @models={{array this.post.displayName this.post.id}} class="gh-post-list-cta edit" title="">
+                    {{svg-jar "pen" title=""}}<span>Edit post</span>
+                </LinkTo>
             </div>
-            <LinkTo @route="editor.edit" @models={{array this.post.displayName this.post.id}} class="gh-post-list-cta edit" title="">
-                {{svg-jar "pen" title=""}}<span>Edit post</span>
-            </LinkTo>
         </div>
     </GhCanvasHeader>
 
diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css
index 84c28a2044..ac4dc155fc 100644
--- a/ghost/admin/app/styles/app-dark.css
+++ b/ghost/admin/app/styles/app-dark.css
@@ -326,11 +326,6 @@ input:focus,
     border-bottom: 1px solid var(--hairline-color-1);
 }
 
-.gh-main-section.no-heading,
-.gh-main-section.bt {
-    border-top: 1px solid var(--hairline-color-1);
-}
-
 .gh-btn-tabs .gh-btn {
     background: transparent !important;
 }
diff --git a/ghost/admin/app/styles/layouts/apps.css b/ghost/admin/app/styles/layouts/apps.css
index 64c516c31e..95dd1ddeb5 100644
--- a/ghost/admin/app/styles/layouts/apps.css
+++ b/ghost/admin/app/styles/layouts/apps.css
@@ -328,19 +328,18 @@
     justify-content: flex-start;
     align-items: flex-start;
     align-content: flex-start;
-    margin-top: 24px;
 }
 
 .app-icon {
     position: relative;
-    flex: 1 0 56px;
-    width: 56px;
-    min-width: 56px;
-    height: 56px;
+    flex: 1 0 60px;
+    width: 60px;
+    min-width: 60px;
+    height: 60px;
     background-position: center center;
     background-size: cover;
     border-radius: 10%;
-    margin-right: 32px;
+    margin-right: 24px;
 }
 
 .app-icon img {
@@ -348,16 +347,16 @@
 }
 
 .app-cell h3 {
-    margin: 4px 0 0;
+    margin: -2px 0 0;
     color: var(--black);
-    font-size: 2.1rem;
-    font-weight: 600;
+    font-size: 3.2rem;
+    font-weight: 700;
 }
 
 .app-cell p {
     margin: 0;
     margin-bottom: 5px;
-    color: var(--midgrey);
+    color: var(--midgrey-l2);
     font-size: 1.4rem;
     line-height: 1.4em;
 }
@@ -420,7 +419,7 @@
 /* Zapier templates */
 /* ---------------------------------------------------------- */
 .gh-zapier-data-container {
-    margin: 1.6em 0;
+    margin: 1.8em 0;
 }
 
 .gh-zapier-data-container .gh-zapier-data {
@@ -437,9 +436,9 @@
 
 .gh-zapier-data .data-label {
     width: 128px;
-    height: 36px;
-    padding: 8px 8px 8px 0;
-    color: var(--midgrey);
+    height: 28px;
+    padding: 4px 4px 4px 0;
+    color: var(--midgrey-l2);
     font-size: 1.4rem;
     line-height: 1.45;
     font-weight: 400;
@@ -448,8 +447,8 @@
 
 .gh-zapier-data .data {
     width: 100%;
-    height: 36px;
-    padding: 8px;
+    height: 28px;
+    padding: 4px;
     color: var(--darkgrey);
     font-size: 1.4rem;
     line-height: 1.45;
diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css
index 36f00969b2..9dbd5715fb 100644
--- a/ghost/admin/app/styles/layouts/content.css
+++ b/ghost/admin/app/styles/layouts/content.css
@@ -743,10 +743,8 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
     animation: .25s fadeIn .5s normal forwards;
 }
 
-.gh-post-analytics-header {
-    position: relative;
-    margin: 0 0 2.4rem;
-    padding: 0 0 1.6rem;
+.gh-post-analytics-header .gh-canvas-header-content {
+    padding-bottom: 1.6rem;
     border-bottom: 1px solid var(--whitegrey);
 }
 
@@ -767,7 +765,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
 }
 
 .gh-post-analytics-meta-text {
-    color: var(--midlightgrey-d2);
+    color: var(--midgrey-l2);
     font-size: 1.35rem;
     display: flex;
     align-items: center;
diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index a65489169b..6eb674e81e 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -1097,9 +1097,9 @@
 }
 
 .gh-canvas-header {
+    min-height: calc(var(--main-layout-vpanel-height) - 1px);;
     margin: 0 calc(-1 * var(--main-layout-content-sidepadding));
-    padding: 0 var(--main-layout-content-sidepadding);
-    position: sticky;
+    padding: 32px var(--main-layout-content-sidepadding);
     top: 0;
     background: var(--main-bg-color);
     z-index: 700;
@@ -1107,6 +1107,10 @@
     border-color: transparent;
 }
 
+.gh-canvas-header.sticky {
+    position: sticky;
+}
+
 .gh-canvas.circle-bg .gh-canvas-header {
     position: relative;
     background: none;
@@ -1117,36 +1121,36 @@
     background: var(--main-color-content-greybg);
 }
 
-.gh-canvas-header.stacked {
-    padding-top: 36px; 
-}
-
-.gh-canvas-header.stacked .gh-canvas-breadcrumb {
+.gh-canvas-header .gh-canvas-breadcrumb {
     display: flex;
     align-items: center;
-    height: 24px;
-    color: var(--darkgrey-l1);
+    height: 34px;
+    color: var(--midgrey-l2);
     font-size: 1.35rem;
-    font-weight: 500;
-    line-height: 24px;
+    font-weight: 400;
+    line-height: 34px;
     letter-spacing: .2px;
     background: none;
 }
 
-.gh-canvas-header.stacked .gh-canvas-breadcrumb a {
-    color: var(--darkgrey-l1);
+.gh-canvas-header.sticky .gh-canvas-breadcrumb {
+    position: sticky
+}
+
+.gh-canvas-header .gh-canvas-breadcrumb a {
+    color: var(--darkgrey);
     line-height: 24px;
 }
 
-.gh-canvas-header.stacked .gh-canvas-breadcrumb svg {
+.gh-canvas-header .gh-canvas-breadcrumb svg {
     display: block;
     width: 9px;
     height: 9px;
     margin: 1px 6px 0;
 }
 
-.gh-canvas-header.stacked .gh-canvas-breadcrumb svg path {
-    stroke: var(--darkgrey-l1);
+.gh-canvas-header .gh-canvas-breadcrumb svg path {
+    stroke: var(--midgrey-l2);
 }
 
 .gh-main-grey-gradient .gh-canvas-header {
@@ -1155,18 +1159,11 @@
 }
 
 .gh-canvas-header-content {
-    height: calc(var(--main-layout-vpanel-height) - 1px);
     position: relative;
     flex-shrink: 0;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.gh-canvas-header.stacked .gh-canvas-header-content {
-    flex-direction: column;
     align-items: flex-start;
-    height: unset;
+    justify-content: space-between;
 }
 
 .gh-main-width {
@@ -1213,11 +1210,6 @@
     grid-column-gap: 0;
 }
 
-.gh-main-section.no-heading,
-.gh-main-section.bt {
-    border-top: 1px solid var(--whitegrey);
-}
-
 .gh-main-section.bb { border-bottom: 1px solid var(--whitegrey); }
 
 .gh-main-section-header {
@@ -1488,7 +1480,7 @@
     padding: 0;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: 3.1rem;
+    font-size: 3.2rem;
     line-height: 1.3em;
     font-weight: 700;
     letter-spacing: -0.021em;
@@ -1513,6 +1505,10 @@
     margin: 0 10px;
 }
 
+.gh-canvas-breadcrumb + .gh-canvas-title {
+    padding: 12px 0 0;
+}
+
 .gh-btn-edit-view {
     opacity: 0;
     transition: all 0.3s ease-in-out;
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index d5631a8458..f11b8ce7a4 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -681,7 +681,7 @@ label[for="member-description"] + p {
 
 .gh-member-details {
     position: sticky;
-    top: 96px;
+    top: 158px;
     left: 0;
     height: max-content;
 }
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 5dd682def4..a08d3bedaa 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -1798,42 +1798,35 @@ p.theme-validation-details {
 }
 
 .gh-nav-header {
-    height: 100px;
-    padding: 32px 32px 16px;
+    display: flex;
+    align-items: center;
+    padding: 32px 32px 48px;
+    color: var(--midgrey-l2);
+    font-size: 1.35rem;
+    font-weight: 400;
+    line-height: 36px;
+    letter-spacing: .2px;
 }
 
 .gh-nav-menu-back-button {
     display: flex;
     align-items: center;
-    margin-bottom: 40px;
-    padding: 6px 0;
-    color: var(--darkgrey-l1);
-    font-size: 1.35rem;
-    font-weight: 500;
-    letter-spacing: .2px;
+    height: 36px;
+    color: var(--darkgrey);
     background: none;
 }
 
-.gh-nav-menu-back-button svg {
+.gh-nav-header svg {
     display: block;
     width: 9px;
     height: 9px;
-    margin: 1px 8px 0 0;
-    transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
+    margin: 1px 6px 0;
 }
 
-.gh-nav-menu-back-button svg path {
+.gh-nav-header svg path {
     stroke: var(--darkgrey-l1);
 }
 
-.gh-nav-menu-back-button:hover svg {
-    transform: translateX(-3px)
-}
-
-.gh-nav-menu-back-button:hover svg path {
-    stroke: var(--black);
-}
-
 .gh-nav-menu-back-button:hover {
     color: var(--black);
 }
diff --git a/ghost/admin/app/templates/member.hbs b/ghost/admin/app/templates/member.hbs
index 430f06d897..94e9010749 100644
--- a/ghost/admin/app/templates/member.hbs
+++ b/ghost/admin/app/templates/member.hbs
@@ -1,14 +1,20 @@
 <section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="members" data-test-link="members-back">Members</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            {{#if this.member.isNew}}
-                New<span class="gh-canvas-title-hide-for-mobile">&nbsp;member</span>
-            {{else}}
-                {{or this.member.name this.member.email}}
-            {{/if}}
-        </h2>
+    <GhCanvasHeader class="gh-canvas-header sticky">
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="members" data-test-link="members-back">
+                    Members
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} Member
+            </div>
+            <h2 class="gh-canvas-title" data-test-screen-title>
+                {{#if this.member.isNew}}
+                    New<span class="gh-canvas-title-hide-for-mobile">&nbsp;member</span>
+                {{else}}
+                    {{or this.member.name this.member.email}}
+                {{/if}}
+            </h2>
+        </div>
 
         <section class="view-actions">
             {{#if this.session.user.isAdmin}}
diff --git a/ghost/admin/app/templates/offer.hbs b/ghost/admin/app/templates/offer.hbs
index ff6338506d..c317848a2c 100644
--- a/ghost/admin/app/templates/offer.hbs
+++ b/ghost/admin/app/templates/offer.hbs
@@ -1,17 +1,24 @@
 <section class="gh-canvas gh-offer circle-bg" {{did-insert this.setup}}>
     <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="offers" data-test-link="offers-back">Offers</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            {{#if this.offer.isNew}}
-                New Offer
-            {{else}}
-                {{this.offer.name}}
-                {{#if (eq this.offer.status "archived")}}
-                <span class="gh-badge gh-badge-title">Archived</span>
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="offers" data-test-link="offers-back">
+                    Offers
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} Offer
+            </div>
+            <h2 class="gh-canvas-title" data-test-screen-title>
+                {{#if this.offer.isNew}}
+                    New Offer
+                {{else}}
+                    {{this.offer.name}}
+                    {{#if (eq this.offer.status "archived")}}
+                    <span class="gh-badge gh-badge-title">Archived</span>
+                    {{/if}}
                 {{/if}}
-            {{/if}}
-        </h2>
+            </h2>
+        </div>
+
         <section class="view-actions">
             <GhTaskButton @class="gh-btn gh-btn-primary gh-btn-icon" @type="button" @task={{this.saveTask}} @data-test-button="save" />
         </section>
diff --git a/ghost/admin/app/templates/offers.hbs b/ghost/admin/app/templates/offers.hbs
index 9fcacc32dd..877399dda3 100644
--- a/ghost/admin/app/templates/offers.hbs
+++ b/ghost/admin/app/templates/offers.hbs
@@ -1,5 +1,5 @@
 <section class="gh-canvas gh-offers">
-    <GhCanvasHeader class="gh-canvas-header">
+    <GhCanvasHeader class="gh-canvas-header sticky">
         <h2 class="gh-canvas-title" data-test-screen-title>Offers</h2>
         <section class="gh-offers-actions view-actions">
             <div>
diff --git a/ghost/admin/app/templates/pages-loading.hbs b/ghost/admin/app/templates/pages-loading.hbs
index 69375fa0c8..65193786fb 100644
--- a/ghost/admin/app/templates/pages-loading.hbs
+++ b/ghost/admin/app/templates/pages-loading.hbs
@@ -1,5 +1,5 @@
 <section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header break tablet post-header">
+    <GhCanvasHeader class="gh-canvas-header sticky break tablet post-header">
         <GhCustomViewTitle @title="Pages" @query={{reset-query-params "posts"}} />
 
         <section class="view-actions">
diff --git a/ghost/admin/app/templates/pages.hbs b/ghost/admin/app/templates/pages.hbs
index 4bfb9eaf77..3e55aedda1 100644
--- a/ghost/admin/app/templates/pages.hbs
+++ b/ghost/admin/app/templates/pages.hbs
@@ -1,5 +1,5 @@
 <section class="gh-canvas gh-canvas-sticky">
-    <GhCanvasHeader class="gh-canvas-header break tablet post-header">
+    <GhCanvasHeader class="gh-canvas-header sticky break tablet post-header">
         <GhCustomViewTitle @title="Pages" @query={{reset-query-params "posts"}} />
 
         <section class="view-actions">
diff --git a/ghost/admin/app/templates/posts-clicks.hbs b/ghost/admin/app/templates/posts-clicks.hbs
index 8bccf30ca5..c61dbac540 100644
--- a/ghost/admin/app/templates/posts-clicks.hbs
+++ b/ghost/admin/app/templates/posts-clicks.hbs
@@ -1,5 +1,5 @@
 <section class="gh-canvas gh-canvas-sticky">
-    <GhCanvasHeader class="gh-canvas-header break tablet post-header">
+    <GhCanvasHeader class="gh-canvas-header sticky break tablet post-header">
         <GhCustomViewTitle @title={{if this.session.user.isContributor (concat this.config.blogTitle " posts") "Posts"}} @query={{reset-query-params "posts"}} />
 
         <section class="view-actions">
diff --git a/ghost/admin/app/templates/posts-loading.hbs b/ghost/admin/app/templates/posts-loading.hbs
index b0dcf4b11d..ac55bcac85 100644
--- a/ghost/admin/app/templates/posts-loading.hbs
+++ b/ghost/admin/app/templates/posts-loading.hbs
@@ -1,5 +1,5 @@
 <section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header break tablet post-header">
+    <GhCanvasHeader class="gh-canvas-header sticky break tablet post-header">
         <GhCustomViewTitle @title={{if this.session.user.isContributor (concat this.config.blogTitle " posts") "Posts"}} @query={{reset-query-params "posts"}} />
         <section class="view-actions">
             <PostsList::ContentFilter
diff --git a/ghost/admin/app/templates/posts.hbs b/ghost/admin/app/templates/posts.hbs
index db0dbe7759..e74dbd6955 100644
--- a/ghost/admin/app/templates/posts.hbs
+++ b/ghost/admin/app/templates/posts.hbs
@@ -1,5 +1,5 @@
 <section class="gh-canvas gh-canvas-sticky">
-    <GhCanvasHeader class="gh-canvas-header break tablet post-header">
+    <GhCanvasHeader class="gh-canvas-header sticky break tablet post-header">
         <GhCustomViewTitle @title={{if this.session.user.isContributor (concat this.config.blogTitle " posts") "Posts"}} @query={{reset-query-params "posts"}} />
 
         <section class="view-actions">
diff --git a/ghost/admin/app/templates/settings/code-injection-loading.hbs b/ghost/admin/app/templates/settings/code-injection-loading.hbs
index df3b559ebc..cec4c07304 100644
--- a/ghost/admin/app/templates/settings/code-injection-loading.hbs
+++ b/ghost/admin/app/templates/settings/code-injection-loading.hbs
@@ -1,10 +1,16 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            Code injection
-        </h2>
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} Code injection
+            </div>
+            <h2 class="gh-canvas-title" data-test-screen-title>
+                Code injection
+            </h2>
+        </div>
         <section class="view-actions">
             <GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
         </section>
diff --git a/ghost/admin/app/templates/settings/code-injection.hbs b/ghost/admin/app/templates/settings/code-injection.hbs
index 4628536a1f..267d922e1a 100644
--- a/ghost/admin/app/templates/settings/code-injection.hbs
+++ b/ghost/admin/app/templates/settings/code-injection.hbs
@@ -1,10 +1,16 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            Code injection
-        </h2>
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} Code injection
+            </div>
+            <h2 class="gh-canvas-title" data-test-screen-title>
+                Code injection
+            </h2>
+        </div>
         <section class="view-actions">
             <GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
         </section>
diff --git a/ghost/admin/app/templates/settings/general-loading.hbs b/ghost/admin/app/templates/settings/general-loading.hbs
index 95a455460b..df1c78fe4c 100644
--- a/ghost/admin/app/templates/settings/general-loading.hbs
+++ b/ghost/admin/app/templates/settings/general-loading.hbs
@@ -1,10 +1,16 @@
 <section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            General
-        </h2>
+    <GhCanvasHeader class="gh-canvas-header sticky">
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} General
+            </div>
+            <h2 class="gh-canvas-title" data-test-screen-title>
+                General
+            </h2>
+        </div>
         <section class="view-actions">
             <GhTaskButton @buttonText="Save settings" @task={{this.save}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-button="save" />
         </section>
diff --git a/ghost/admin/app/templates/settings/general.hbs b/ghost/admin/app/templates/settings/general.hbs
index 659a2f7e74..c90d542efb 100644
--- a/ghost/admin/app/templates/settings/general.hbs
+++ b/ghost/admin/app/templates/settings/general.hbs
@@ -1,10 +1,16 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            General
-        </h2>
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} General
+            </div>
+            <h2 class="gh-canvas-title" data-test-screen-title>
+                General
+            </h2>
+        </div>
         <section class="view-actions">
             <GhTaskButton @buttonText="Save" @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-button="save" />
         </section>
diff --git a/ghost/admin/app/templates/settings/history.hbs b/ghost/admin/app/templates/settings/history.hbs
index 32a4360f47..8f46bdecba 100644
--- a/ghost/admin/app/templates/settings/history.hbs
+++ b/ghost/admin/app/templates/settings/history.hbs
@@ -1,24 +1,34 @@
 <section class="gh-canvas gh-members-activity">
     <GhCanvasHeader class="gh-canvas-header">
-    <h2 class="gh-canvas-title" data-test-screen-title>
-        <LinkTo @route="settings">Settings</LinkTo>
-        <span>{{svg-jar "arrow-right"}}</span>
-        <LinkTo @route="settings.history" @query={{reset-query-params "settings.history"}} data-test-link="history-back">History</LinkTo>
-        {{#if this.userRecord}}
-            <span>{{svg-jar "arrow-right"}}</span>
-            <span class="truncate">{{or this.userRecord.name this.userRecord.email}}</span>
-        {{/if}}
-    </h2>
-    <div class="view-actions">
-        <Settings::History::EventFilter
-             @excludedEvents={{this.excludedEvents}}
-             @excludedResources={{this.excludedResources}}
-             @onChange={{this.changeExcludedItems}} />
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{#if this.userRecord}}
+                    {{svg-jar "arrow-right-small"}}
+                    <LinkTo @route="settings.history" @query={{reset-query-params "settings.history"}} data-test-link="history-back">
+                        History
+                    </LinkTo>
+                    {{svg-jar "arrow-right-small"}} {{or this.userRecord.name this.userRecord.email}}
+                {{else}}
+                    {{svg-jar "arrow-right-small"}} History
+                {{/if}}
+            </div>
+            <h2 class="gh-canvas-title" data-test-screen-title>
+                History
+            </h2>
+        </div>
+        <div class="view-actions">
+            <Settings::History::EventFilter
+                @excludedEvents={{this.excludedEvents}}
+                @excludedResources={{this.excludedResources}}
+                @onChange={{this.changeExcludedItems}} />
 
-        <Settings::History::Search
-             @selected={{this.userRecord}}
-             @onChange={{this.changeUser}} />
-    </div>
+            <Settings::History::Search
+                @selected={{this.userRecord}}
+                @onChange={{this.changeUser}} />
+        </div>
     </GhCanvasHeader>
     <div class="view-container">
         {{#let (history-event-fetcher filter=(history-event-filter excludedEvents=this.fullExcludedEvents excludedResources=this.fullExcludedResources user=this.user) pageSize=50) as |eventsFetcher|}}
diff --git a/ghost/admin/app/templates/settings/integration.hbs b/ghost/admin/app/templates/settings/integration.hbs
index bc5663e31e..54c18420dc 100644
--- a/ghost/admin/app/templates/settings/integration.hbs
+++ b/ghost/admin/app/templates/settings/integration.hbs
@@ -1,13 +1,21 @@
 <section class="gh-canvas">
     <form {{on "submit" (perform this.saveTask)}}>
         <GhCanvasHeader class="gh-canvas-header">
-            <h2 class="gh-canvas-title" data-test-screen-title>
-                <LinkTo @route="settings">Settings</LinkTo>
-                <span>{{svg-jar "arrow-right"}}</span>
-                <LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
-                <span>{{svg-jar "arrow-right"}}</span>
-                {{this.integration.name}}
-            </h2>
+            <div class="flex flex-column">
+                <div class="gh-canvas-breadcrumb">
+                    <LinkTo @route="settings">
+                        Settings
+                    </LinkTo>
+                    {{svg-jar "arrow-right-small"}}
+                    <LinkTo @route="settings.integrations" data-test-link="integrations-back">
+                        Integrations
+                    </LinkTo>
+                    {{svg-jar "arrow-right-small"}} Custom integration
+                </div>
+                <h2 class="gh-canvas-title" data-test-screen-title>
+                    {{this.integration.name}}
+                </h2>
+            </div>
             <section class="view-actions">
                 <GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-button="save" />
             </section>
diff --git a/ghost/admin/app/templates/settings/integrations.hbs b/ghost/admin/app/templates/settings/integrations.hbs
index c4138b72e3..aa5339117f 100644
--- a/ghost/admin/app/templates/settings/integrations.hbs
+++ b/ghost/admin/app/templates/settings/integrations.hbs
@@ -1,10 +1,16 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            Integrations
-        </h2>
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} Integrations
+            </div>
+            <h2 class="gh-canvas-title" data-test-screen-title>
+                Integrations
+            </h2>
+        </div>
     </GhCanvasHeader>
 
     <div class="gh-main-section" {{scroll-top}}>
diff --git a/ghost/admin/app/templates/settings/integrations/amp-loading.hbs b/ghost/admin/app/templates/settings/integrations/amp-loading.hbs
index 4d2624f29f..a1075403fd 100644
--- a/ghost/admin/app/templates/settings/integrations/amp-loading.hbs
+++ b/ghost/admin/app/templates/settings/integrations/amp-loading.hbs
@@ -1,12 +1,17 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            <LinkTo @route="settings.integrations">Integrations</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            AMP
-        </h2>
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}}
+                <LinkTo @route="settings.integrations" data-test-link="integrations-back">
+                    Integrations
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} AMP
+            </div>
+        </div>
         <section class="view-actions"></section>
     </GhCanvasHeader>
 
diff --git a/ghost/admin/app/templates/settings/integrations/amp.hbs b/ghost/admin/app/templates/settings/integrations/amp.hbs
index bf0db6e8b0..c3445a4732 100644
--- a/ghost/admin/app/templates/settings/integrations/amp.hbs
+++ b/ghost/admin/app/templates/settings/integrations/amp.hbs
@@ -1,19 +1,24 @@
 <section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            <LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            AMP
-        </h2>
+    <GhCanvasHeader class="gh-canvas-header sticky">
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}}
+                <LinkTo @route="settings.integrations" data-test-link="integrations-back">
+                    Integrations
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} AMP
+            </div>
+        </div>
         <section class="view-actions">
             <GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
         </section>
     </GhCanvasHeader>
 
     <section class="view-container">
-        <section class="gh-main-section bt app-grid">
+        <section class="gh-main-section app-grid">
             <div class="gh-main-section-block app-detail-heading app-grid">
                 <div class="app-cell">
                     <img class="app-icon" src="assets/img/amp.svg" />
diff --git a/ghost/admin/app/templates/settings/integrations/firstpromoter.hbs b/ghost/admin/app/templates/settings/integrations/firstpromoter.hbs
index 8ca9eb508f..3c75af6069 100644
--- a/ghost/admin/app/templates/settings/integrations/firstpromoter.hbs
+++ b/ghost/admin/app/templates/settings/integrations/firstpromoter.hbs
@@ -1,19 +1,24 @@
 <section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            <LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            FirstPromoter
-        </h2>
+    <GhCanvasHeader class="gh-canvas-header sticky">
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}}
+                <LinkTo @route="settings.integrations" data-test-link="integrations-back">
+                    Integrations
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} FirstPromoter
+            </div>
+        </div>
         <section class="view-actions">
             <GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
         </section>
     </GhCanvasHeader>
 
     <section class="view-container">
-        <section class="gh-main-section bt app-grid">
+        <section class="gh-main-section app-grid">
             <div class="gh-main-section-block app-detail-heading app-grid">
                 <div class="app-cell">
                     <img class="app-icon" src="assets/img/firstpromoter.png" />
diff --git a/ghost/admin/app/templates/settings/integrations/slack-loading.hbs b/ghost/admin/app/templates/settings/integrations/slack-loading.hbs
index 2e2bba4f09..f1fce17a88 100644
--- a/ghost/admin/app/templates/settings/integrations/slack-loading.hbs
+++ b/ghost/admin/app/templates/settings/integrations/slack-loading.hbs
@@ -1,12 +1,17 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            <LinkTo @route="settings.integrations">Integrations</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            Slack
-        </h2>
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}}
+                <LinkTo @route="settings.integrations" data-test-link="integrations-back">
+                    Integrations
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} Slack
+            </div>
+        </div>
         <section class="view-actions"></section>
     </GhCanvasHeader>
 
diff --git a/ghost/admin/app/templates/settings/integrations/slack.hbs b/ghost/admin/app/templates/settings/integrations/slack.hbs
index d4c0d4ac68..2a66c2611f 100644
--- a/ghost/admin/app/templates/settings/integrations/slack.hbs
+++ b/ghost/admin/app/templates/settings/integrations/slack.hbs
@@ -1,19 +1,24 @@
 <section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            <LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            Slack
-        </h2>
+    <GhCanvasHeader class="gh-canvas-header sticky">
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}}
+                <LinkTo @route="settings.integrations" data-test-link="integrations-back">
+                    Integrations
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} Slack
+            </div>
+        </div>
         <section class="view-actions">
             <GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
         </section>
     </GhCanvasHeader>
 
     <section class="view-container">
-        <section class="gh-main-section bt app-grid">
+        <section class="gh-main-section app-grid">
             <div class="gh-main-section-block app-detail-heading app-grid">
                 <div class="app-cell">
                     <img class="app-icon" src="assets/img/slackicon.png" />
diff --git a/ghost/admin/app/templates/settings/integrations/unsplash-loading.hbs b/ghost/admin/app/templates/settings/integrations/unsplash-loading.hbs
index 4485077b8b..ce1b6f3817 100644
--- a/ghost/admin/app/templates/settings/integrations/unsplash-loading.hbs
+++ b/ghost/admin/app/templates/settings/integrations/unsplash-loading.hbs
@@ -1,12 +1,17 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            <LinkTo @route="settings.integrations">Integrations</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            Unsplash
-        </h2>
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}}
+                <LinkTo @route="settings.integrations" data-test-link="integrations-back">
+                    Integrations
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} Unsplash
+            </div>
+        </div>
         <section class="view-actions"></section>
     </GhCanvasHeader>
 
diff --git a/ghost/admin/app/templates/settings/integrations/unsplash.hbs b/ghost/admin/app/templates/settings/integrations/unsplash.hbs
index 5bf92be2de..d4c16e919a 100644
--- a/ghost/admin/app/templates/settings/integrations/unsplash.hbs
+++ b/ghost/admin/app/templates/settings/integrations/unsplash.hbs
@@ -1,19 +1,24 @@
 <section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            <LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            Unsplash
-        </h2>
+    <GhCanvasHeader class="gh-canvas-header sticky">
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}}
+                <LinkTo @route="settings.integrations" data-test-link="integrations-back">
+                    Integrations
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} Unsplash
+            </div>
+        </div>
         <section class="view-actions">
             <GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
         </section>
     </GhCanvasHeader>
 
     <section class="view-container">
-        <section class="gh-main-section bt app-grid">
+        <section class="gh-main-section app-grid">
             <div class="gh-main-section-block app-detail-heading app-grid">
                 <div class="app-cell">
                     <img class="app-icon pa2 id-unsplash" src="assets/img/unsplash.svg" alt="Unsplash" />
diff --git a/ghost/admin/app/templates/settings/integrations/zapier.hbs b/ghost/admin/app/templates/settings/integrations/zapier.hbs
index 6ec470fafe..3cc2a9615a 100644
--- a/ghost/admin/app/templates/settings/integrations/zapier.hbs
+++ b/ghost/admin/app/templates/settings/integrations/zapier.hbs
@@ -1,12 +1,17 @@
 <section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            <LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            Zapier
-        </h2>
+    <GhCanvasHeader class="gh-canvas-header sticky">
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}}
+                <LinkTo @route="settings.integrations" data-test-link="integrations-back">
+                    Integrations
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} Zapier
+            </div>
+        </div>
     </GhCanvasHeader>
 
     <section class="view-container">
diff --git a/ghost/admin/app/templates/settings/labs-loading.hbs b/ghost/admin/app/templates/settings/labs-loading.hbs
index ed6e7f8a50..cb38236f14 100644
--- a/ghost/admin/app/templates/settings/labs-loading.hbs
+++ b/ghost/admin/app/templates/settings/labs-loading.hbs
@@ -1,11 +1,17 @@
 <section class="gh-canvas">
-    <header class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            Labs
-        </h2>
-    </header>
+    <GhCanvasHeader class="gh-canvas-header">
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} Labs
+            </div>
+            <h2 class="gh-canvas-title" data-test-screen-title>
+                Labs
+            </h2>
+        </div>
+    </GhCanvasHeader>
 
     <div class="gh-content">
         <GhLoadingSpinner />
diff --git a/ghost/admin/app/templates/settings/labs.hbs b/ghost/admin/app/templates/settings/labs.hbs
index cdcdd93562..9f090dee66 100644
--- a/ghost/admin/app/templates/settings/labs.hbs
+++ b/ghost/admin/app/templates/settings/labs.hbs
@@ -1,10 +1,16 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            Labs
-        </h2>
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} Labs
+            </div>
+            <h2 class="gh-canvas-title" data-test-screen-title>
+                Labs
+            </h2>
+        </div>
     </GhCanvasHeader>
 
     <section class="view-container settings-debug">
diff --git a/ghost/admin/app/templates/settings/membership.hbs b/ghost/admin/app/templates/settings/membership.hbs
index 685294c1a4..2cb675de3a 100644
--- a/ghost/admin/app/templates/settings/membership.hbs
+++ b/ghost/admin/app/templates/settings/membership.hbs
@@ -1,10 +1,16 @@
 <section class="gh-canvas circle-bg" {{did-insert this.setup}}>
     <GhCanvasHeader class="gh-canvas-header gh-setting-members-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            Membership
-        </h2>
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} Membership
+            </div>
+            <h2 class="gh-canvas-title" data-test-screen-title>
+                Membership
+            </h2>
+        </div>
         <section class="view-actions">
             <GhTaskButton
                 @buttonText="Save"
diff --git a/ghost/admin/app/templates/settings/navigation.hbs b/ghost/admin/app/templates/settings/navigation.hbs
index d5aeeb5c6d..f4f8134ab8 100644
--- a/ghost/admin/app/templates/settings/navigation.hbs
+++ b/ghost/admin/app/templates/settings/navigation.hbs
@@ -1,10 +1,16 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            Navigation
-        </h2>
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} Navigation
+            </div>
+            <h2 class="gh-canvas-title" data-test-screen-title>
+                Navigation
+            </h2>
+        </div>
         <section class="view-actions">
             <GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
         </section>
diff --git a/ghost/admin/app/templates/settings/newsletters.hbs b/ghost/admin/app/templates/settings/newsletters.hbs
index a63cfe42e3..43dcc6836e 100644
--- a/ghost/admin/app/templates/settings/newsletters.hbs
+++ b/ghost/admin/app/templates/settings/newsletters.hbs
@@ -1,10 +1,16 @@
 <section class="gh-canvas gh-setting-email">
     <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
-            <LinkTo @route="settings">Settings</LinkTo>
-            <span>{{svg-jar "arrow-right"}}</span>
-            Email newsletter
-        </h2>
+        <div class="flex flex-column">
+            <div class="gh-canvas-breadcrumb">
+                <LinkTo @route="settings">
+                    Settings
+                </LinkTo>
+                {{svg-jar "arrow-right-small"}} Email newsletter
+            </div>
+            <h2 class="gh-canvas-title" data-test-screen-title>
+                Email newsletter
+            </h2>
+        </div>
         <section class="view-actions">
             <GhTaskButton
                 @buttonText="Save"
diff --git a/ghost/admin/app/templates/settings/staff/index.hbs b/ghost/admin/app/templates/settings/staff/index.hbs
index df20092dc2..fd080ed581 100644
--- a/ghost/admin/app/templates/settings/staff/index.hbs
+++ b/ghost/admin/app/templates/settings/staff/index.hbs
@@ -1,12 +1,19 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>
+        <div class="flex flex-column">
             {{#unless this.session.user.isEditor}}
-                <LinkTo @route="settings">Settings</LinkTo>
-                <span>{{svg-jar "arrow-right"}}</span>
+                <div class="gh-canvas-breadcrumb">
+                    <LinkTo @route="settings" data-test-breadcrumb>
+                        Settings
+                    </LinkTo>
+                    {{svg-jar "arrow-right-small"}} Staff
+                </div>
             {{/unless}}
-            Staff
-        </h2>
+            <h2 class="gh-canvas-title" data-test-screen-title>
+                Staff
+            </h2>
+        </div>
+
         {{!-- Do not show Invite user button to authors --}}
         {{#unless this.currentUser.isAuthorOrContributor}}
             <section class="view-actions">
diff --git a/ghost/admin/app/templates/settings/staff/user-loading.hbs b/ghost/admin/app/templates/settings/staff/user-loading.hbs
index 63e193f293..844fdb8c66 100644
--- a/ghost/admin/app/templates/settings/staff/user-loading.hbs
+++ b/ghost/admin/app/templates/settings/staff/user-loading.hbs
@@ -1,18 +1,29 @@
 <section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header">
+    <GhCanvasHeader class="gh-canvas-header sticky">
         {{!-- Remove breadcrumbs for Authors and Contributors --}}
-        {{#if this.session.user.isAuthorOrContributor}}
+        {{#if this.currentUser.isAuthorOrContributor}}
             <h2 class="gh-canvas-title" data-test-screen-title>Your profile</h2>
         {{else}}
-            <h2 class="gh-canvas-title" data-test-screen-title>
-                {{#unless this.session.user.isEditor}}
-                    <LinkTo @route="settings">Settings</LinkTo>
-                    <span>{{svg-jar "arrow-right"}}</span>
-                {{/unless}}
-                <LinkTo @route="settings.staff" data-test-staff-link={{true}}>Staff</LinkTo>
-                <span>{{svg-jar "arrow-right"}}</span>
-                {{this.user.name}}
-            </h2>
+            <div class="flex flex-column">
+                <div class="gh-canvas-breadcrumb">
+                    {{#unless this.session.user.isEditor}}
+                        <LinkTo @route="settings">
+                            Settings
+                        </LinkTo>
+                        {{svg-jar "arrow-right-small"}}
+                    {{/unless}}
+                    <LinkTo @route="settings.staff" data-test-staff-link={{true}}>
+                        Staff
+                    </LinkTo>
+                    {{svg-jar "arrow-right-small"}} Profile
+                </div>
+                <h2 class="gh-canvas-title" data-test-screen-title>
+                    {{this.user.name}}
+                    {{#if this.user.isSuspended}}
+                        <span class="gh-badge suspended" data-test-suspended-badge>Suspended</span>
+                    {{/if}}
+                </h2>
+            </div>
         {{/if}}
 
         <section class="view-actions">
diff --git a/ghost/admin/app/templates/settings/staff/user.hbs b/ghost/admin/app/templates/settings/staff/user.hbs
index 9440026dff..fdb60f9569 100644
--- a/ghost/admin/app/templates/settings/staff/user.hbs
+++ b/ghost/admin/app/templates/settings/staff/user.hbs
@@ -4,19 +4,26 @@
         {{#if this.currentUser.isAuthorOrContributor}}
             <h2 class="gh-canvas-title" data-test-screen-title>Your profile</h2>
         {{else}}
-            <h2 class="gh-canvas-title" data-test-screen-title>
-                {{#unless this.session.user.isEditor}}
-                    <LinkTo @route="settings">Settings</LinkTo>
-                    <span>{{svg-jar "arrow-right"}}</span>
-                {{/unless}}
-                <LinkTo @route="settings.staff" data-test-staff-link={{true}}>Staff</LinkTo>
-                <span>{{svg-jar "arrow-right"}}</span>
-                {{this.user.name}}
-
-                {{#if this.user.isSuspended}}
-                    <span class="gh-badge suspended" data-test-suspended-badge>Suspended</span>
-                {{/if}}
-            </h2>
+            <div class="flex flex-column">
+                <div class="gh-canvas-breadcrumb" data-test-breadcrumb>
+                    {{#unless this.session.user.isEditor}}
+                        <LinkTo @route="settings">
+                            Settings
+                        </LinkTo>
+                        {{svg-jar "arrow-right-small"}}
+                    {{/unless}}
+                    <LinkTo @route="settings.staff" data-test-staff-link={{true}}>
+                        Staff
+                    </LinkTo>
+                    {{svg-jar "arrow-right-small"}} Profile
+                </div>
+                <h2 class="gh-canvas-title" data-test-screen-title>
+                    {{this.user.name}}
+                    {{#if this.user.isSuspended}}
+                        <span class="gh-badge suspended" data-test-suspended-badge>Suspended</span>
+                    {{/if}}
+                </h2>
+            </div>
         {{/if}}
 
         <section class="view-actions">
diff --git a/ghost/admin/app/templates/tag.hbs b/ghost/admin/app/templates/tag.hbs
index 3d36a17d86..585e555cf6 100644
--- a/ghost/admin/app/templates/tag.hbs
+++ b/ghost/admin/app/templates/tag.hbs
@@ -1,11 +1,18 @@
 <section class="gh-canvas">
     <form class="mb15">
         <GhCanvasHeader class="gh-canvas-header">
-            <h2 class="gh-canvas-title" data-test-screen-title>
-                <LinkTo @route="tags" data-test-link="tags-back">Tags</LinkTo>
-                <span>{{svg-jar "arrow-right"}}</span>
-                {{if this.tag.isNew "New tag" this.tag.name}}
-            </h2>
+            <div class="flex flex-column">
+                <div class="gh-canvas-breadcrumb">
+                    <LinkTo @route="tags" data-test-link="tags-back">
+                        Tags
+                    </LinkTo>
+                    {{svg-jar "arrow-right-small"}} {{if this.tag.isNew "New tag" this.tag.name}}
+                </div>
+                <h2 class="gh-canvas-title" data-test-screen-title>
+                    {{if this.tag.isNew "New tag" this.tag.name}}
+                </h2>
+            </div>
+
             <section class="view-actions">
                 <GhTaskButton
                     @task={{this.saveTask}}
diff --git a/ghost/admin/app/templates/tags-loading.hbs b/ghost/admin/app/templates/tags-loading.hbs
index 3940a123b1..28395e632b 100644
--- a/ghost/admin/app/templates/tags-loading.hbs
+++ b/ghost/admin/app/templates/tags-loading.hbs
@@ -1,5 +1,5 @@
 <section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header">
+    <GhCanvasHeader class="gh-canvas-header sticky">
         <h2 class="gh-canvas-title" data-test-screen-title>Tags</h2>
         <section class="view-actions">
             <LinkTo @route="tag.new" class="gh-btn gh-btn-primary"><span>New tag</span></LinkTo>
diff --git a/ghost/admin/app/templates/tags.hbs b/ghost/admin/app/templates/tags.hbs
index 35a4a30870..8e80860026 100644
--- a/ghost/admin/app/templates/tags.hbs
+++ b/ghost/admin/app/templates/tags.hbs
@@ -1,5 +1,5 @@
 <section class="gh-canvas" {{on-key "c" this.newTag}}>
-    <GhCanvasHeader class="gh-canvas-header">
+    <GhCanvasHeader class="gh-canvas-header sticky">
         <h2 class="gh-canvas-title" data-test-screen-title>Tags</h2>
         <section class="view-actions">
             <div class="gh-contentfilter gh-btn-group">
diff --git a/ghost/admin/tests/acceptance/content-test.js b/ghost/admin/tests/acceptance/content-test.js
index 987347c96c..61c9f3a7d9 100644
--- a/ghost/admin/tests/acceptance/content-test.js
+++ b/ghost/admin/tests/acceptance/content-test.js
@@ -197,7 +197,7 @@ describe('Acceptance: Content', function () {
             // clicking sidebar custom view link works
             await click('[data-test-nav-custom="posts-Scheduled"]');
             expect(currentURL()).to.equal('/posts?type=scheduled');
-            expect(find('[data-test-screen-title]').innerText).to.match(/Posts[\n\s]+Scheduled/);
+            expect(find('[data-test-screen-title]').innerText).to.match(/Scheduled/);
             expect(find('[data-test-nav-custom="posts-Scheduled"]')).to.have.class('active');
 
             // clicking the main posts link resets
@@ -210,7 +210,7 @@ describe('Acceptance: Content', function () {
             await selectChoose('[data-test-type-select]', 'Scheduled posts');
             expect(currentURL()).to.equal('/posts?type=scheduled');
             expect(find('[data-test-nav-custom="posts-Scheduled"]')).to.have.class('active');
-            expect(find('[data-test-screen-title]').innerText).to.match(/Posts[\n\s]+Scheduled/);
+            expect(find('[data-test-screen-title]').innerText).to.match(/Scheduled/);
         });
     });
 
diff --git a/ghost/admin/tests/acceptance/staff-test.js b/ghost/admin/tests/acceptance/staff-test.js
index 18fb2bf172..2dbae4e9b7 100644
--- a/ghost/admin/tests/acceptance/staff-test.js
+++ b/ghost/admin/tests/acceptance/staff-test.js
@@ -140,11 +140,11 @@ describe('Acceptance: Staff', function () {
 
             // view title should exist and be linkable and active
             expect(
-                find('[data-test-screen-title] a[href="/ghost/settings/staff"]').classList.contains('active'),
+                find('[data-test-breadcrumb] a[href="/ghost/settings/staff"]').classList.contains('active'),
                 'has linkable url back to staff main page'
             ).to.be.true;
 
-            await click('[data-test-screen-title] a');
+            await click('[data-test-breadcrumb] a');
 
             // url should be /staff again
             expect(currentURL(), 'url after clicking back').to.equal('/settings');