diff --git a/admin/javascript/src/components/north-header-breadcrumbs/index.js b/admin/javascript/src/components/north-header-breadcrumbs/index.js
index 47f5f9b14..808c464d2 100644
--- a/admin/javascript/src/components/north-header-breadcrumbs/index.js
+++ b/admin/javascript/src/components/north-header-breadcrumbs/index.js
@@ -20,21 +20,15 @@ class NorthHeaderBreadcrumbsComponent extends SilverStripeComponent {
       return null;
     }
 
-    const breadcrumbs = this.props.crumbs.map((crumb, index, crumbs) => {
-      let component;
-      // If its the last item in the array
-      if (index === crumbs.length - 1) {
-        component = <span key={index} className="crumb last">{crumb.text}</span>;
-      } else {
-        component = [
-          <a key={index} className="cms-panel-link crumb" href={crumb.href}>{crumb.text}</a>,
-          <span className="sep">/</span>,
-        ];
-      }
-      return component;
-    });
-
-    return breadcrumbs;
+    return [].concat(
+     this.props.crumbs.slice(0, -1).map((crumb, index) => [
+       <a key={index} className="cms-panel-link crumb" href={crumb.href}>{crumb.text}</a>,
+       <span className="sep">/</span>,
+     ]),
+       this.props.crumbs.slice(-1).map((crumb, index) => [
+         <span key={index} className="crumb last">{crumb.text}</span>,
+       ])
+    );
   }
 
 }
diff --git a/admin/javascript/src/components/north-header-breadcrumbs/tests/north-header-breadcrumbs-test.js b/admin/javascript/src/components/north-header-breadcrumbs/tests/north-header-breadcrumbs-test.js
index 88c7fb729..e5dc92ca3 100644
--- a/admin/javascript/src/components/north-header-breadcrumbs/tests/north-header-breadcrumbs-test.js
+++ b/admin/javascript/src/components/north-header-breadcrumbs/tests/north-header-breadcrumbs-test.js
@@ -17,16 +17,18 @@ describe('NorthHeaderBreadcrumbsComponent', () => {
     it('should convert the props.crumbs array into jsx to be rendered', () => {
       props.crumbs = [
         { text: 'breadcrumb1', href: 'href1'},
-        { text: 'breadcrumb2', href: 'href2'}
+        { text: 'breadcrumb2', href: 'href2'},
+        { text: 'breadcrumb3', href: 'href3'}
       ];
 
       northHeaderBreadcrumbs = ReactTestUtils.renderIntoDocument(
         <NorthHeaderBreadcrumbsComponent {...props} />
       );
-
       expect(northHeaderBreadcrumbs.getBreadcrumbs()[0][0].props.children).toBe('breadcrumb1');
       expect(northHeaderBreadcrumbs.getBreadcrumbs()[0][1].props.children).toBe('/');
-      expect(northHeaderBreadcrumbs.getBreadcrumbs()[1].props.children).toBe('breadcrumb2');
+      expect(northHeaderBreadcrumbs.getBreadcrumbs()[1][0].props.children).toBe('breadcrumb2');
+      expect(northHeaderBreadcrumbs.getBreadcrumbs()[1][1].props.children).toBe('/');
+      expect(northHeaderBreadcrumbs.getBreadcrumbs()[2][0].props.children).toBe('breadcrumb3');
     });
 
     it('should return null if props.crumbs is not set', () => {