diff --git a/common/changes/office-ui-fabric-react/breadcrumboverflowindex_2018-04-19-00-05.json b/common/changes/office-ui-fabric-react/breadcrumboverflowindex_2018-04-19-00-05.json
new file mode 100644
index 0000000000000..588dbbacc331e
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/breadcrumboverflowindex_2018-04-19-00-05.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Add the option of collapsing breadcrumb overflow items into a position other than the first one",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "samuelmtimbo@gmail.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 76befb4c56397..68c13c333df4b 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
@@ -29,13 +29,16 @@ const nullFunction = (): null => null;
 export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
   public static defaultProps: IBreadcrumbProps = {
     items: [],
-    maxDisplayedItems: 999
+    maxDisplayedItems: 999,
+    overflowIndex: 0
   };
 
   protected focusZone = createRef<FocusZone>();
 
   constructor(props: IBreadcrumbProps) {
     super(props);
+
+    this._validateProps(props);
   }
 
   /**
@@ -48,11 +51,13 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
   }
 
   public render() {
-    const { onReduceData = this._onReduceData, maxDisplayedItems, items } = this.props;
+    const { onReduceData = this._onReduceData, overflowIndex, maxDisplayedItems, items } = this.props;
+    const renderedItems = [...items];
+    const renderedOverflowItems = renderedItems.splice(overflowIndex!, renderedItems.length - maxDisplayedItems!);
     const breadCrumbData: IBreadCrumbData = {
       props: this.props,
-      renderedItems: items.slice(-maxDisplayedItems!),
-      renderedOverflowItems: items.slice(0, -maxDisplayedItems!)
+      renderedItems,
+      renderedOverflowItems
     };
 
     return (
@@ -64,10 +69,17 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
     );
   }
 
+  public componentWillReceiveProps(nextProps: IBreadcrumbProps): void {
+    this._validateProps(nextProps);
+  }
+
   private _onReduceData = (data: IBreadCrumbData): IBreadCrumbData | undefined => {
     let { renderedItems, renderedOverflowItems } = data;
-    const movedItem = renderedItems[0];
-    renderedItems = renderedItems.slice(1);
+    const { overflowIndex, items } = data.props;
+
+    const movedItem = renderedItems[overflowIndex!];
+    renderedItems = [...renderedItems];
+    renderedItems.splice(overflowIndex!, 1);
 
     renderedOverflowItems = [...renderedOverflowItems, movedItem];
 
@@ -82,7 +94,8 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
       ariaLabel,
       dividerAs: Divider = Icon,
       onRenderItem = this._onRenderItem,
-      overflowAriaLabel
+      overflowAriaLabel,
+      overflowIndex
     } = data.props;
     const { renderedOverflowItems, renderedItems } = data;
 
@@ -99,6 +112,41 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
     // knows not to render on that item
     const lastItemIndex = renderedItems.length - 1;
 
+    const itemElements: JSX.Element[] = renderedItems.map(
+      (item, index) => (
+        <li className={ css('ms-Breadcrumb-listItem', styles.listItem) } key={ item.key || String(index) }>
+          { onRenderItem(item, this._onRenderItem) }
+          { index !== lastItemIndex && <Divider
+            className={ css('ms-Breadcrumb-chevron', styles.chevron) }
+            iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
+          /> }
+        </li>
+      ));
+
+    if (renderedOverflowItems && renderedOverflowItems.length !== 0) {
+      itemElements.splice(overflowIndex!, 0, (
+          <li className={ css('ms-Breadcrumb-overflow', styles.overflow) } key={ OVERFLOW_KEY }>
+            <IconButton
+              className={ css('ms-Breadcrumb-overflowButton', styles.overflowButton) }
+              iconProps={ { iconName: 'More' } }
+              role='button'
+              aria-haspopup='true'
+              ariaLabel={ overflowAriaLabel }
+              onRenderMenuIcon={ nullFunction }
+              menuProps={ {
+                items: contextualItems,
+                directionalHint: DirectionalHint.bottomLeftEdge
+              } }
+            />
+            <Divider
+              className={ css('ms-Breadcrumb-chevron', styles.chevron) }
+              iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
+            />
+          </li>
+        )
+      );
+    }
+
     return (
       <div
         className={ css('ms-Breadcrumb', className, styles.root) }
@@ -107,36 +155,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
       >
         <FocusZone componentRef={ this.focusZone } direction={ FocusZoneDirection.horizontal } >
           <ol className={ css('ms-Breadcrumb-list', styles.list) }>
-            { renderedOverflowItems && renderedOverflowItems.length !== 0 && (
-              <li className={ css('ms-Breadcrumb-overflow', styles.overflow) } key={ OVERFLOW_KEY }>
-                <IconButton
-                  className={ css('ms-Breadcrumb-overflowButton', styles.overflowButton) }
-                  iconProps={ { iconName: 'More' } }
-                  role='button'
-                  aria-haspopup='true'
-                  ariaLabel={ overflowAriaLabel }
-                  onRenderMenuIcon={ nullFunction }
-                  menuProps={ {
-                    items: contextualItems,
-                    directionalHint: DirectionalHint.bottomLeftEdge
-                  } }
-                />
-                <Divider
-                  className={ css('ms-Breadcrumb-chevron', styles.chevron) }
-                  iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
-                />
-              </li>
-            ) }
-            { renderedItems.map(
-              (item, index) => (
-                <li className={ css('ms-Breadcrumb-listItem', styles.listItem) } key={ item.key || String(index) }>
-                  { onRenderItem(item, this._onRenderItem) }
-                  { index !== lastItemIndex && <Divider
-                    className={ css('ms-Breadcrumb-chevron', styles.chevron) }
-                    iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
-                  /> }
-                </li>
-              )) }
+            {itemElements}
           </ol>
         </FocusZone>
       </div>
@@ -179,4 +198,15 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
       item.onClick(ev, item);
     }
   }
+
+  /**
+   * Validate incoming props
+   * @param props Props to validate
+   */
+  private _validateProps(props: IBreadcrumbProps): void {
+    const { items, overflowIndex } = props;
+    if (overflowIndex! < 0 || overflowIndex! > items.length - 1) {
+      throw new Error('Breadcrumb: overflowIndex out of range');
+    }
+  }
 }
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 0e529c524801c..fc31314c41a7b 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
@@ -48,6 +48,18 @@ describe('Breadcrumb', () => {
 
     tree = component.toJSON();
     expect(tree).toMatchSnapshot();
+
+    // With overflow and overflowIndex
+    component = renderer.create(
+      <Breadcrumb
+        items={ items }
+        maxDisplayedItems={ 2 }
+        overflowIndex={ 1 }
+      />
+    );
+
+    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/Breadcrumb.types.ts b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts
index 05c0cb7225cd1..419097fbbc444 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts
@@ -41,6 +41,7 @@ export interface IBreadcrumbProps extends React.Props<Breadcrumb> {
   maxDisplayedItems?: number;
 
   /** Method to call when trying to render an item. */
+
   onRenderItem?: IRenderFunction<IBreadcrumbItem>;
 
   /**
@@ -58,6 +59,11 @@ export interface IBreadcrumbProps extends React.Props<Breadcrumb> {
    * Optional name to use for aria label on overflow button.
    */
   overflowAriaLabel?: string;
+
+  /**
+   * Optional index where overflow items will be collapsed. Defaults to 0.
+   */
+  overflowIndex?: number;
 }
 
 export interface IBreadcrumbItem {
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 52d3ff04150f1..575f97c0d6720 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
@@ -477,3 +477,214 @@ exports[`Breadcrumb renders breadcumb correctly 3`] = `
   </div>
 </div>
 `;
+
+exports[`Breadcrumb renders breadcumb correctly 4`] = `
+<div
+  className=
+      ms-ResizeGroup
+      {
+        display: block;
+        position: relative;
+      }
+>
+  <div
+    style={
+      Object {
+        "position": "fixed",
+        "visibility": "hidden",
+      }
+    }
+  >
+    <div
+      aria-label={undefined}
+      className="ms-Breadcrumb"
+      role="navigation"
+    >
+      <div
+        aria-describedby={undefined}
+        aria-labelledby={undefined}
+        className="ms-FocusZone"
+        data-focuszone-id="FocusZone16"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="presentation"
+      >
+        <ol
+          className="ms-Breadcrumb-list"
+        >
+          <li
+            className="ms-Breadcrumb-listItem"
+          >
+            <span
+              className="ms-Breadcrumb-item"
+            >
+              <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
+                  {
+                    display: inline-block;
+                  }
+              data-icon-name="ChevronRight"
+              role="presentation"
+            />
+          </li>
+          <li
+            className="ms-Breadcrumb-overflow"
+          >
+            <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: 14px;
+                    font-weight: 400;
+                    height: 32px;
+                    outline: transparent;
+                    padding-bottom: 0;
+                    padding-left: 4px;
+                    padding-right: 4px;
+                    padding-top: 0;
+                    position: relative;
+                    text-align: center;
+                    text-decoration: none;
+                    user-select: none;
+                    vertical-align: top;
+                    width: 32px;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric.is-focusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 0px;
+                    content: "";
+                    left: 0px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &: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;
+                  }
+              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
+                      {
+                        display: inline-block;
+                      }
+                      {
+                        flex-shrink: 0;
+                        font-size: 16px;
+                        height: 16px;
+                        line-height: 16px;
+                        margin-bottom: 0;
+                        margin-left: 4px;
+                        margin-right: 4px;
+                        margin-top: 0;
+                        text-align: center;
+                        vertical-align: middle;
+                      }
+                  data-icon-name="More"
+                  role="presentation"
+                />
+              </div>
+            </button>
+            <i
+              aria-hidden={true}
+              className=
+                  ms-Breadcrumb-chevron
+                  {
+                    display: inline-block;
+                  }
+              data-icon-name="ChevronRight"
+              role="presentation"
+            />
+          </li>
+          <li
+            className="ms-Breadcrumb-listItem"
+          >
+            <span
+              className="ms-Breadcrumb-item"
+            >
+              <div
+                aria-describedby={undefined}
+                className="ms-TooltipHost"
+                onBlurCapture={[Function]}
+                onFocusCapture={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+              >
+                TestText4
+              </div>
+            </span>
+          </li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</div>
+`;
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 25cb0874589e0..c3fc03ce3ca12 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
@@ -58,6 +58,18 @@ export class BreadcrumbBasicExample extends React.Component<any, any> {
           maxDisplayedItems={ 3 }
           ariaLabel={ 'Website breadcrumb' }
         />
+
+        <Label className={ exampleStyles.exampleLabel } style={ { marginTop: '24px' } }>With maxDisplayedItems set to three and overflowIndex set to 1 (second element)</Label>
+        <Breadcrumb
+          items={ [
+            { text: 'TestText1', key: 'TestKey1' },
+            { text: 'TestText2', key: 'TestKey2' },
+            { text: 'TestText3', key: 'TestKey3' },
+            { text: 'TestText4', key: 'TestKey4' }
+          ] }
+          maxDisplayedItems={ 2 }
+          overflowIndex={ 1 }
+        />
       </div >
     );
   }