From 5659671061dd169fa365581f71676d052b192475 Mon Sep 17 00:00:00 2001
From: Adam Tirella <macandcheese@users.noreply.github.com>
Date: Thu, 27 Jul 2023 17:53:55 -0700
Subject: [PATCH] feat(menu-item): Update spacing and icon layout (#7381)

**Related Issue:** #7105

## Summary
Updates Menu Item to reflect Figma designs for complex combinations of
props:
<img width="330" alt="Screenshot 2023-07-26 at 3 22 06 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/9a5da692-7698-4739-b984-e61409521eb4">
---
 .../src/components/menu-item/menu-item.scss   |  38 +++++-
 .../components/menu-item/menu-item.stories.ts |  18 +--
 .../src/components/menu-item/menu-item.tsx    |  20 +--
 .../src/components/menu/menu.stories.ts       | 119 ++++++++++++++++--
 .../calcite-components/src/demos/menu.html    |  74 ++++++-----
 5 files changed, 208 insertions(+), 61 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 6db7a85d12f..2669dcf209e 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -68,6 +68,9 @@
     --calcite-ui-icon-color: var(--calcite-ui-brand);
   }
 }
+:host([layout="vertical"]) .content {
+  @apply px-3;
+}
 
 .icon--start {
   @apply me-3;
@@ -77,13 +80,28 @@
   @apply ms-3;
 }
 
+:host([layout="vertical"]) .icon--end {
+  @apply ms-auto ps-3;
+}
+
 .icon--dropdown {
   @apply ms-auto me-0 ps-2 relative;
   --calcite-ui-icon-color: var(--calcite-ui-text-3);
 }
 
-:host([layout="vertical"]) .icon--dropdown {
-  inset-inline-start: theme("spacing.1");
+:host([layout="vertical"]) .icon--end ~ .icon--dropdown {
+  @apply ms-3;
+}
+
+:host([layout="vertical"]) .hover-href-icon {
+  @apply ps-2;
+}
+:host([layout="vertical"]) .hover-href-icon ~ .icon--end {
+  @apply ms-2;
+}
+
+:host([layout="vertical"]) .hover-href-icon ~ .icon--breadcrumb {
+  @apply ms-3;
 }
 
 .icon--breadcrumb {
@@ -91,6 +109,18 @@
   --calcite-ui-icon-color: var(--calcite-ui-text-3);
 }
 
+:host([layout="vertical"]) .icon--breadcrumb {
+  @apply ms-auto;
+}
+
+:host([layout="vertical"]) .icon--breadcrumb ~ .icon--dropdown {
+  @apply ms-2;
+}
+
+:host([layout="vertical"]) .icon--end ~ .icon--breadcrumb {
+  @apply ms-2;
+}
+
 :host([breadcrumb]) .content {
   @apply pe-3;
 }
@@ -151,7 +181,7 @@ calcite-action {
 }
 
 :host([slot="submenu-item"]) .parent--vertical {
-  padding-inline-start: theme("spacing.7");
+  @apply ps-6;
 }
 
 .dropdown-menu-items.nested.calcite--rtl {
@@ -163,7 +193,7 @@ calcite-action {
 }
 
 .hover-href-icon {
-  @apply ps-8 ms-auto relative end-1 opacity-0;
+  @apply ms-auto relative end-1 opacity-0;
   transition: all var(--calcite-internal-animation-timing-medium) ease-in-out;
 }
 
diff --git a/packages/calcite-components/src/components/menu-item/menu-item.stories.ts b/packages/calcite-components/src/components/menu-item/menu-item.stories.ts
index d793f4669db..86fa712f76e 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.stories.ts
+++ b/packages/calcite-components/src/components/menu-item/menu-item.stories.ts
@@ -11,7 +11,7 @@ export default {
   ...storyFilters(),
 };
 
-export const simple = (): string => html` <calcite-menu>
+export const simple = (): string => html`<calcite-menu>
   <calcite-menu-item
     text="${text("text", "Menu item")}"
     src="${text("src", "")}"
@@ -24,7 +24,7 @@ export const simple = (): string => html` <calcite-menu>
   />
 </calcite-menu>`;
 
-export const iconStart = (): string => html` <calcite-menu>
+export const iconStart = (): string => html`<calcite-menu>
   <calcite-menu-item
     text="${text("text", "Menu item")}"
     src="${text("src", "")}"
@@ -38,7 +38,7 @@ export const iconStart = (): string => html` <calcite-menu>
   />
 </calcite-menu>`;
 
-export const iconEnd = (): string => html` <calcite-menu>
+export const iconEnd = (): string => html`<calcite-menu>
   <calcite-menu-item
     text="${text("text", "Menu item")}"
     src="${text("src", "")}"
@@ -52,7 +52,7 @@ export const iconEnd = (): string => html` <calcite-menu>
   />
 </calcite-menu>`;
 
-export const iconsBoth = (): string => html` <calcite-menu>
+export const iconsBoth = (): string => html`<calcite-menu>
   <calcite-menu-item
     text="${text("text", "Menu item")}"
     src="${text("src", "")}"
@@ -67,11 +67,11 @@ export const iconsBoth = (): string => html` <calcite-menu>
   />
 </calcite-menu>`;
 
-export const allIconsAndSubMenu_TestOnly = (): string => html` <calcite-menu>
+export const allIconsAndSubMenu_TestOnly = (): string => html`<calcite-menu>
   <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
   <calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
   <calcite-menu-item text="Example item 3" text-enabled icon-start="layer" icon-end="layer" breadcrumb>
-    <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled> </calcite-menu-item>
+    <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
     <calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled>
       <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
     </calcite-menu-item>
@@ -83,7 +83,7 @@ export const allIconsAndSubMenuVertical_TestOnly = (): string => html`<calcite-m
   <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
   <calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
   <calcite-menu-item text="Example item 3" text-enabled icon-start="layer" icon-end="layer" breadcrumb>
-    <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled> </calcite-menu-item>
+    <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
     <calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled>
       <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
     </calcite-menu-item>
@@ -97,6 +97,6 @@ export const darkModeRTL_TestOnly = (): string =>
     active
     dir="rtl"
     class="calcite-mode-dark"
-    icon-start="Layers"
-    icon-end="Layers"
+    icon-start="layer"
+    icon-end="layer"
   />`;
diff --git a/packages/calcite-components/src/components/menu-item/menu-item.tsx b/packages/calcite-components/src/components/menu-item/menu-item.tsx
index 885cfdfe655..306ae9bea7f 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.tsx
+++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx
@@ -437,13 +437,26 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
     );
   }
 
+  renderHrefIcon(dir: Direction): VNode {
+    return (
+      <calcite-icon
+        class={CSS.hoverHrefIcon}
+        icon={dir === "rtl" ? "arrow-left" : "arrow-right"}
+        key={CSS.hoverHrefIcon}
+        scale="s"
+      />
+    );
+  }
+
   renderItemContent(dir: Direction): VNode {
+    const hasHref = this.href && (this.topLevelMenuLayout === "vertical" || !this.isTopLevelItem);
     return (
       <Fragment>
         {this.iconStart && this.renderIconStart()}
         <div class={CSS.textContainer}>
           <span>{this.text}</span>
         </div>
+        {hasHref && this.renderHrefIcon(dir)}
         {this.iconEnd && this.renderIconEnd()}
         {this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null}
         {!this.href && this.hasSubmenu ? this.renderDropdownIcon(dir) : null}
@@ -480,13 +493,6 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
               ref={(el) => (this.anchorEl = el)}
             >
               {this.renderItemContent(dir)}
-              {this.href && (this.topLevelMenuLayout === "vertical" || !this.isTopLevelItem) ? (
-                <calcite-icon
-                  class={CSS.hoverHrefIcon}
-                  icon={dir === "rtl" ? "arrow-left" : "arrow-right"}
-                  scale="s"
-                />
-              ) : null}
             </a>
             {this.href && this.hasSubmenu ? this.renderDropdownAction(dir) : null}
           </div>
diff --git a/packages/calcite-components/src/components/menu/menu.stories.ts b/packages/calcite-components/src/components/menu/menu.stories.ts
index d56745a1491..81b462cb10f 100644
--- a/packages/calcite-components/src/components/menu/menu.stories.ts
+++ b/packages/calcite-components/src/components/menu/menu.stories.ts
@@ -11,7 +11,7 @@ export default {
   ...storyFilters(),
 };
 
-export const simple = (): string => html` <calcite-menu
+export const simple = (): string => html`<calcite-menu
   layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
 >
   <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
@@ -19,32 +19,74 @@ export const simple = (): string => html` <calcite-menu
   <calcite-menu-item text="Example item 3" text-enabled></calcite-menu-item>
 </calcite-menu>`;
 
+export const iconsAndBreadcrumb = (): string => html`<calcite-menu>
+  <calcite-menu-item
+    icon-start="layer"
+    breadcrumb
+    icon-end="layer"
+    text="Example item 1"
+    text-enabled
+  ></calcite-menu-item>
+  <calcite-menu-item
+    icon-start="layer"
+    breadcrumb
+    icon-end="layer"
+    text="Example item 2"
+    text-enabled
+  ></calcite-menu-item>
+  <calcite-menu-item icon-start="layer" icon-end="layer" text="Example item 3" active text-enabled></calcite-menu-item>
+</calcite-menu>`;
+
+export const iconsAndBreadcrumbVertical_TestOnly = (): string => html`<calcite-menu layout="vertical">
+  <calcite-menu-item
+    icon-start="layer"
+    breadcrumb
+    icon-end="layer"
+    text="Example item 1"
+    text-enabled
+  ></calcite-menu-item>
+  <calcite-menu-item
+    icon-start="layer"
+    breadcrumb
+    icon-end="layer"
+    text="Example item 2"
+    text-enabled
+  ></calcite-menu-item>
+  <calcite-menu-item icon-start="layer" icon-end="layer" text="Example item 3" active text-enabled></calcite-menu-item>
+</calcite-menu>`;
+
 export const withNesting = (): string => html`<calcite-panel>
   <calcite-menu layout="${select("layout", ["horizontal", "vertical"], "horizontal")}">
     <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
     <calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
-    <calcite-menu-item text="Example item 3" text-enabled>
-      <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled> </calcite-menu-item>
+    <calcite-menu-item text="Example item 3" text-enabled open>
+      <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
       <calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled>
         <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
         <calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled></calcite-menu-item>
         <calcite-menu-item slot="submenu-item" text="Example submenu item 3" text-enabled></calcite-menu-item>
       </calcite-menu-item>
-      <calcite-menu-item slot="submenu-item" text="Example submenu item 3" text-enabled> </calcite-menu-item>
+      <calcite-menu-item slot="submenu-item" text="Example submenu item 3" text-enabled></calcite-menu-item>
     </calcite-menu-item>
-    <calcite-menu-item text="Example item 4" text-enabled></calcite-menu-item> </calcite-menu
+    <calcite-menu-item text="Example item 4" text-enabled></calcite-menu-item></calcite-menu
 ></calcite-panel>`;
 
 export const WithSubmenuOpen_TestOnly = (): string => html`<calcite-menu>
   <calcite-menu-item text="Item" href="#item" open>
-    <calcite-menu-item text="item1" slot="submenu-item" active> </calcite-menu-item>
+    <calcite-menu-item text="item1" slot="submenu-item" active></calcite-menu-item>
+    <calcite-menu-item text="item2" slot="submenu-item"></calcite-menu-item>
   </calcite-menu-item>
+  <calcite-menu-item text="Item 2" href="#item"></calcite-menu-item>
+  <calcite-menu-item text="Item 3" href="#item"></calcite-menu-item>
 </calcite-menu>`;
 
-export const WithSubmenuOpenInVerticalLayout_TestOnly = (): string => html` <calcite-menu layout="vertical">
+export const WithSubmenuOpenInVerticalLayout_TestOnly = (): string => html`<calcite-menu layout="vertical">
   <calcite-menu-item text="Item" href="#item" open>
-    <calcite-menu-item text="item1" slot="submenu-item" active> </calcite-menu-item>
+    <calcite-menu-item text="item1" slot="submenu-item" active></calcite-menu-item>
+    <calcite-menu-item text="item2" slot="submenu-item"></calcite-menu-item>
   </calcite-menu-item>
+  <calcite-menu-item text="Item 2" href="#item"></calcite-menu-item>
+  <calcite-menu-item text="Item 3" href="#item"></calcite-menu-item>
 </calcite-menu>`;
 
 export const darkModeRTL_TestOnly = (): string => html`<calcite-menu dir="rtl" class="calcite-mode-dark">
@@ -53,6 +95,67 @@ export const darkModeRTL_TestOnly = (): string => html`<calcite-menu dir="rtl" c
   <calcite-menu-item text="Example item 3" text-enabled></calcite-menu-item>
 </calcite-menu>`;
 
+export const verticalComplexUseCase_TestOnly = (): string => html`<calcite-shell-panel width-scale="l">
+  <calcite-panel heading="Extreme nested vertical menu">
+    <calcite-menu layout="vertical">
+      <calcite-menu-item icon-start="layer" icon-end="layer" text="Home"></calcite-menu-item>
+      <calcite-menu-item
+        icon-start="layer"
+        icon-end="layer"
+        href="#"
+        text="Example nested"
+        icon-start="layer"
+        breadcrumb
+      >
+        <calcite-menu-item icon-end="layer" icon-start="layer" slot="submenu-item" text="Capabilities">
+        </calcite-menu-item>
+        <calcite-menu-item icon-start="layer" slot="submenu-item" title text="ArcGIS Online" breadcrumb open>
+          <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities">
+            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"></calcite-menu-item>
+            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"></calcite-menu-item>
+            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"></calcite-menu-item>
+          </calcite-menu-item>
+        </calcite-menu-item>
+      </calcite-menu-item>
+      <calcite-menu-item text="Example nested" icon-start="layer" icon-end="layer" breadcrumb open>
+        <calcite-menu-item slot="submenu-item" title text="ArcGIS Online" breadcrumb open>
+          <calcite-menu-item icon-start="layer" slot="submenu-item" text="Great examples" breadcrumb>
+          </calcite-menu-item>
+          <calcite-menu-item slot="submenu-item" text="Capabilities" open>
+            <calcite-menu-item slot="submenu-item" text="Capabilities" icon-end="layer"></calcite-menu-item>
+            <calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"></calcite-menu-item>
+          </calcite-menu-item>
+          <calcite-menu-item slot="submenu-item" text="Something else"></calcite-menu-item>
+          <calcite-menu-item slot="submenu-item" text="Another thing">
+            <calcite-menu-item slot="submenu-item" text="Great examples">
+              <calcite-menu-item slot="submenu-item" text="Great examples" breadcrumb></calcite-menu-item>
+              <calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"></calcite-menu-item>
+              <calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
+            </calcite-menu-item>
+          </calcite-menu-item>
+        </calcite-menu-item>
+        <calcite-menu-item href="#" slot="submenu-item" text="It's stupendous">
+          <calcite-menu-item slot="submenu-item" text="Very nice example"></calcite-menu-item>
+          <calcite-menu-item icon-start="layer" slot="submenu-item" text="Short one" open>
+            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Another thing" open>
+              <calcite-menu-item icon-start="layer" slot="submenu-item" text="Great examples" open>
+                <calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
+                <calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
+                <calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
+              </calcite-menu-item>
+            </calcite-menu-item>
+          </calcite-menu-item>
+        </calcite-menu-item>
+        <calcite-menu-item slot="submenu-item" text="Capabilities"></calcite-menu-item>
+      </calcite-menu-item>
+      <calcite-menu-item slot="submenu-item" text="Capabilities"></calcite-menu-item>
+      <calcite-menu-item text="Reference" active></calcite-menu-item>
+      <calcite-menu-item text="Reference"></calcite-menu-item>
+      <calcite-menu-item text="Reference"></calcite-menu-item>
+    </calcite-menu>
+  </calcite-panel>
+</calcite-shell-panel>`;
+
 export const verticalLayoutInDarkModeRTL_TestOnly = (): string => html`<calcite-menu
   layout="vertical"
   dir="rtl"
diff --git a/packages/calcite-components/src/demos/menu.html b/packages/calcite-components/src/demos/menu.html
index 27d497e1f41..0f17c1c94c6 100644
--- a/packages/calcite-components/src/demos/menu.html
+++ b/packages/calcite-components/src/demos/menu.html
@@ -331,10 +331,17 @@ <h3>
         <calcite-panel heading="Extreme nested vertical menu">
           <calcite-menu layout="vertical">
             <calcite-menu-item icon-start="layer" icon-end="layer" text="Home"> </calcite-menu-item>
-            <calcite-menu-item icon-start="layer" icon-end="layer" href="#" text="Example nested" icon-start="layer">
+            <calcite-menu-item
+              icon-start="layer"
+              icon-end="layer"
+              href="#"
+              text="Example nested"
+              icon-start="layer"
+              breadcrumb
+            >
               <calcite-menu-item icon-end="layer" icon-start="layer" slot="submenu-item" text="Capabilities">
               </calcite-menu-item>
-              <calcite-menu-item icon-start="layer" slot="submenu-item" title text="ArcGIS Online">
+              <calcite-menu-item icon-start="layer" slot="submenu-item" title text="ArcGIS Online" breadcrumb open>
                 <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities">
                   <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"> </calcite-menu-item>
                   <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"> </calcite-menu-item>
@@ -342,18 +349,19 @@ <h3>
                 </calcite-menu-item>
               </calcite-menu-item>
             </calcite-menu-item>
-            <calcite-menu-item text="Example nested" icon-start="layer" icon-end="layer">
-              <calcite-menu-item slot="submenu-item" title text="ArcGIS Online">
-                <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
-                <calcite-menu-item slot="submenu-item" text="Capabilities">
-                  <calcite-menu-item slot="submenu-item" text="Capabilities"> </calcite-menu-item>
-                  <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
+            <calcite-menu-item text="Example nested" icon-start="layer" icon-end="layer" breadcrumb open>
+              <calcite-menu-item slot="submenu-item" title text="ArcGIS Online" breadcrumb open>
+                <calcite-menu-item icon-start="layer" slot="submenu-item" text="Great examples" breadcrumb>
+                </calcite-menu-item>
+                <calcite-menu-item slot="submenu-item" text="Capabilities" open>
+                  <calcite-menu-item slot="submenu-item" text="Capabilities" icon-end="layer"> </calcite-menu-item>
+                  <calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"> </calcite-menu-item>
                 </calcite-menu-item>
                 <calcite-menu-item slot="submenu-item" text="Something else"> </calcite-menu-item>
                 <calcite-menu-item slot="submenu-item" text="Another thing">
                   <calcite-menu-item slot="submenu-item" text="Great examples">
-                    <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
-                    <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
+                    <calcite-menu-item slot="submenu-item" text="Great examples" breadcrumb> </calcite-menu-item>
+                    <calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"> </calcite-menu-item>
                     <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
                   </calcite-menu-item>
                 </calcite-menu-item>
@@ -393,38 +401,38 @@ <h3>
             >
               <calcite-menu-item text="Home"> </calcite-menu-item>
               <calcite-menu-item text="Reference">
-                <calcite-menu-item href="#" slot="submenu-item" text="an item"> </calcite-menu-item>
-                <calcite-menu-item href="#" slot="submenu-item" text="an item"> </calcite-menu-item>
-                <calcite-menu-item href="#" slot="submenu-item" text="an item"> </calcite-menu-item>
+                <calcite-menu-item breadcrumb slot="submenu-item" text="an item"> </calcite-menu-item>
+                <calcite-menu-item breadcrumb slot="submenu-item" text="an item"> </calcite-menu-item>
+                <calcite-menu-item breadcrumb slot="submenu-item" text="an item"> </calcite-menu-item>
               </calcite-menu-item>
-              <calcite-menu-item href="#" text="Items of reference"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Reference item" active> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Longer item"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Items of reference"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Reference item"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Longer item"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb text="Items of reference"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb text="Reference item" active> </calcite-menu-item>
+              <calcite-menu-item breadcrumb text="Longer item"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb text="Items of reference"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb text="Reference item"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb text="Longer item"> </calcite-menu-item>
             </calcite-menu>
           </calcite-flow-item>
           <calcite-flow-item heading="Whatever user clicked on">
             <calcite-menu layout="vertical">
-              <calcite-menu-item href="#" text="Home"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Items of reference"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Reference item" active> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Longer item"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Items of reference"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Reference item"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Longer item"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb icon-end="layer" text="Home"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb icon-end="layer" text="Items of reference"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb icon-end="layer" text="Reference item" active> </calcite-menu-item>
+              <calcite-menu-item breadcrumb icon-end="layer" text="Longer item"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb icon-end="layer" text="Items of reference"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb icon-end="layer" text="Reference item"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb icon-end="layer" text="Longer item"> </calcite-menu-item>
             </calcite-menu>
           </calcite-flow-item>
           <calcite-flow-item heading="three levels" description="maybe another parent if that far deep">
             <calcite-menu layout="vertical">
-              <calcite-menu-item href="#" text="Home"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Items of reference"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Reference item" active> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Longer item"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Items of reference"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Reference item"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Longer item"> </calcite-menu-item>
+              <calcite-menu-item text="Home"> </calcite-menu-item>
+              <calcite-menu-item text="Items of reference"> </calcite-menu-item>
+              <calcite-menu-item text="Reference item" active> </calcite-menu-item>
+              <calcite-menu-item text="Longer item"> </calcite-menu-item>
+              <calcite-menu-item text="Items of reference"> </calcite-menu-item>
+              <calcite-menu-item text="Reference item"> </calcite-menu-item>
+              <calcite-menu-item text="Longer item"> </calcite-menu-item>
             </calcite-menu>
           </calcite-flow-item>
         </calcite-flow>