diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index f783af2462..8cb8f986dd 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,337 +1,7 @@
 <link rel="shortcut icon" href="/favicon.ico">
 <link rel="icon" type="image/svg" href="/logo.svg" sizes="192x192">
 
-<script type="text/javascript">
-(function() {
-    document.addEventListener('DOMContentLoaded', function () {
-        //set the indeterminate state of checkbox
-        var triStateCheckboxes = ['Ai4ez613', 'Ai4ez613i1', 'Ai4ez613i2', 'Ai4ez613i3', 'Ai4ez613i4', 'Ai4ez613i5', 'Ai4ez613i6', 'Ai4ez613i7', 'Ai4ez643', 'Ai4ez613c', 'Ai4ez643c'];
-        for (var i = 0; i < triStateCheckboxes.length; i++) {
-            const triStateCheckbox = document.getElementById(triStateCheckboxes[i]);
-            if (triStateCheckbox) {
-                triStateCheckbox.indeterminate = true;
-            }
-        };
-
-        //climb up DOM to get block element
-        function getBlock(control) {
-            var block = control.parentNode;
-            while (block.getAttribute("role") !== "tablist") {
-                block = block.parentNode;
-            }
-            return block;
-        }
-
-        //get all tablists
-        var tablists = document.querySelectorAll('[role="tablist"]');
-        //handle each tablist
-        for (var i = 0; i < tablists.length; i++) {
-            var tablist = tablists[i];
-            //get all the tabs
-            var tabs = tablist.querySelectorAll("[aria-controls]");
-            for (var j = 0; j < tabs.length; j++) {
-                var el = tabs[j];
-                el.addEventListener('click', function (e) {
-                    e.preventDefault();
-                    //check states
-                    var isDisabled = this.getAttribute("aria-disabled") === "true";
-                    var isSelected = this.getAttribute("aria-selected") === "true";
-                    if (isDisabled || isSelected) {
-                        return;
-                    }
-                    //get all controls in grouping
-                    var block = getBlock(this);
-                    var controls = block.querySelectorAll("[aria-controls]");
-                    //handle each controls
-                    for (var k = 0; k < controls.length; k++) {
-                        var control = controls[k];
-                        //new selected tab
-                        var isTriggerTab = control === this;
-                        //get panel
-                        var panelId = control.getAttribute("aria-controls");
-                        var panel = document.getElementById(panelId);
-                        //set states
-                        control.setAttribute("aria-selected", isTriggerTab);
-                        control.classList.remove('is-selected');
-                        panel.setAttribute("aria-expanded", isTriggerTab);
-                        panel.classList.remove('is-expanded');
-                    }
-                })
-            }
-        }
-        var els = document.querySelectorAll("[aria-controls]");
-        for (var i = 0; i < els.length; i++) {
-            var el = els[i];
-            el.addEventListener('click', function () {
-                var targetId = this.getAttribute("aria-controls");
-                var target = document.getElementById(targetId);
-                //dropdown
-                var isDropdown = this.getAttribute("aria-haspopup") === "true";
-                if (isDropdown && target) {
-                    // Get all of elements with same aria controls ID
-                    const elements = document.querySelectorAll('[aria-controls="' + targetId + '"]');
-
-                    //trigger
-                    var isExpanded = this.getAttribute("aria-expanded") === "true";
-                    this.setAttribute("aria-expanded", !isExpanded);
-                    if (isExpanded) {
-                        for (let i = 0; i < elements.length; i ++) {
-                            elements[i].classList.remove('is-expanded')
-                        }
-                    } else {
-                        for (let i = 0; i < elements.length; i ++) {
-                            elements[i].classList.add('is-expanded')
-                        }
-                    }
-                    //target
-                    target.setAttribute("aria-hidden", isExpanded);
-                    //searchinput for shellbar
-                    if (document.getElementById('' + targetId + '1') !== null) {
-                        document.getElementById('' + targetId + '1').setAttribute("aria-hidden", isExpanded);
-                    }
-                    return;
-                }
-                //tree
-                if(target){
-                    var isTree = target.getAttribute("role") === "tree";
-                    var isTreeItem = target.getAttribute("role") === "treeitem";
-                }
-
-                function setPressed(el, bool) {
-                    el.setAttribute("aria-pressed", bool);
-                    if (bool) {
-                        el.classList.add('is-pressed');
-                    } else {
-                        el.classList.remove('is-pressed');
-                    }
-                }
-
-                function setExpanded(el, bool) {
-                    el.setAttribute("aria-expanded", bool);
-                    //get group
-                    var group = el.querySelector("[role=group]");
-                    group.setAttribute("aria-hidden", !bool);
-                    if (!bool) {
-                        group.classList.add('is-hidden');
-                    } else {
-                        group.classList.remove('is-hidden');
-                    }
-                }
-
-                var isPressed;
-                //handle the primary trigger
-                if (isTree || isTreeItem) {
-                    isPressed = this.getAttribute("aria-pressed") === "true";
-                    setPressed(this, !isPressed);
-                }
-                //toggle a single treeitem
-                if (isTreeItem) {
-                    setExpanded(target, !isPressed);
-                }
-                //toggle all treeitems
-                if (isTree) {
-                    //all triggers
-                    var controls = target.querySelectorAll("[aria-controls]");
-                    for (var i = 0; i < controls.length; i++) {
-                        var control = controls[i];
-                        setPressed(control, !isPressed);
-                        targetId = control.getAttribute("aria-controls");
-                        target = document.getElementById(targetId);
-                        setExpanded(target, !isPressed);
-                    }
-                }
-            })
-        }
-    });
-   
-
-    // display responsive component controls
-    const displayControls = document.querySelectorAll('.docs-component--responsive-display__controls');
-
-    for (var i = 0; i < displayControls.length; i++) {
-        const frame = displayControls[i].parentElement.querySelector('.docs-component--responsive-display__frame');
-        displayControls[i].addEventListener('click', function (event) {
-            const clickTarget = event.target;
-            clearControls(displayControls[i]);
-            resizeFrame(clickTarget, frame);
-            clickTarget.setAttribute('aria-pressed', true);
-        })
-    }
-
-    function clearControls(displayControl) {
-        let childrens = Array.from(displayControl.children)
-        for (var i = 0; i < childrens.length; i++) {
-            childrens[i].setAttribute('aria-pressed', false);
-        }
-    }
-
-    function resizeFrame(target, frame) {
-        const size = target.getAttribute('data-size');
-        switch (size) {
-            case 'mobile':
-                frame.width = '414';
-                frame.height = '736'
-                break;
-            case 'tablet':
-                frame.width = '720';
-                frame.height = '1024'
-                break;
-        }
-    }
-})();
-
-function toggleDialog(dialogId, show) {
-    let dialog = document.getElementById(dialogId);
-    if(!dialog){
-        console.warn('No dialog with id', dialogId);
-        return;
-    }
-    if (show) {
-        dialog.classList.add('fd-dialog--active');
-    } else {
-        dialog.classList.remove('fd-dialog--active');
-    }
-}
-
-function onControlClick(controlId) {
-    let ref = document.getElementById(controlId);
-
-    if (ref.getAttribute("aria-hidden") === "true") {
-        ref.setAttribute("aria-hidden", "false");
-    } else {
-        ref.setAttribute("aria-hidden", "true");
-    }
-
-    // tree
-    var isTree = ref.getAttribute('role') === 'tree';
-    var isTreeItem = ref.getAttribute('role') === 'treeitem';
-
-    function setPressed(el, bool) {
-        el.setAttribute('aria-pressed', bool);
-        if (bool) {
-            el.classList.add('is-pressed');
-        } else {
-            el.classList.remove('is-pressed');
-        }
-    }
-
-    function setExpanded(el, bool) {
-        el.setAttribute('aria-expanded', bool);
-        //get group
-        var group = el.querySelector('[role=group]');
-        if (group) {
-            group.setAttribute('aria-hidden', !bool);
-            if (!bool) {
-                group.classList.add('is-hidden');
-            } else {
-                group.classList.remove('is-hidden');
-            }
-        }
-    }
-
-    let isPressed;
-    //handle the primary trigger
-    if (isTree || isTreeItem) {
-        const control = ref.querySelector('.fd-tree__control');
-        isPressed = control.getAttribute('aria-pressed') === 'true';
-        setPressed(control, !isPressed);
-    }
-    //toggle a single treeitem
-    if (isTreeItem) {
-        setExpanded(ref, !isPressed);
-    }
-    //toggle all treeitems
-    if (isTree) {
-        //all triggers
-        const controls = document.querySelectorAll('.fd-tree__control');
-        for (let i = 0; i < controls.length; i++) {
-            let control = controls[i];
-            setPressed(control, !isPressed);
-            targetId = control.getAttribute('aria-controls');
-            ref = document.getElementById(targetId);
-            setExpanded(ref, !isPressed);
-        }
-    }
-}
-
-function stepInputValue(inputId, stepDirection) {
-    let inputRef = document.getElementById(inputId);
-
-    if (inputRef) {
-        if (stepDirection === "up") {
-            ++inputRef.value;
-        } else if (stepDirection === "down") {
-            --inputRef.value;
-        }
-    } else {
-        console.warn("No element with id='" + inputId + "' found");
-    }
-}
-
-function setValue(inputId, value) {
-    let inputRef = document.getElementById(inputId);
-    if (inputRef) {
-        inputRef.value = value;
-    } else {
-        console.warn("No element with id='" + inputId + "' found");
-    }
-}
-
-function setAriaHidden(elementId, value) {
-    let elementRef = document.getElementById(elementId);
-    if (elementRef) {
-        elementRef.setAttribute('aria-hidden', value);
-    } else {
-        console.warn("No element with id='" + elementId + "' found");
-    }
-}
-
-function setFocus(elementId) {
-    let elementRef = document.getElementById(elementId);
-    if (elementRef) {
-        elementRef.focus();
-    } else {
-        console.warn("No element with id='" + elementId + "' found");
-    }
-}
-
-function addClass(elementId, className) {
-    let elementRef = document.getElementById(elementId);
-    if (elementRef && className) {
-        elementRef.classList.add(className);
-    } else {
-        console.warn("No element with id='" + elementId + "' found");
-    }
-}
-
-function browseFile(inputId) {
-    let inputRef = document.getElementById(inputId);
-    inputRef.click();
-}
-
-function toggleClass(elementId, className) {
-    let elementRef = document.getElementById(elementId);
-    if (elementRef && className) {
-        elementRef.classList.toggle(className);
-    } else {
-        console.warn("No element with id='" + elementId + "' found");
-    }
-}
-
-function onPopoverClick(id) {
-    let elementRef = document.getElementById(id);
-    let toggle = elementRef.getAttribute('aria-hidden');
-    // I didn't use ?: because of IE 11 support
-    if(toggle == 'true') {
-        toggle='false';
-    } else {
-        toggle='true';
-    }
-
-    setAriaHidden(id, toggle);
-}
-
-</script>
+<script type="text/javascript" src="preview-head.js"> </script>
 
 <style type="text/css">
 
diff --git a/.storybook/static/preview-head.js b/.storybook/static/preview-head.js
new file mode 100644
index 0000000000..0e4313c2ff
--- /dev/null
+++ b/.storybook/static/preview-head.js
@@ -0,0 +1,338 @@
+(function() {
+    document.addEventListener('DOMContentLoaded', function () {
+        //set the indeterminate state of checkbox
+        var triStateCheckboxes = ['Ai4ez613', 'Ai4ez613i1', 'Ai4ez613i2', 'Ai4ez613i3', 'Ai4ez613i4', 'Ai4ez613i5', 'Ai4ez613i6', 'Ai4ez613i7', 'Ai4ez643', 'Ai4ez613c', 'Ai4ez643c'];
+        for (var i = 0; i < triStateCheckboxes.length; i++) {
+            const triStateCheckbox = document.getElementById(triStateCheckboxes[i]);
+            if (triStateCheckbox) {
+                triStateCheckbox.indeterminate = true;
+            }
+        };
+
+        //climb up DOM to get block element
+        function getBlock(control) {
+            var block = control.parentNode;
+            while (block.getAttribute("role") !== "tablist") {
+                block = block.parentNode;
+            }
+            return block;
+        }
+
+        //get all tablists
+        var tablists = document.querySelectorAll('[role="tablist"]');
+        //handle each tablist
+        for (var i = 0; i < tablists.length; i++) {
+            var tablist = tablists[i];
+            //get all the tabs
+            var tabs = tablist.querySelectorAll("[aria-controls]");
+            for (var j = 0; j < tabs.length; j++) {
+                var el = tabs[j];
+                el.addEventListener('click', function (e) {
+                    e.preventDefault();
+                    //check states
+                    var isDisabled = this.getAttribute("aria-disabled") === "true";
+                    var isSelected = this.getAttribute("aria-selected") === "true";
+                    if (isDisabled || isSelected) {
+                        return;
+                    }
+                    //get all controls in grouping
+                    var block = getBlock(this);
+                    var controls = block.querySelectorAll("[aria-controls]");
+                    //handle each controls
+                    for (var k = 0; k < controls.length; k++) {
+                        var control = controls[k];
+                        //new selected tab
+                        var isTriggerTab = control === this;
+                        //get panel
+                        var panelId = control.getAttribute("aria-controls");
+                        var panel = document.getElementById(panelId);
+                        //set states
+                        control.setAttribute("aria-selected", isTriggerTab);
+                        control.classList.remove('is-selected');
+                        panel.setAttribute("aria-expanded", isTriggerTab);
+                        panel.classList.remove('is-expanded');
+                    }
+                })
+            }
+        }
+        var els = document.querySelectorAll("[aria-controls]");
+        for (var i = 0; i < els.length; i++) {
+            var el = els[i];
+            el.addEventListener('click', function () {
+                var targetId = this.getAttribute("aria-controls");
+                var target = document.getElementById(targetId);
+                //dropdown
+                var isDropdown = this.getAttribute("aria-haspopup") === "true";
+                if (isDropdown && target) {
+                    // Get all of elements with same aria controls ID
+                    const elements = document.querySelectorAll('[aria-controls="' + targetId + '"]');
+
+                    //trigger
+                    var isExpanded = this.getAttribute("aria-expanded") === "true";
+                    this.setAttribute("aria-expanded", !isExpanded);
+                    if (isExpanded) {
+                        for (let i = 0; i < elements.length; i ++) {
+                            elements[i].classList.remove('is-expanded')
+                        }
+                    } else {
+                        for (let i = 0; i < elements.length; i ++) {
+                            elements[i].classList.add('is-expanded')
+                        }
+                    }
+                    //target
+                    target.setAttribute("aria-hidden", isExpanded);
+                    //searchinput for shellbar
+                    if (document.getElementById('' + targetId + '1') !== null) {
+                        document.getElementById('' + targetId + '1').setAttribute("aria-hidden", isExpanded);
+                    }
+                    return;
+                }
+                //tree
+                if(target){
+                    var isTree = target.getAttribute("role") === "tree";
+                    var isTreeItem = target.getAttribute("role") === "treeitem";
+                }
+
+                function setPressed(el, bool) {
+                    el.setAttribute("aria-pressed", bool);
+                    if (bool) {
+                        el.classList.add('is-pressed');
+                    } else {
+                        el.classList.remove('is-pressed');
+                    }
+                }
+
+                function setExpanded(el, bool) {
+                    el.setAttribute("aria-expanded", bool);
+                    //get group
+                    var group = el.querySelector("[role=group]");
+                    group.setAttribute("aria-hidden", !bool);
+                    if (!bool) {
+                        group.classList.add('is-hidden');
+                    } else {
+                        group.classList.remove('is-hidden');
+                    }
+                }
+
+                var isPressed;
+                //handle the primary trigger
+                if (isTree || isTreeItem) {
+                    isPressed = this.getAttribute("aria-pressed") === "true";
+                    setPressed(this, !isPressed);
+                }
+                //toggle a single treeitem
+                if (isTreeItem) {
+                    setExpanded(target, !isPressed);
+                }
+                //toggle all treeitems
+                if (isTree) {
+                    //all triggers
+                    var controls = target.querySelectorAll("[aria-controls]");
+                    for (var i = 0; i < controls.length; i++) {
+                        var control = controls[i];
+                        setPressed(control, !isPressed);
+                        targetId = control.getAttribute("aria-controls");
+                        target = document.getElementById(targetId);
+                        setExpanded(target, !isPressed);
+                    }
+                }
+            })
+        }
+    });
+   
+
+    // display responsive component controls
+    const displayControls = document.querySelectorAll('.docs-component--responsive-display__controls');
+
+    for (var i = 0; i < displayControls.length; i++) {
+        const frame = displayControls[i].parentElement.querySelector('.docs-component--responsive-display__frame');
+        displayControls[i].addEventListener('click', function (event) {
+            const clickTarget = event.target;
+            clearControls(displayControls[i]);
+            resizeFrame(clickTarget, frame);
+            clickTarget.setAttribute('aria-pressed', true);
+        })
+    }
+
+    function clearControls(displayControl) {
+        let childrens = Array.from(displayControl.children)
+        for (var i = 0; i < childrens.length; i++) {
+            childrens[i].setAttribute('aria-pressed', false);
+        }
+    }
+
+    function resizeFrame(target, frame) {
+        const size = target.getAttribute('data-size');
+        switch (size) {
+            case 'mobile':
+                frame.width = '414';
+                frame.height = '736'
+                break;
+            case 'tablet':
+                frame.width = '720';
+                frame.height = '1024'
+                break;
+        }
+    }
+})();
+
+function toggleDialog(dialogId, show) {
+    let dialog = document.getElementById(dialogId);
+    if(!dialog){
+        console.warn('No dialog with id', dialogId);
+        return;
+    }
+    if (show) {
+        dialog.classList.add('fd-dialog--active');
+    } else {
+        dialog.classList.remove('fd-dialog--active');
+    }
+}
+
+function onControlClick(controlId) {
+    let ref = document.getElementById(controlId);
+
+    if (ref.getAttribute("aria-hidden") === "true") {
+        ref.setAttribute("aria-hidden", "false");
+    } else {
+        ref.setAttribute("aria-hidden", "true");
+    }
+
+    // tree
+    var isTree = ref.getAttribute('role') === 'tree';
+    var isTreeItem = ref.getAttribute('role') === 'treeitem';
+
+    function setPressed(el, bool) {
+        el.setAttribute('aria-pressed', bool);
+        if (bool) {
+            el.classList.add('is-pressed');
+        } else {
+            el.classList.remove('is-pressed');
+        }
+    }
+
+    function setExpanded(el, bool) {
+        el.setAttribute('aria-expanded', bool);
+        //get group
+        var group = el.querySelector('[role=group]');
+        if (group) {
+            group.setAttribute('aria-hidden', !bool);
+            if (!bool) {
+                group.classList.add('is-hidden');
+            } else {
+                group.classList.remove('is-hidden');
+            }
+        }
+    }
+
+    let isPressed;
+    //handle the primary trigger
+    if (isTree || isTreeItem) {
+        const control = ref.querySelector('.fd-tree__control');
+        isPressed = control.getAttribute('aria-pressed') === 'true';
+        setPressed(control, !isPressed);
+    }
+    //toggle a single treeitem
+    if (isTreeItem) {
+        setExpanded(ref, !isPressed);
+    }
+    //toggle all treeitems
+    if (isTree) {
+        //all triggers
+        const controls = document.querySelectorAll('.fd-tree__control');
+        for (let i = 0; i < controls.length; i++) {
+            let control = controls[i];
+            setPressed(control, !isPressed);
+            targetId = control.getAttribute('aria-controls');
+            ref = document.getElementById(targetId);
+            setExpanded(ref, !isPressed);
+        }
+    }
+}
+
+function stepInputValue(inputId, stepDirection) {
+    let inputRef = document.getElementById(inputId);
+
+    if (inputRef) {
+        if (stepDirection === "up") {
+            ++inputRef.value;
+        } else if (stepDirection === "down") {
+            --inputRef.value;
+        }
+    } else {
+        console.warn("No element with id='" + inputId + "' found");
+    }
+}
+
+function setValue(inputId, value) {
+    let inputRef = document.getElementById(inputId);
+    if (inputRef) {
+        inputRef.value = value;
+    } else {
+        console.warn("No element with id='" + inputId + "' found");
+    }
+}
+
+function setAriaHidden(elementId, value) {
+    let elementRef = document.getElementById(elementId);
+    if (elementRef) {
+        elementRef.setAttribute('aria-hidden', value);
+    } else {
+        console.warn("No element with id='" + elementId + "' found");
+    }
+}
+
+function setFocus(elementId) {
+    let elementRef = document.getElementById(elementId);
+    if (elementRef) {
+        elementRef.focus();
+    } else {
+        console.warn("No element with id='" + elementId + "' found");
+    }
+}
+
+function addClass(elementId, className) {
+    let elementRef = document.getElementById(elementId);
+    if (elementRef && className) {
+        elementRef.classList.add(className);
+    } else {
+        console.warn("No element with id='" + elementId + "' found");
+    }
+}
+
+function browseFile(inputId) {
+    let inputRef = document.getElementById(inputId);
+    inputRef.click();
+}
+
+function toggleClass(elementId, className) {
+    let elementRef = document.getElementById(elementId);
+    if (elementRef && className) {
+        elementRef.classList.toggle(className);
+    } else {
+        console.warn("No element with id='" + elementId + "' found");
+    }
+}
+
+function onPopoverClick(id) {
+    let elementRef = document.getElementById(id);
+    let toggle = elementRef.getAttribute('aria-hidden');
+    // I didn't use ?: because of IE 11 support
+    if(toggle == 'true') {
+        toggle='false';
+    } else {
+        toggle='true';
+    }
+
+    setAriaHidden(id, toggle);
+}
+
+function isSpaceOrEnter(event, buttonFn) {
+    switch(event && event.key && event.key.code){
+        case 'Space':
+        case 'Enter':
+            buttonFn instanceof Function && buttonFn();
+        default:
+            break;
+    }
+}
diff --git a/src/breadcrumb.scss b/src/breadcrumb.scss
index 5e09941979..7117dbbfea 100644
--- a/src/breadcrumb.scss
+++ b/src/breadcrumb.scss
@@ -57,10 +57,9 @@ $fd-breadcrumb-border-top-radius: 0.125rem !default;
   }
 
   &__dropdown-icon {
-    @include fd-reset();
-    @include fd-icon('slim-arrow-down');
-
-    text-decoration: inherit;
-    color: var(--sapLinkColor);
+    @include fd-icon-element-base() {
+      text-decoration: inherit;
+      color: var(--sapLinkColor);
+    }
   }
 }
diff --git a/stories/breadcrumb/__snapshots__/breadcrumb.stories.storyshot b/stories/breadcrumb/__snapshots__/breadcrumb.stories.storyshot
index 5d473d69c7..0350c9f601 100644
--- a/stories/breadcrumb/__snapshots__/breadcrumb.stories.storyshot
+++ b/stories/breadcrumb/__snapshots__/breadcrumb.stories.storyshot
@@ -4,147 +4,163 @@ exports[`Storyshots Components/Breadcrumb Overflow 1`] = `
 <section>
   
 
-  <ul
-    class="fd-breadcrumb"
+  <nav
+    aria-label="overflowing product breadcrumbs"
   >
     
     
-    <li
-      class="fd-breadcrumb__item"
+    <ul
+      class="fd-breadcrumb"
     >
       
         
-      <div
-        class="fd-popover"
+      <li
+        class="fd-breadcrumb__item"
       >
         
             
         <div
-          class="fd-popover__control"
+          class="fd-popover"
         >
           
                 
           <div
-            aria-controls="breadcrumb1"
-            aria-expanded="false"
-            aria-haspopup="true"
-            class="fd-breadcrumb__link"
-            onclick="onPopoverClick('breadcrumb1');"
+            class="fd-popover__control"
           >
             
-                ...
                     
-            <span
-              class="fd-breadcrumb__dropdown-icon"
-            />
+            <div
+              aria-controls="breadcrumb1"
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-label="Show collapsed breadcrumbs"
+              class="fd-breadcrumb__link"
+              onclick="onPopoverClick('breadcrumb1');"
+              onkeypress="isSpaceOrEnter(event, onPopoverClick('breadcrumb1'));"
+              role="button"
+              tabindex="0"
+            >
+              
+                            ...
+                        
+              <i
+                class="fd-breadcrumb__dropdown-icon sap-icon sap-icon--slim-arrow-down"
+                role="presentation"
+              />
+              
+                    
+            </div>
             
                 
           </div>
           
-            
-        </div>
-        
-            
-        <div
-          aria-hidden="true"
-          class="fd-popover__body fd-popover__body--no-arrow"
-          id="breadcrumb1"
-        >
-          
                 
           <div
-            class="fd-popover__wrapper"
+            aria-hidden="false"
+            class="fd-popover__body fd-popover__body--no-arrow"
+            id="breadcrumb1"
           >
             
                     
-            <ul
-              class="fd-list fd-list--navigation"
-              role="list"
+            <div
+              class="fd-popover__wrapper"
             >
               
                         
-              <li
-                class="fd-list__item fd-list__item--link"
-                role="listitem"
-                tabindex="-1"
+              <ul
+                class="fd-list fd-list--navigation"
+                role="menu"
               >
                 
                             
-                <a
-                  class="fd-list__link"
-                  href="https://sap.github.io/fundamental-styles/"
-                  tabindex="0"
+                <li
+                  class="fd-list__item fd-list__item--link"
+                  role="none"
+                  tabindex="-1"
                 >
                   
-                            
-                  <span
-                    class="fd-list__title"
+                                
+                  <a
+                    class="fd-list__link"
+                    href="#"
+                    role="menuitem"
+                    tabindex="0"
                   >
-                    Products
-                  </span>
+                    
+                                    
+                    <span
+                      class="fd-list__title"
+                    >
+                      Products
+                    </span>
+                    
+                                
+                  </a>
                   
                             
-                </a>
-                
-                        
-              </li>
-              
-                        
-              <li
-                class="fd-list__item fd-list__item--link"
-                role="listitem"
-                tabindex="-1"
-              >
+                </li>
                 
                             
-                <a
-                  class="fd-list__link"
-                  href="https://sap.github.io/fundamental-styles/"
-                  tabindex="0"
+                <li
+                  class="fd-list__item fd-list__item--link"
+                  role="none"
+                  tabindex="-1"
                 >
                   
-                            
-                  <span
-                    class="fd-list__title"
+                                
+                  <a
+                    class="fd-list__link"
+                    href="#"
+                    role="menuitem"
+                    tabindex="0"
                   >
-                    Suppliers
-                  </span>
+                    
+                                    
+                    <span
+                      class="fd-list__title"
+                    >
+                      Suppliers
+                    </span>
+                    
+                                
+                  </a>
                   
                             
-                </a>
-                
-                        
-              </li>
-              
-                        
-              <li
-                class="fd-list__item fd-list__item--link"
-                role="listitem"
-                tabindex="-1"
-              >
+                </li>
                 
                             
-                <a
-                  class="fd-list__link"
-                  href="https://sap.github.io/fundamental-styles/"
-                  tabindex="0"
+                <li
+                  class="fd-list__item fd-list__item--link"
+                  role="none"
+                  tabindex="-1"
                 >
                   
-                            
-                  <span
-                    class="fd-list__title"
+                                
+                  <a
+                    class="fd-list__link"
+                    href="#"
+                    role="menuitem"
+                    tabindex="0"
                   >
-                    Titanium
-                  </span>
+                    
+                                    
+                    <span
+                      class="fd-list__title"
+                    >
+                      Titanium
+                    </span>
+                    
+                                
+                  </a>
                   
                             
-                </a>
+                </li>
                 
                         
-              </li>
+              </ul>
               
                     
-            </ul>
+            </div>
             
                 
           </div>
@@ -153,12 +169,81 @@ exports[`Storyshots Components/Breadcrumb Overflow 1`] = `
         </div>
         
         
-      </div>
+      </li>
+      
+        
+      <li
+        class="fd-breadcrumb__item"
+      >
+        <a
+          class="fd-breadcrumb__link"
+          href="#"
+          tabindex="0"
+        >
+          Ultra Portable
+        </a>
+      </li>
+      
+        
+      <li
+        class="fd-breadcrumb__item"
+      >
+        <a
+          class="fd-breadcrumb__link"
+          href="#"
+          tabindex="0"
+        >
+          12 inch
+        </a>
+      </li>
+      
+        
+      <li
+        class="fd-breadcrumb__item"
+      >
+        <a
+          class="fd-breadcrumb__link"
+          href="#"
+          tabindex="0"
+        >
+          Super portable deluxe
+        </a>
+      </li>
+      
+        
+      <li
+        aria-current="page"
+        class="fd-breadcrumb__item"
+      >
+        Laptop
+      </li>
       
     
-    </li>
+    </ul>
     
+
+  </nav>
+  
+
+  <div
+    style="height: 150px"
+  />
+  
+
+</section>
+`;
+
+exports[`Storyshots Components/Breadcrumb Standard 1`] = `
+<nav
+  aria-label="products breadcrumbs"
+>
+  
+    
+  <ul
+    class="fd-breadcrumb"
+  >
     
+        
     <li
       class="fd-breadcrumb__item"
     >
@@ -167,11 +252,11 @@ exports[`Storyshots Components/Breadcrumb Overflow 1`] = `
         href="#"
         tabindex="0"
       >
-        Ultra Portable
+        Products
       </a>
     </li>
     
-    
+        
     <li
       class="fd-breadcrumb__item"
     >
@@ -180,11 +265,11 @@ exports[`Storyshots Components/Breadcrumb Overflow 1`] = `
         href="#"
         tabindex="0"
       >
-        12 inch
+        Suppliers
       </a>
     </li>
     
-    
+        
     <li
       class="fd-breadcrumb__item"
     >
@@ -193,119 +278,60 @@ exports[`Storyshots Components/Breadcrumb Overflow 1`] = `
         href="#"
         tabindex="0"
       >
-        Super portable deluxe
+        Titanium
       </a>
     </li>
     
-    
+        
     <li
       class="fd-breadcrumb__item"
     >
-      Laptop
+      <a
+        class="fd-breadcrumb__link"
+        href="#"
+        tabindex="0"
+      >
+        Ultra Portable
+      </a>
     </li>
     
-
-  </ul>
-  
-
-  <div
-    style="height: 200px"
-  />
-  
-
-</section>
-`;
-
-exports[`Storyshots Components/Breadcrumb Standard 1`] = `
-<ul
-  class="fd-breadcrumb"
->
-  
-    
-  <li
-    class="fd-breadcrumb__item"
-  >
-    <a
-      class="fd-breadcrumb__link"
-      href="#"
-      tabindex="0"
-    >
-      Products
-    </a>
-  </li>
-  
-    
-  <li
-    class="fd-breadcrumb__item"
-  >
-    <a
-      class="fd-breadcrumb__link"
-      href="#"
-      tabindex="0"
-    >
-      Suppliers
-    </a>
-  </li>
-  
-    
-  <li
-    class="fd-breadcrumb__item"
-  >
-    <a
-      class="fd-breadcrumb__link"
-      href="#"
-      tabindex="0"
+        
+    <li
+      class="fd-breadcrumb__item"
     >
-      Titanium
-    </a>
-  </li>
-  
+      <a
+        class="fd-breadcrumb__link"
+        href="#"
+        tabindex="0"
+      >
+        12 inch
+      </a>
+    </li>
     
-  <li
-    class="fd-breadcrumb__item"
-  >
-    <a
-      class="fd-breadcrumb__link"
-      href="#"
-      tabindex="0"
+        
+    <li
+      class="fd-breadcrumb__item"
     >
-      Ultra Portable
-    </a>
-  </li>
-  
+      <a
+        class="fd-breadcrumb__link"
+        href="#"
+        tabindex="0"
+      >
+        Super portable deluxe
+      </a>
+    </li>
     
-  <li
-    class="fd-breadcrumb__item"
-  >
-    <a
-      class="fd-breadcrumb__link"
-      href="#"
-      tabindex="0"
+        
+    <li
+      aria-current="page"
+      class="fd-breadcrumb__item"
     >
-      12 inch
-    </a>
-  </li>
-  
+      Laptop
+    </li>
     
-  <li
-    class="fd-breadcrumb__item"
-  >
-    <a
-      class="fd-breadcrumb__link"
-      href="#"
-      tabindex="0"
-    >
-      Super portable deluxe
-    </a>
-  </li>
-  
     
-  <li
-    class="fd-breadcrumb__item"
-  >
-    Laptop
-  </li>
+  </ul>
   
 
-</ul>
+</nav>
 `;
diff --git a/stories/breadcrumb/breadcrumb.stories.js b/stories/breadcrumb/breadcrumb.stories.js
index f0fc8d3515..82f028904c 100644
--- a/stories/breadcrumb/breadcrumb.stories.js
+++ b/stories/breadcrumb/breadcrumb.stories.js
@@ -23,19 +23,21 @@ The breadcrumb component is a type of navigation that indicates the position of
 - Independent object pages, such as fact sheets
 `,
         tags: ['f3', 'a11y', 'theme'],
-        components: ['popover', 'list', 'breadcrumb']
+        components: ['popover', 'list', 'breadcrumb', 'icon']
     }
 };
 
-export const standard = () => `<ul class="fd-breadcrumb">
-    <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Products</a></li>
-    <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Suppliers</a></li>
-    <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Titanium</a></li>
-    <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Ultra Portable</a></li>
-    <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">12 inch</a></li>
-    <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Super portable deluxe</a></li>
-    <li class="fd-breadcrumb__item">Laptop</li>
-</ul>
+export const standard = () => `<nav aria-label="products breadcrumbs">
+    <ul class="fd-breadcrumb">
+        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Products</a></li>
+        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Suppliers</a></li>
+        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Titanium</a></li>
+        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Ultra Portable</a></li>
+        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">12 inch</a></li>
+        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Super portable deluxe</a></li>
+        <li aria-current="page" class="fd-breadcrumb__item">Laptop</li>
+    </ul>
+</nav>
 `;
 
 standard.parameters = {
@@ -45,55 +47,63 @@ standard.parameters = {
 };
 
 export const overflow = () => `
-<ul class="fd-breadcrumb">
-    <li class="fd-breadcrumb__item">
-        <div class="fd-popover">
-            <div class="fd-popover__control">
-                <div
-                    class="fd-breadcrumb__link"
-                    onclick="onPopoverClick('breadcrumb1');"
-                    aria-controls="breadcrumb1"
-                    aria-expanded="false"
-                    aria-haspopup="true"
-                    >
-                ...
-                    <span class="fd-breadcrumb__dropdown-icon"></span>
+<nav aria-label="overflowing product breadcrumbs">
+    <ul class="fd-breadcrumb">
+        <li class="fd-breadcrumb__item">
+            <div class="fd-popover">
+                <div class="fd-popover__control">
+                    <div
+                        aria-controls="breadcrumb1"
+                        aria-expanded="true"
+                        aria-haspopup="true"
+                        aria-label="Show collapsed breadcrumbs" 
+                        class="fd-breadcrumb__link"
+                        onclick="onPopoverClick('breadcrumb1');"
+                        onkeypress="isSpaceOrEnter(event, onPopoverClick('breadcrumb1'));"
+                        role="button"
+                        tabindex="0">
+                            ...
+                        <i role="presentation" class="fd-breadcrumb__dropdown-icon sap-icon sap-icon--slim-arrow-down"></i>
+                    </div>
                 </div>
-            </div>
-            <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="true" id="breadcrumb1">
-                <div class="fd-popover__wrapper">
-                    <ul class="fd-list fd-list--navigation" role="list">
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link" href="https://sap.github.io/fundamental-styles/">
-                            <span class="fd-list__title">Products</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link" href="https://sap.github.io/fundamental-styles/">
-                            <span class="fd-list__title">Suppliers</span>
-                            </a>
-                        </li>
-                        <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
-                            <a tabindex="0" class="fd-list__link" href="https://sap.github.io/fundamental-styles/">
-                            <span class="fd-list__title">Titanium</span>
-                            </a>
-                        </li>
-                    </ul>
+                <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="false" id="breadcrumb1">
+                    <div class="fd-popover__wrapper">
+                        <ul class="fd-list fd-list--navigation" role="menu">
+                            <li tabindex="-1" role="none" class="fd-list__item fd-list__item--link">
+                                <a role="menuitem" tabindex="0" class="fd-list__link" href="#">
+                                    <span class="fd-list__title">Products</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="none" class="fd-list__item fd-list__item--link">
+                                <a role="menuitem" tabindex="0" class="fd-list__link" href="#">
+                                    <span class="fd-list__title">Suppliers</span>
+                                </a>
+                            </li>
+                            <li tabindex="-1" role="none" class="fd-list__item fd-list__item--link">
+                                <a role="menuitem" tabindex="0" class="fd-list__link" href="#">
+                                    <span class="fd-list__title">Titanium</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </div>
-        </div>
-    </li>
-    <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Ultra Portable</a></li>
-    <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">12 inch</a></li>
-    <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Super portable deluxe</a></li>
-    <li class="fd-breadcrumb__item">Laptop</li>
-</ul>
-<div style="height: 200px"></div>
+        </li>
+        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Ultra Portable</a></li>
+        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">12 inch</a></li>
+        <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">Super portable deluxe</a></li>
+        <li aria-current="page" class="fd-breadcrumb__item">Laptop</li>
+    </ul>
+</nav>
+<div style="height: 150px"></div>
 `;
 
 overflow.parameters = {
     docs: {
         iframeHeight: 200,
-        storyDescription: 'The overflow breadcrumb component displays a dropdown menu, followed by several pages in the navigation path. Like the standard breadcrumb, each page can be selected to navigate to its corresponding page. This type is responsive and will collapse into a dropdown menu if there is insufficient horizontal space on the screen. To display the overflow breadcrumb, include the <code>fd-popover</code> component in the first breadcrumb item within the element.'
+        storyDescription:
+`The overflow breadcrumb component displays a dropdown menu, followed by several pages in the navigation path.
+Like the standard breadcrumb, each page can be selected to navigate to its corresponding page. This type is responsive and will collapse into a dropdown menu if there is insufficient horizontal space on the screen.
+To display the overflow breadcrumb, include the <code>fd-popover</code> component in the first breadcrumb item within the element.`
     }
 };