diff --git a/common/changes/office-ui-fabric-react/office-ui-fabric-react-4786_2018-05-05-07-40.json b/common/changes/office-ui-fabric-react/office-ui-fabric-react-4786_2018-05-05-07-40.json
new file mode 100644
index 00000000000000..e9c6356414b005
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/office-ui-fabric-react-4786_2018-05-05-07-40.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fix breadcrumb rendering issue when overflow index is at last",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "kabalas@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx
index a70ae271a4ff67..ad53606dcd3ab6 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx
@@ -127,12 +127,13 @@ export class BreadcrumbBase extends BaseComponent<IBreadcrumbProps, any> {
     // Find index of last rendered item so the divider icon
     // knows not to render on that item
     const lastItemIndex = renderedItems.length - 1;
+    const hasOverflowItems = renderedOverflowItems && renderedOverflowItems.length !== 0;
 
     const itemElements: JSX.Element[] = renderedItems.map(
       (item, index) => (
         <li className={ this._classNames.listItem } key={ item.key || String(index) }>
           { onRenderItem(item, this._onRenderItem) }
-          { index !== lastItemIndex && (
+          { (index !== lastItemIndex || (hasOverflowItems && index === (overflowIndex! - 1))) && (
             <DividerType
               className={ this._classNames.chevron }
               iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
@@ -142,7 +143,7 @@ export class BreadcrumbBase extends BaseComponent<IBreadcrumbProps, any> {
         </li>
       ));
 
-    if (renderedOverflowItems && renderedOverflowItems.length !== 0) {
+    if (hasOverflowItems) {
       itemElements.splice(overflowIndex!, 0, (
         <li className={ this._classNames.overflow } key={ OVERFLOW_KEY }>
           <IconButton
@@ -157,11 +158,13 @@ export class BreadcrumbBase extends BaseComponent<IBreadcrumbProps, any> {
               directionalHint: DirectionalHint.bottomLeftEdge
             } }
           />
-          <DividerType
-            className={ this._classNames.chevron }
-            iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
-            item={ renderedOverflowItems[renderedOverflowItems.length - 1] }
-          />
+          { overflowIndex !== lastItemIndex + 1 && (
+            <DividerType
+              className={ this._classNames.chevron }
+              iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
+              item={ renderedOverflowItems[renderedOverflowItems.length - 1] }
+            />
+          ) }
         </li>
       ));
     }
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx
index 87499314109283..540728c3ef40b1 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx
@@ -74,6 +74,34 @@ describe('Breadcrumb', () => {
       const tree = component.toJSON();
       expect(tree).toMatchSnapshot();
     });
+
+    it('renders breadcumb correctly 5', () => {
+      // With maxDisplayedItems and overflowIndex
+      const component = renderer.create(
+        <Breadcrumb
+          items={ items }
+          maxDisplayedItems={ 1 }
+          overflowIndex={ 1 }
+        />
+      );
+
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('renders breadcumb correctly 6', () => {
+      // With maxDisplayedItems and overflowIndex as 0
+      const component = renderer.create(
+        <Breadcrumb
+          items={ items }
+          maxDisplayedItems={ 0 }
+          overflowIndex={ 0 }
+        />
+      );
+
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
   });
 
   it('can call the callback when an item is clicked', () => {
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
index 4c19fa80cd7922..e39e23fd373445 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -1359,6 +1359,500 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 4 1`] = `
 </div>
 `;
 
+exports[`Breadcrumb basic rendering renders breadcumb correctly 5 1`] = `
+<div
+  className=
+      ms-ResizeGroup
+      {
+        display: block;
+        position: relative;
+      }
+>
+  <div
+    style={
+      Object {
+        "position": "fixed",
+        "visibility": "hidden",
+      }
+    }
+  >
+    <div
+      aria-label={undefined}
+      className=
+          ms-Breadcrumb
+          {
+            margin-bottom: 1px;
+            margin-left: 0;
+            margin-right: 0;
+            margin-top: 23px;
+          }
+      role="navigation"
+    >
+      <div
+        aria-describedby={undefined}
+        aria-labelledby={undefined}
+        className="ms-FocusZone"
+        data-focuszone-id="FocusZone23"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="presentation"
+      >
+        <ol
+          className=
+              ms-Breadcrumb-list
+              {
+                align-items: stretch;
+                display: flex;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                white-space: nowrap;
+              }
+        >
+          <li
+            className=
+                ms-Breadcrumb-listItem
+                {
+                  align-items: center;
+                  display: flex;
+                  list-style-type: none;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  padding-bottom: 0;
+                  padding-left: 0;
+                  padding-right: 0;
+                  padding-top: 0;
+                  position: relative;
+                }
+          >
+            <span
+              className=
+                  ms-Breadcrumb-item
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #333333;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 21px;
+                    font-weight: 100;
+                    max-width: 160px;
+                    padding-bottom: 0;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 0;
+                  }
+                  &:hover {
+                    cursor: default;
+                  }
+            >
+              <div
+                aria-describedby={undefined}
+                className="ms-TooltipHost"
+                onBlurCapture={[Function]}
+                onFocusCapture={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+              >
+                TestText1
+              </div>
+            </span>
+            <i
+              aria-hidden={true}
+              className=
+                  ms-Breadcrumb-chevron
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    display: inline-block;
+                    font-family: "FabricMDL2Icons";
+                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: normal;
+                    speak: none;
+                  }
+                  @media screen and (-ms-high-contrast: active){& {
+                    -ms-high-contrast-adjust: none;
+                    color: WindowText;
+                  }
+                  @media only screen and (min-width: 480px) and (max-width: 639px){& {
+                    font-size: 8px;
+                  }
+                  @media only screen and (min-width: 0px) and (max-width: 479px){& {
+                    font-size: 8px;
+                  }
+              data-icon-name="ChevronRight"
+              role="presentation"
+            >
+              
+            </i>
+          </li>
+          <li
+            className=
+                ms-Breadcrumb-overflow
+                {
+                  align-items: center;
+                  display: flex;
+                  position: relative;
+                }
+          >
+            <button
+              aria-describedby={null}
+              aria-expanded={false}
+              aria-haspopup={true}
+              aria-label={undefined}
+              aria-labelledby={null}
+              aria-owns={null}
+              aria-pressed={undefined}
+              className=
+                  ms-Button
+                  ms-Breadcrumb-overflowButton
+                  ms-Button--icon
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    background-color: transparent;
+                    border-radius: 0px;
+                    border: 1px solid transparent;
+                    box-sizing: border-box;
+                    cursor: pointer;
+                    display: inline-block;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 16px;
+                    font-weight: 400;
+                    height: 100%;
+                    outline: transparent;
+                    overflow: hidden;
+                    padding-bottom: 0;
+                    padding-left: 4px;
+                    padding-right: 4px;
+                    padding-top: 0;
+                    position: relative;
+                    text-align: center;
+                    text-decoration: none;
+                    text-overflow: ellipsis;
+                    user-select: none;
+                    vertical-align: top;
+                    white-space: nowrap;
+                    width: 32px;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    border: none;
+                    bottom: -2px;
+                    left: -2px;
+                    outline-color: ButtonText;
+                    right: -2px;
+                    top: -2px;
+                  }
+                  &:hover {
+                    background-color: #f4f4f4;
+                    color: #004578;
+                  }
+                  &:active {
+                    background-color: #eaeaea;
+                    color: #0078d4;
+                  }
+                  &:hover:active {
+                    background-color: #d0d0d0;
+                  }
+                  @media only screen and (min-width: 0px) and (max-width: 479px){& {
+                    padding-bottom: 4px;
+                    padding-left: 6px;
+                    padding-right: 6px;
+                    padding-top: 4px;
+                  }
+                  @media only screen and (min-width: 480px) and (max-width: 639px){& {
+                    font-size: 15px;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover {
+                    border-color: Highlight;
+                    color: Highlight;
+                  }
+              data-is-focusable={true}
+              disabled={undefined}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="button"
+              type="button"
+            >
+              <div
+                className=
+                    ms-Button-flexContainer
+                    {
+                      align-items: center;
+                      display: flex;
+                      flex-wrap: nowrap;
+                      height: 100%;
+                      justify-content: center;
+                    }
+              >
+                <i
+                  aria-hidden={true}
+                  className=
+                      ms-Button-icon
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        display: inline-block;
+                        flex-shrink: 0;
+                        font-family: "FabricMDL2Icons";
+                        font-size: 16px;
+                        font-style: normal;
+                        font-weight: normal;
+                        height: 16px;
+                        line-height: 16px;
+                        margin-bottom: 0;
+                        margin-left: 4px;
+                        margin-right: 4px;
+                        margin-top: 0;
+                        speak: none;
+                        text-align: center;
+                        vertical-align: middle;
+                      }
+                  data-icon-name="More"
+                  role="presentation"
+                >
+                  
+                </i>
+              </div>
+            </button>
+          </li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Breadcrumb basic rendering renders breadcumb correctly 6 1`] = `
+<div
+  className=
+      ms-ResizeGroup
+      {
+        display: block;
+        position: relative;
+      }
+>
+  <div
+    style={
+      Object {
+        "position": "fixed",
+        "visibility": "hidden",
+      }
+    }
+  >
+    <div
+      aria-label={undefined}
+      className=
+          ms-Breadcrumb
+          {
+            margin-bottom: 1px;
+            margin-left: 0;
+            margin-right: 0;
+            margin-top: 23px;
+          }
+      role="navigation"
+    >
+      <div
+        aria-describedby={undefined}
+        aria-labelledby={undefined}
+        className="ms-FocusZone"
+        data-focuszone-id="FocusZone28"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="presentation"
+      >
+        <ol
+          className=
+              ms-Breadcrumb-list
+              {
+                align-items: stretch;
+                display: flex;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                white-space: nowrap;
+              }
+        >
+          <li
+            className=
+                ms-Breadcrumb-overflow
+                {
+                  align-items: center;
+                  display: flex;
+                  position: relative;
+                }
+          >
+            <button
+              aria-describedby={null}
+              aria-expanded={false}
+              aria-haspopup={true}
+              aria-label={undefined}
+              aria-labelledby={null}
+              aria-owns={null}
+              aria-pressed={undefined}
+              className=
+                  ms-Button
+                  ms-Breadcrumb-overflowButton
+                  ms-Button--icon
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    background-color: transparent;
+                    border-radius: 0px;
+                    border: 1px solid transparent;
+                    box-sizing: border-box;
+                    cursor: pointer;
+                    display: inline-block;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 16px;
+                    font-weight: 400;
+                    height: 100%;
+                    outline: transparent;
+                    overflow: hidden;
+                    padding-bottom: 0;
+                    padding-left: 4px;
+                    padding-right: 4px;
+                    padding-top: 0;
+                    position: relative;
+                    text-align: center;
+                    text-decoration: none;
+                    text-overflow: ellipsis;
+                    user-select: none;
+                    vertical-align: top;
+                    white-space: nowrap;
+                    width: 32px;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    border: none;
+                    bottom: -2px;
+                    left: -2px;
+                    outline-color: ButtonText;
+                    right: -2px;
+                    top: -2px;
+                  }
+                  &:hover {
+                    background-color: #f4f4f4;
+                    color: #004578;
+                  }
+                  &:active {
+                    background-color: #eaeaea;
+                    color: #0078d4;
+                  }
+                  &:hover:active {
+                    background-color: #d0d0d0;
+                  }
+                  @media only screen and (min-width: 0px) and (max-width: 479px){& {
+                    padding-bottom: 4px;
+                    padding-left: 6px;
+                    padding-right: 6px;
+                    padding-top: 4px;
+                  }
+                  @media only screen and (min-width: 480px) and (max-width: 639px){& {
+                    font-size: 15px;
+                  }
+                  @media screen and (-ms-high-contrast: active){&:hover {
+                    border-color: Highlight;
+                    color: Highlight;
+                  }
+              data-is-focusable={true}
+              disabled={undefined}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="button"
+              type="button"
+            >
+              <div
+                className=
+                    ms-Button-flexContainer
+                    {
+                      align-items: center;
+                      display: flex;
+                      flex-wrap: nowrap;
+                      height: 100%;
+                      justify-content: center;
+                    }
+              >
+                <i
+                  aria-hidden={true}
+                  className=
+                      ms-Button-icon
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        display: inline-block;
+                        flex-shrink: 0;
+                        font-family: "FabricMDL2Icons";
+                        font-size: 16px;
+                        font-style: normal;
+                        font-weight: normal;
+                        height: 16px;
+                        line-height: 16px;
+                        margin-bottom: 0;
+                        margin-left: 4px;
+                        margin-right: 4px;
+                        margin-top: 0;
+                        speak: none;
+                        text-align: center;
+                        vertical-align: middle;
+                      }
+                  data-icon-name="More"
+                  role="presentation"
+                >
+                  
+                </i>
+              </div>
+            </button>
+          </li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Breadcrumb renders empty breadcrumb 1`] = `
 <div
   className=
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx
index 5961628a66c92d..4bb564c1696e47 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx
@@ -56,7 +56,7 @@ export class BreadcrumbBasicExample extends React.Component<any, any> {
           ariaLabel={ 'Website breadcrumb' }
         />
 
-        <Label className={ exampleStyles.exampleLabel } style={ { marginTop: '24px' } }>With maxDisplayedItems set to three and overflowIndex set to 1 (second element)</Label>
+        <Label className={ exampleStyles.exampleLabel } style={ { marginTop: '24px' } }>With maxDisplayedItems set to two and overflowIndex set to 1 (second element)</Label>
         <Breadcrumb
           items={ [
             { text: 'TestText1', key: 'TestKey1' },