Breadcrumbs update for mobile, ellipsis tap to show all breadcrumbs

src/components/breadcrumbs/_breadcrumbs.hbs

@@ -1,9 +1,19 @@
 <nav aria-label="{{label}}" class="nsw-breadcrumbs">
   <ol>
     {{#each items}}
-    <li>
-      <a href="{{url}}"{{#if @last}} class="current" aria-current="page"{{/if}}>{{text}}</a>
-    </li>
+      {{#if @first}}
+        <li>
+          <a href="{{url}}">{{text}}</a>
+        </li>
+        <li class="nsw-breadcrumbs__show-more">
+          <input id="breadcrumb-toggle" class="nsw-breadcrumbs__toggle" type="checkbox" aria-label="Show more breadcrumbs"/>
+          <label for="breadcrumb-toggle" class="nsw-breadcrumbs__ellipsis">…</label>
+        </li>
+      {{else}}
+        <li>
+          <a href="{{url}}"{{#if @last}} class="current" aria-current="page"{{/if}}>{{text}}</a>
+        </li>
+      {{/if}}
     {{/each}}
   </ol>
 </nav>

src/components/breadcrumbs/_breadcrumbs.scss

@@ -9,49 +9,67 @@
   }
 
   li {
-    display: none;
+    display: inline;
 
-    &::before {
-      @include material-icons;
-      content: 'keyboard_arrow_right';
-      content: 'keyboard_arrow_right' / '';
-      font-size: rem(map-get($nsw-icon-sizes, 20));
-      line-height: rem(8px);
-      display: inline-block;
-      position: relative;
-      top: rem(6px);
-    }
-
-    @include breakpoint('md') {
-      display: inline;
-    }
-
-    &:nth-last-child(2),
-    &:last-child {
-      display: inline;
+    &:first-child {
+      &::before {
+        display: none;
+      }
     }
 
-    &:nth-last-child(2) {
+    &:nth-child(2) {
       &::before {
-        display: none;
+        display: inline-block;
 
         @include breakpoint('md') {
-          display: inline-block;
+          display: none;
         }
       }
     }
 
-    &:first-child {
-      &::before {
+    .nsw-breadcrumbs__toggle {
+      display: none;
+    }
+
+    .nsw-breadcrumbs__ellipsis {
+      cursor: pointer;
+      display: inline-block;
+
+      @include breakpoint('md') {
         display: none;
+      }
+    }
 
-        @include breakpoint('md') {
-          display: none;
-        }
+    .nsw-breadcrumbs__toggle:checked + .nsw-breadcrumbs__ellipsis {
+      display: none;
+    }
+
+    &*:not(:first-child):not(:last-child):not(:nth-last-child(2)):not(.nsw-breadcrumbs__show-more) {
+      display: none;
+
+      @include breakpoint('md') {
+        display: inline-block;
       }
     }
   }
 
+  .nsw-breadcrumbs__toggle:checked ~ li {
+    display: inline-block;
+    background: var(--nsw-text-dark);
+  }
+
+  li {
+    &::before {
+      @include material-icons;
+      content: 'keyboard_arrow_right';
+      font-size: rem(map-get($nsw-icon-sizes, 20));
+      line-height: rem(8px);
+      display: inline-block;
+      position: relative;
+      top: rem(6px);
+    }
+  }
+
   a {
     font-weight: var(--nsw-font-normal);
 
@@ -60,15 +78,15 @@
       pointer-events: none;
       color: var(--nsw-text-dark);
 
-      .nsw-section--invert & {    
+      .nsw-section--invert & {
         color: var(--nsw-text-light);
       }
     }
   }
 }
 
 @supports (content: 'x' / 'y') {
-  .nsw-breadcrumbs {  
+  .nsw-breadcrumbs {
     li {
       &::before {
         content: 'keyboard_arrow_right' / '';
@@ -78,7 +96,7 @@
 }
 
 @media speech {
-  .nsw-breadcrumbs {  
+  .nsw-breadcrumbs {
     li {
       &::before {
         display: none;

src/components/breadcrumbs/blank.hbs

@@ -1,7 +1,7 @@
 ---
 title: Breadcrumbs
 width: narrow
-model: json/breadcrumbs.json
+model: json/breadcrumbs-2.json
 page: true
 ---
 

src/components/breadcrumbs/json/breadcrumbs-2.json

@@ -0,0 +1,29 @@
+{
+  "label": "Breadcrumbs",
+  "items": [
+    {
+      "text": "Home",
+      "url": "#"
+    },
+    {
+      "text": "About DPC",
+      "url": "#"
+    },
+    {
+      "text": "Assurance",
+      "url": "#"
+    },
+    {
+      "text": "Strategy",
+      "url": "#"
+    },
+    {
+      "text": "NSW Digital Design System",
+      "url": "#"
+    },
+    {
+      "text": "Content design",
+      "url": "#"
+    }
+  ]
+}