diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.test.tsx
index 1d777ff4a3d44..de8c52dfc73fb 100644
--- a/packages/react/src/components/Breadcrumb/Breadcrumb.test.tsx
+++ b/packages/react/src/components/Breadcrumb/Breadcrumb.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
-import * as renderer from 'react-test-renderer';
+import { act, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Breadcrumb } from './index';
 import { Icon } from '../../Icon';
 import { isConformant } from '../../common/isConformant';
@@ -15,84 +15,60 @@ describe('Breadcrumb', () => {
     { text: 'TestText4', key: 'TestKey4' },
   ];
 
-  let component: renderer.ReactTestRenderer | undefined;
-  let wrapper: ReactWrapper | undefined;
-
   beforeEach(() => {
     resetIds();
   });
 
   afterEach(() => {
-    if (component) {
-      component.unmount();
-      component = undefined;
-    }
-    if (wrapper) {
-      wrapper.unmount();
-      wrapper = undefined;
+    if ((setTimeout as any).mock) {
+      jest.useRealTimers();
     }
   });
 
   it('renders empty breadcrumb', () => {
-    component = renderer.create(<Breadcrumb items={[]} />);
-
-    const tree = component.toJSON();
+    const { container } = render(<Breadcrumb items={[]} />);
 
-    expect(tree).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   describe('rendering', () => {
     it('renders correctly', () => {
-      component = renderer.create(<Breadcrumb items={items} />);
-
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
+      const { container } = render(<Breadcrumb items={items} />);
+      expect(container).toMatchSnapshot();
     });
 
     it('renders correctly with overflow', () => {
-      component = renderer.create(<Breadcrumb items={items} maxDisplayedItems={2} />);
-
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
+      const { container } = render(<Breadcrumb items={items} maxDisplayedItems={2} />);
+      expect(container).toMatchSnapshot();
     });
 
     it('renders correctly with custom divider', () => {
       const divider = () => <span>*</span>;
-      component = renderer.create(<Breadcrumb items={items} dividerAs={divider} />);
-
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
+      const { container } = render(<Breadcrumb items={items} dividerAs={divider} />);
+      expect(container).toMatchSnapshot();
     });
 
     it('renders correctly with overflow and overflowIndex', () => {
-      component = renderer.create(<Breadcrumb items={items} maxDisplayedItems={2} overflowIndex={1} />);
-
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
+      const { container } = render(<Breadcrumb items={items} maxDisplayedItems={2} overflowIndex={1} />);
+      expect(container).toMatchSnapshot();
     });
 
     it('renders correctly with maxDisplayedItems and overflowIndex', () => {
-      component = renderer.create(<Breadcrumb items={items} maxDisplayedItems={1} overflowIndex={1} />);
-
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
+      const { container } = render(<Breadcrumb items={items} maxDisplayedItems={1} overflowIndex={1} />);
+      expect(container).toMatchSnapshot();
     });
 
     it('renders correctly with maxDisplayedItems and overflowIndex as 0', () => {
-      component = renderer.create(<Breadcrumb items={items} maxDisplayedItems={0} overflowIndex={0} />);
-
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
+      const { container } = render(<Breadcrumb items={items} maxDisplayedItems={0} overflowIndex={0} />);
+      expect(container).toMatchSnapshot();
     });
 
     it('renders  correctly with custom overflow icon', () => {
       const overflowIcon = () => <Icon iconName={'ChevronDown'} />;
-      component = renderer.create(
+      const { container } = render(
         <Breadcrumb items={items} maxDisplayedItems={2} onRenderOverflowIcon={overflowIcon} />,
       );
-
-      const tree = component.toJSON();
-      expect(tree).toMatchSnapshot();
+      expect(container).toMatchSnapshot();
     });
   });
 
@@ -105,27 +81,35 @@ describe('Breadcrumb', () => {
   });
 
   it('renders items with expected element type', () => {
+    jest.useFakeTimers();
+
     const items2: IBreadcrumbItem[] = [
       { text: 'Test1', key: 'Test1', href: 'http://bing.com', onClick: () => undefined },
       { text: 'Test2', key: 'Test2', onClick: () => undefined },
       { text: 'Test3', key: 'Test3', as: 'h1' },
     ];
 
-    wrapper = mount(<Breadcrumb items={items2} />);
+    const { getAllByRole } = render(<Breadcrumb items={items2} />);
+    //Initial rendering of component is "hidden" while measurements are made
+    // therefore we need to wait a bit before getting roles.
+    act(() => {
+      jest.runAllTimers();
+    });
 
-    // get the first child of each list item (the actual item content)
-    const renderedItems = wrapper.find('.ms-Breadcrumb-listItem > *:first-child');
+    const renderedItems = getAllByRole('listitem');
     expect(renderedItems).toHaveLength(3);
     // should be a link since it has a href (even though it also has onclick)
-    expect(renderedItems.at(0).getDOMNode().tagName).toBe('A');
+    expect(renderedItems[0].firstElementChild!.tagName).toBe('A');
     // should be a button since it doesn't have a href
     // (can't use a link without a href because it won't respond to key events)
-    expect(renderedItems.at(1).getDOMNode().tagName).toBe('BUTTON');
+    expect(renderedItems[1].firstElementChild!.tagName).toBe('BUTTON');
     // specified type of h1 overrides default
-    expect(renderedItems.at(2).getDOMNode().tagName).toBe('H1');
+    expect(renderedItems[2].firstElementChild!.tagName).toBe('H1');
   });
 
   it('calls the callback when an item is clicked', () => {
+    jest.useFakeTimers();
+
     let callbackValue;
     const clickCallback = (ev: React.MouseEvent<HTMLElement>, item: IBreadcrumbItem) => {
       ev.preventDefault(); // in case it's a navigation event
@@ -137,37 +121,61 @@ describe('Breadcrumb', () => {
       { text: 'Test2', key: 'Test2', onClick: clickCallback },
     ];
 
-    wrapper = mount(<Breadcrumb items={items2} />);
-
-    const renderedItems = wrapper.find('.ms-Breadcrumb-itemLink').hostNodes();
+    const { getByRole } = render(<Breadcrumb items={items2} />);
+    //Initial rendering of component is "hidden" while measurements are made
+    // therefore we need to wait a bit before getting roles.
+    act(() => {
+      jest.runAllTimers();
+    });
 
-    renderedItems.at(0).simulate('click');
+    userEvent.click(getByRole('link'));
     expect(callbackValue).toEqual('Test1');
 
-    renderedItems.at(1).simulate('click');
+    userEvent.click(getByRole('button'));
     expect(callbackValue).toEqual('Test2');
   });
 
   it('moves items to overflow in the correct order', () => {
-    wrapper = mount(<Breadcrumb items={items} maxDisplayedItems={2} />);
+    jest.useFakeTimers();
 
-    expect(wrapper.find('.ms-Breadcrumb-item').first().text()).toContain('TestText3');
+    const { getAllByRole } = render(<Breadcrumb items={items} maxDisplayedItems={2} />);
+    //Initial rendering of component is "hidden" while measurements are made
+    // therefore we need to wait a bit before getting roles.
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    const firstListItem = getAllByRole('listitem')[1].firstElementChild;
+    expect(firstListItem!.textContent).toContain('TestText3');
   });
 
   it('supports native props on the root element', () => {
-    wrapper = mount(<Breadcrumb items={items} maxDisplayedItems={2} role="region" />);
+    jest.useFakeTimers();
 
-    expect(wrapper.find('.ms-Breadcrumb').prop('role')).toEqual('region');
+    const { getByRole } = render(<Breadcrumb items={items} maxDisplayedItems={2} role="region" />);
+    //Initial rendering of component is "hidden" while measurements are made
+    // therefore we need to wait a bit before getting roles.
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(getByRole('region')).toBeTruthy();
   });
 
   it('opens the overflow menu on click', () => {
-    wrapper = mount(<Breadcrumb items={items} maxDisplayedItems={2} />);
+    jest.useFakeTimers();
+
+    const { getByRole, getAllByRole } = render(<Breadcrumb items={items} maxDisplayedItems={2} />);
+    //Initial rendering of component is "hidden" while measurements are made
+    // therefore we need to wait a bit before getting roles.
+    act(() => {
+      jest.runAllTimers();
+    });
 
-    const overflowButton = wrapper.find('.ms-Breadcrumb-overflowButton');
-    // without hostNodes it returns the same element x4
-    overflowButton.hostNodes().simulate('click');
+    const overflowButton = getByRole('button');
+    userEvent.click(overflowButton!);
 
-    const overfowItems = document.querySelectorAll('.ms-ContextualMenu-item');
+    const overfowItems = getAllByRole('menuitem');
     expect(overfowItems).toHaveLength(2);
     expect(overfowItems[0].textContent).toEqual('TestText1');
     expect(overfowItems[1].textContent).toEqual('TestText2');
@@ -175,6 +183,8 @@ describe('Breadcrumb', () => {
 
   describe('ARIA prop propagation to breadcrumb items', () => {
     it('for Link', () => {
+      jest.useFakeTimers();
+
       const itemsWithAdditionalProps: IBreadcrumbItem[] = [
         {
           key: 'ItemKey1',
@@ -184,13 +194,20 @@ describe('Breadcrumb', () => {
         },
       ];
 
-      wrapper = mount(<Breadcrumb items={itemsWithAdditionalProps} />);
+      const { getByRole } = render(<Breadcrumb items={itemsWithAdditionalProps} />);
+      //Initial rendering of component is "hidden" while measurements are made
+      // therefore we need to wait a bit before getting roles.
+      act(() => {
+        jest.runAllTimers();
+      });
 
-      const item = wrapper.find('LinkBase');
-      expect(item.prop('aria-label')).toEqual("I'm an aria prop");
+      const item = getByRole('link');
+      expect(item.getAttribute('aria-label')).toEqual("I'm an aria prop");
     });
 
     it('for Tag', () => {
+      jest.useFakeTimers();
+
       const itemsWithAdditionalProps: IBreadcrumbItem[] = [
         {
           key: 'ItemKey1',
@@ -199,10 +216,15 @@ describe('Breadcrumb', () => {
         },
       ];
 
-      wrapper = mount(<Breadcrumb items={itemsWithAdditionalProps} />);
+      const { getByRole } = render(<Breadcrumb items={itemsWithAdditionalProps} />);
+      //Initial rendering of component is "hidden" while measurements are made
+      // therefore we need to wait a bit before getting roles.
+      act(() => {
+        jest.runAllTimers();
+      });
 
-      const item = wrapper.find('.ms-Breadcrumb-item');
-      expect(item.prop('aria-label')).toEqual("I'm an aria prop");
+      const item = getByRole('listitem', { hidden: true }).firstElementChild;
+      expect(item!.getAttribute('aria-label')).toEqual("I'm an aria prop");
     });
   });
 });
diff --git a/packages/react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
index c7e1366f22981..5d4a20435b637 100644
--- a/packages/react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/packages/react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -2,435 +2,387 @@
 
 exports[`Breadcrumb rendering renders  correctly with custom overflow icon 1`] = `
 <div>
-  <div
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
-  >
+  <div>
     <div
-      data-automation-id="visibleContent"
-      style={
-        Object {
-          "position": "fixed",
-          "visibility": "hidden",
-        }
-      }
+      style="position: relative;"
     >
       <div
-        className=
-            ms-Breadcrumb
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              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;
-              margin-bottom: 1px;
-              margin-left: 0;
-              margin-right: 0;
-              margin-top: 11px;
-            }
-        role="navigation"
+        data-automation-id="visibleContent"
+        style="position: fixed; visibility: hidden;"
       >
         <div
-          className=
-              ms-FocusZone
-              &:focus {
-                outline: none;
+          class=
+              ms-Breadcrumb
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                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;
+                margin-bottom: 1px;
+                margin-left: 0;
+                margin-right: 0;
+                margin-top: 11px;
               }
-          data-focuszone-id="FocusZone0"
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onMouseDownCapture={[Function]}
+          role="navigation"
         >
-          <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;
+          <div
+            class=
+                ms-FocusZone
+                &:focus {
+                  outline: none;
                 }
+            data-focuszone-id="FocusZone0"
           >
-            <li
-              className=
-                  ms-Breadcrumb-overflow
+            <ol
+              class=
+                  ms-Breadcrumb-list
                   {
-                    align-items: center;
+                    align-items: stretch;
                     display: flex;
-                    position: relative;
+                    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;
                   }
             >
-              <button
-                aria-controls={null}
-                aria-expanded={false}
-                aria-haspopup={true}
-                className=
-                    ms-Button
-                    ms-Button--icon
-                    ms-Button--hasMenu
-                    ms-Breadcrumb-overflowButton
+              <li
+                class=
+                    ms-Breadcrumb-overflow
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      background-color: transparent;
-                      border-radius: 2px;
-                      border: none;
-                      box-sizing: border-box;
-                      color: #605e5c;
-                      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;
+                      align-items: center;
+                      display: flex;
                       position: relative;
-                      text-align: center;
-                      text-decoration: none;
-                      text-overflow: ellipsis;
-                      user-select: none;
-                      white-space: nowrap;
-                      width: auto;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                    .ms-Fabric--isFocusVisible &:focus:after {
-                      border: 1px solid #ffffff;
-                      bottom: 1px;
-                      content: "";
-                      left: 1px;
-                      outline: 1px solid #605e5c;
-                      position: absolute;
-                      right: 1px;
-                      top: 1px;
-                      z-index: 1;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                      bottom: -2px;
-                      left: -2px;
-                      outline-color: ButtonText;
-                      right: -2px;
-                      top: -2px;
-                    }
-                    &:active > * {
-                      left: 0px;
-                      position: relative;
-                      top: 0px;
-                    }
-                    &:hover {
-                      background-color: #f3f2f1;
-                      color: #323130;
-                      cursor: pointer;
-                      text-decoration: none;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
-                      background-color: transparent;
-                      border-color: Highlight;
-                      color: Highlight;
-                    }
-                    &:active {
-                      background-color: #edebe9;
-                      color: #323130;
-                      text-decoration: none;
                     }
-                    &:active:hover {
-                      background-color: #edebe9;
-                      color: #323130;
-                      text-decoration: none;
-                    }
-                    @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: 16px;
-                    }
-                data-is-focusable={true}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyPress={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                role="button"
-                type="button"
               >
-                <span
-                  className=
-                      ms-Button-flexContainer
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class=
+                      ms-Button
+                      ms-Button--icon
+                      ms-Button--hasMenu
+                      ms-Breadcrumb-overflowButton
                       {
-                        align-items: center;
-                        display: flex;
-                        flex-wrap: nowrap;
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        background-color: transparent;
+                        border-radius: 2px;
+                        border: none;
+                        box-sizing: border-box;
+                        color: #605e5c;
+                        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%;
-                        justify-content: center;
+                        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;
+                        white-space: nowrap;
+                        width: auto;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid #ffffff;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        bottom: -2px;
+                        left: -2px;
+                        outline-color: ButtonText;
+                        right: -2px;
+                        top: -2px;
+                      }
+                      &:active > * {
+                        left: 0px;
+                        position: relative;
+                        top: 0px;
+                      }
+                      &:hover {
+                        background-color: #f3f2f1;
+                        color: #323130;
+                        cursor: pointer;
+                        text-decoration: none;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
+                        background-color: transparent;
+                        border-color: Highlight;
+                        color: Highlight;
                       }
-                  data-automationid="splitbuttonprimary"
+                      &:active {
+                        background-color: #edebe9;
+                        color: #323130;
+                        text-decoration: none;
+                      }
+                      &:active:hover {
+                        background-color: #edebe9;
+                        color: #323130;
+                        text-decoration: none;
+                      }
+                      @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: 16px;
+                      }
+                  data-is-focusable="true"
+                  role="button"
+                  tabindex="0"
+                  type="button"
                 >
-                  <i
-                    aria-hidden={true}
-                    className=
-
+                  <span
+                    class=
+                        ms-Button-flexContainer
                         {
-                          -moz-osx-font-smoothing: grayscale;
-                          -webkit-font-smoothing: antialiased;
-                          display: inline-block;
-                          font-family: "FabricMDL2Icons";
-                          font-style: normal;
-                          font-weight: normal;
-                          speak: none;
+                          align-items: center;
+                          display: flex;
+                          flex-wrap: nowrap;
+                          height: 100%;
+                          justify-content: center;
                         }
-                    data-icon-name="ChevronDown"
+                    data-automationid="splitbuttonprimary"
                   >
-                    
-                  </i>
-                </span>
-              </button>
-              <i
-                aria-hidden={true}
-                className=
-                    ms-Breadcrumb-chevron
-                    {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #605e5c;
-                      display: inline-block;
-                      font-family: "FabricMDL2Icons";
-                      font-size: 12px;
-                      font-style: normal;
-                      font-weight: normal;
-                      speak: none;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                      -ms-high-contrast-adjust: none;
-                      color: WindowText;
-                      forced-color-adjust: none;
-                    }
-                    @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"
-              >
-                
-              </i>
-            </li>
-            <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;
-                  }
-                  &:last-child .ms-Breadcrumb-itemLink {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
-                    -ms-high-contrast-adjust: auto;
-                    forced-color-adjust: auto;
-                  }
-                  &:last-child .ms-Breadcrumb-item {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-            >
-              <span
-                className=
-                    ms-Breadcrumb-item
+                    <i
+                      aria-hidden="true"
+                      class=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            display: inline-block;
+                            font-family: "FabricMDL2Icons";
+                            font-style: normal;
+                            font-weight: normal;
+                            speak: none;
+                          }
+                      data-icon-name="ChevronDown"
+                    >
+                      
+                    </i>
+                  </span>
+                </button>
+                <i
+                  aria-hidden="true"
+                  class=
+                      ms-Breadcrumb-chevron
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #605e5c;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: normal;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: WindowText;
+                        forced-color-adjust: none;
+                      }
+                      @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"
+                >
+                  
+                </i>
+              </li>
+              <li
+                class=
+                    ms-Breadcrumb-listItem
                     {
-                      color: #605e5c;
-                      font-size: 18px;
-                      font-weight: 400;
-                      line-height: 36px;
+                      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: 8px;
-                      padding-right: 8px;
+                      padding-left: 0;
+                      padding-right: 0;
                       padding-top: 0;
+                      position: relative;
+                    }
+                    &:last-child .ms-Breadcrumb-itemLink {
+                      color: #323130;
+                      font-weight: 600;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
+                      -ms-high-contrast-adjust: auto;
+                      forced-color-adjust: auto;
                     }
-                    &:hover {
-                      cursor: default;
+                    &:last-child .ms-Breadcrumb-item {
+                      color: #323130;
+                      font-weight: 600;
                     }
               >
-                <div
-                  className=
-                      ms-TooltipHost
+                <span
+                  class=
+                      ms-Breadcrumb-item
                       {
-                        display: inline;
-                      }
-                  onBlurCapture={[Function]}
-                  onFocusCapture={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  role="none"
+                        color: #605e5c;
+                        font-size: 18px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        padding-bottom: 0;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 0;
+                      }
+                      &:hover {
+                        cursor: default;
+                      }
                 >
-                  TestText3
                   <div
-                    hidden={true}
-                    id="tooltip4"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
+                    class=
+                        ms-TooltipHost
+                        {
+                          display: inline;
+                        }
+                    role="none"
                   >
                     TestText3
+                    <div
+                      hidden=""
+                      id="tooltip4"
+                      style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;"
+                    >
+                      TestText3
+                    </div>
                   </div>
-                </div>
-              </span>
-              <i
-                aria-hidden={true}
-                className=
-                    ms-Breadcrumb-chevron
-                    {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #605e5c;
-                      display: inline-block;
-                      font-family: "FabricMDL2Icons";
-                      font-size: 12px;
-                      font-style: normal;
-                      font-weight: normal;
-                      speak: none;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                      -ms-high-contrast-adjust: none;
-                      color: WindowText;
-                      forced-color-adjust: none;
-                    }
-                    @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"
-              >
-                
-              </i>
-            </li>
-            <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;
-                  }
-                  &:last-child .ms-Breadcrumb-itemLink {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
-                    -ms-high-contrast-adjust: auto;
-                    forced-color-adjust: auto;
-                  }
-                  &:last-child .ms-Breadcrumb-item {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-            >
-              <span
-                className=
-                    ms-Breadcrumb-item
+                </span>
+                <i
+                  aria-hidden="true"
+                  class=
+                      ms-Breadcrumb-chevron
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #605e5c;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: normal;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: WindowText;
+                        forced-color-adjust: none;
+                      }
+                      @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"
+                >
+                  
+                </i>
+              </li>
+              <li
+                class=
+                    ms-Breadcrumb-listItem
                     {
-                      color: #605e5c;
-                      font-size: 18px;
-                      font-weight: 400;
-                      line-height: 36px;
+                      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: 8px;
-                      padding-right: 8px;
+                      padding-left: 0;
+                      padding-right: 0;
                       padding-top: 0;
+                      position: relative;
+                    }
+                    &:last-child .ms-Breadcrumb-itemLink {
+                      color: #323130;
+                      font-weight: 600;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
+                      -ms-high-contrast-adjust: auto;
+                      forced-color-adjust: auto;
                     }
-                    &:hover {
-                      cursor: default;
+                    &:last-child .ms-Breadcrumb-item {
+                      color: #323130;
+                      font-weight: 600;
                     }
               >
-                <div
-                  className=
-                      ms-TooltipHost
+                <span
+                  class=
+                      ms-Breadcrumb-item
                       {
-                        display: inline;
-                      }
-                  onBlurCapture={[Function]}
-                  onFocusCapture={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  role="none"
+                        color: #605e5c;
+                        font-size: 18px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        padding-bottom: 0;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 0;
+                      }
+                      &:hover {
+                        cursor: default;
+                      }
                 >
-                  TestText4
                   <div
-                    hidden={true}
-                    id="tooltip5"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
+                    class=
+                        ms-TooltipHost
+                        {
+                          display: inline;
+                        }
+                    role="none"
                   >
                     TestText4
+                    <div
+                      hidden=""
+                      id="tooltip5"
+                      style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;"
+                    >
+                      TestText4
+                    </div>
                   </div>
-                </div>
-              </span>
-            </li>
-          </ol>
+                </span>
+              </li>
+            </ol>
+          </div>
         </div>
       </div>
     </div>
@@ -440,485 +392,411 @@ exports[`Breadcrumb rendering renders  correctly with custom overflow icon 1`] =
 
 exports[`Breadcrumb rendering renders correctly 1`] = `
 <div>
-  <div
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
-  >
+  <div>
     <div
-      data-automation-id="visibleContent"
-      style={
-        Object {
-          "position": "fixed",
-          "visibility": "hidden",
-        }
-      }
+      style="position: relative;"
     >
       <div
-        className=
-            ms-Breadcrumb
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              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;
-              margin-bottom: 1px;
-              margin-left: 0;
-              margin-right: 0;
-              margin-top: 11px;
-            }
-        role="navigation"
+        data-automation-id="visibleContent"
+        style="position: fixed; visibility: hidden;"
       >
         <div
-          className=
-              ms-FocusZone
-              &:focus {
-                outline: none;
+          class=
+              ms-Breadcrumb
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                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;
+                margin-bottom: 1px;
+                margin-left: 0;
+                margin-right: 0;
+                margin-top: 11px;
               }
-          data-focuszone-id="FocusZone0"
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onMouseDownCapture={[Function]}
+          role="navigation"
         >
-          <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;
+          <div
+            class=
+                ms-FocusZone
+                &:focus {
+                  outline: none;
                 }
+            data-focuszone-id="FocusZone0"
           >
-            <li
-              className=
-                  ms-Breadcrumb-listItem
+            <ol
+              class=
+                  ms-Breadcrumb-list
                   {
-                    align-items: center;
+                    align-items: stretch;
                     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;
-                  }
-                  &:last-child .ms-Breadcrumb-itemLink {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
-                    -ms-high-contrast-adjust: auto;
-                    forced-color-adjust: auto;
-                  }
-                  &:last-child .ms-Breadcrumb-item {
-                    color: #323130;
-                    font-weight: 600;
+                    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;
                   }
             >
-              <span
-                className=
-                    ms-Breadcrumb-item
+              <li
+                class=
+                    ms-Breadcrumb-listItem
                     {
-                      color: #605e5c;
-                      font-size: 18px;
-                      font-weight: 400;
-                      line-height: 36px;
+                      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: 8px;
-                      padding-right: 8px;
+                      padding-left: 0;
+                      padding-right: 0;
                       padding-top: 0;
+                      position: relative;
+                    }
+                    &:last-child .ms-Breadcrumb-itemLink {
+                      color: #323130;
+                      font-weight: 600;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
+                      -ms-high-contrast-adjust: auto;
+                      forced-color-adjust: auto;
                     }
-                    &:hover {
-                      cursor: default;
+                    &:last-child .ms-Breadcrumb-item {
+                      color: #323130;
+                      font-weight: 600;
                     }
               >
-                <div
-                  className=
-                      ms-TooltipHost
+                <span
+                  class=
+                      ms-Breadcrumb-item
                       {
-                        display: inline;
-                      }
-                  onBlurCapture={[Function]}
-                  onFocusCapture={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  role="none"
+                        color: #605e5c;
+                        font-size: 18px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        padding-bottom: 0;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 0;
+                      }
+                      &:hover {
+                        cursor: default;
+                      }
                 >
-                  TestText1
                   <div
-                    hidden={true}
-                    id="tooltip1"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
+                    class=
+                        ms-TooltipHost
+                        {
+                          display: inline;
+                        }
+                    role="none"
                   >
                     TestText1
+                    <div
+                      hidden=""
+                      id="tooltip1"
+                      style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;"
+                    >
+                      TestText1
+                    </div>
                   </div>
-                </div>
-              </span>
-              <i
-                aria-hidden={true}
-                className=
-                    ms-Breadcrumb-chevron
-                    {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #605e5c;
-                      display: inline-block;
-                      font-family: "FabricMDL2Icons";
-                      font-size: 12px;
-                      font-style: normal;
-                      font-weight: normal;
-                      speak: none;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                      -ms-high-contrast-adjust: none;
-                      color: WindowText;
-                      forced-color-adjust: none;
-                    }
-                    @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"
-              >
-                
-              </i>
-            </li>
-            <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;
-                  }
-                  &:last-child .ms-Breadcrumb-itemLink {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
-                    -ms-high-contrast-adjust: auto;
-                    forced-color-adjust: auto;
-                  }
-                  &:last-child .ms-Breadcrumb-item {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-            >
-              <span
-                className=
-                    ms-Breadcrumb-item
+                </span>
+                <i
+                  aria-hidden="true"
+                  class=
+                      ms-Breadcrumb-chevron
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #605e5c;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: normal;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: WindowText;
+                        forced-color-adjust: none;
+                      }
+                      @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"
+                >
+                  
+                </i>
+              </li>
+              <li
+                class=
+                    ms-Breadcrumb-listItem
                     {
-                      color: #605e5c;
-                      font-size: 18px;
-                      font-weight: 400;
-                      line-height: 36px;
+                      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: 8px;
-                      padding-right: 8px;
+                      padding-left: 0;
+                      padding-right: 0;
                       padding-top: 0;
+                      position: relative;
+                    }
+                    &:last-child .ms-Breadcrumb-itemLink {
+                      color: #323130;
+                      font-weight: 600;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
+                      -ms-high-contrast-adjust: auto;
+                      forced-color-adjust: auto;
                     }
-                    &:hover {
-                      cursor: default;
+                    &:last-child .ms-Breadcrumb-item {
+                      color: #323130;
+                      font-weight: 600;
                     }
               >
-                <div
-                  className=
-                      ms-TooltipHost
+                <span
+                  class=
+                      ms-Breadcrumb-item
                       {
-                        display: inline;
-                      }
-                  onBlurCapture={[Function]}
-                  onFocusCapture={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  role="none"
+                        color: #605e5c;
+                        font-size: 18px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        padding-bottom: 0;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 0;
+                      }
+                      &:hover {
+                        cursor: default;
+                      }
                 >
-                  TestText2
                   <div
-                    hidden={true}
-                    id="tooltip2"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
+                    class=
+                        ms-TooltipHost
+                        {
+                          display: inline;
+                        }
+                    role="none"
                   >
                     TestText2
+                    <div
+                      hidden=""
+                      id="tooltip2"
+                      style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;"
+                    >
+                      TestText2
+                    </div>
                   </div>
-                </div>
-              </span>
-              <i
-                aria-hidden={true}
-                className=
-                    ms-Breadcrumb-chevron
-                    {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #605e5c;
-                      display: inline-block;
-                      font-family: "FabricMDL2Icons";
-                      font-size: 12px;
-                      font-style: normal;
-                      font-weight: normal;
-                      speak: none;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                      -ms-high-contrast-adjust: none;
-                      color: WindowText;
-                      forced-color-adjust: none;
-                    }
-                    @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"
-              >
-                
-              </i>
-            </li>
-            <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;
-                  }
-                  &:last-child .ms-Breadcrumb-itemLink {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
-                    -ms-high-contrast-adjust: auto;
-                    forced-color-adjust: auto;
-                  }
-                  &:last-child .ms-Breadcrumb-item {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-            >
-              <span
-                className=
-                    ms-Breadcrumb-item
+                </span>
+                <i
+                  aria-hidden="true"
+                  class=
+                      ms-Breadcrumb-chevron
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #605e5c;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: normal;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: WindowText;
+                        forced-color-adjust: none;
+                      }
+                      @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"
+                >
+                  
+                </i>
+              </li>
+              <li
+                class=
+                    ms-Breadcrumb-listItem
                     {
-                      color: #605e5c;
-                      font-size: 18px;
-                      font-weight: 400;
-                      line-height: 36px;
+                      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: 8px;
-                      padding-right: 8px;
+                      padding-left: 0;
+                      padding-right: 0;
                       padding-top: 0;
+                      position: relative;
+                    }
+                    &:last-child .ms-Breadcrumb-itemLink {
+                      color: #323130;
+                      font-weight: 600;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
+                      -ms-high-contrast-adjust: auto;
+                      forced-color-adjust: auto;
                     }
-                    &:hover {
-                      cursor: default;
+                    &:last-child .ms-Breadcrumb-item {
+                      color: #323130;
+                      font-weight: 600;
                     }
               >
-                <div
-                  className=
-                      ms-TooltipHost
+                <span
+                  class=
+                      ms-Breadcrumb-item
                       {
-                        display: inline;
-                      }
-                  onBlurCapture={[Function]}
-                  onFocusCapture={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  role="none"
+                        color: #605e5c;
+                        font-size: 18px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        padding-bottom: 0;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 0;
+                      }
+                      &:hover {
+                        cursor: default;
+                      }
                 >
-                  TestText3
                   <div
-                    hidden={true}
-                    id="tooltip3"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
+                    class=
+                        ms-TooltipHost
+                        {
+                          display: inline;
+                        }
+                    role="none"
                   >
                     TestText3
+                    <div
+                      hidden=""
+                      id="tooltip3"
+                      style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;"
+                    >
+                      TestText3
+                    </div>
                   </div>
-                </div>
-              </span>
-              <i
-                aria-hidden={true}
-                className=
-                    ms-Breadcrumb-chevron
-                    {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #605e5c;
-                      display: inline-block;
-                      font-family: "FabricMDL2Icons";
-                      font-size: 12px;
-                      font-style: normal;
-                      font-weight: normal;
-                      speak: none;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                      -ms-high-contrast-adjust: none;
-                      color: WindowText;
-                      forced-color-adjust: none;
-                    }
-                    @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"
-              >
-                
-              </i>
-            </li>
-            <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;
-                  }
-                  &:last-child .ms-Breadcrumb-itemLink {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
-                    -ms-high-contrast-adjust: auto;
-                    forced-color-adjust: auto;
-                  }
-                  &:last-child .ms-Breadcrumb-item {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-            >
-              <span
-                className=
-                    ms-Breadcrumb-item
+                </span>
+                <i
+                  aria-hidden="true"
+                  class=
+                      ms-Breadcrumb-chevron
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #605e5c;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: normal;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: WindowText;
+                        forced-color-adjust: none;
+                      }
+                      @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"
+                >
+                  
+                </i>
+              </li>
+              <li
+                class=
+                    ms-Breadcrumb-listItem
                     {
-                      color: #605e5c;
-                      font-size: 18px;
-                      font-weight: 400;
-                      line-height: 36px;
+                      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: 8px;
-                      padding-right: 8px;
+                      padding-left: 0;
+                      padding-right: 0;
                       padding-top: 0;
+                      position: relative;
+                    }
+                    &:last-child .ms-Breadcrumb-itemLink {
+                      color: #323130;
+                      font-weight: 600;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
+                      -ms-high-contrast-adjust: auto;
+                      forced-color-adjust: auto;
                     }
-                    &:hover {
-                      cursor: default;
+                    &:last-child .ms-Breadcrumb-item {
+                      color: #323130;
+                      font-weight: 600;
                     }
               >
-                <div
-                  className=
-                      ms-TooltipHost
+                <span
+                  class=
+                      ms-Breadcrumb-item
                       {
-                        display: inline;
-                      }
-                  onBlurCapture={[Function]}
-                  onFocusCapture={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  role="none"
+                        color: #605e5c;
+                        font-size: 18px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        padding-bottom: 0;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 0;
+                      }
+                      &:hover {
+                        cursor: default;
+                      }
                 >
-                  TestText4
                   <div
-                    hidden={true}
-                    id="tooltip4"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
+                    class=
+                        ms-TooltipHost
+                        {
+                          display: inline;
+                        }
+                    role="none"
                   >
                     TestText4
+                    <div
+                      hidden=""
+                      id="tooltip4"
+                      style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;"
+                    >
+                      TestText4
+                    </div>
                   </div>
-                </div>
-              </span>
-            </li>
-          </ol>
+                </span>
+              </li>
+            </ol>
+          </div>
         </div>
       </div>
     </div>
@@ -928,404 +806,330 @@ exports[`Breadcrumb rendering renders correctly 1`] = `
 
 exports[`Breadcrumb rendering renders correctly with custom divider 1`] = `
 <div>
-  <div
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
-  >
+  <div>
     <div
-      data-automation-id="visibleContent"
-      style={
-        Object {
-          "position": "fixed",
-          "visibility": "hidden",
-        }
-      }
+      style="position: relative;"
     >
       <div
-        className=
-            ms-Breadcrumb
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              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;
-              margin-bottom: 1px;
-              margin-left: 0;
-              margin-right: 0;
-              margin-top: 11px;
-            }
-        role="navigation"
+        data-automation-id="visibleContent"
+        style="position: fixed; visibility: hidden;"
       >
         <div
-          className=
-              ms-FocusZone
-              &:focus {
-                outline: none;
+          class=
+              ms-Breadcrumb
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                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;
+                margin-bottom: 1px;
+                margin-left: 0;
+                margin-right: 0;
+                margin-top: 11px;
               }
-          data-focuszone-id="FocusZone0"
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onMouseDownCapture={[Function]}
+          role="navigation"
         >
-          <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;
+          <div
+            class=
+                ms-FocusZone
+                &:focus {
+                  outline: none;
                 }
+            data-focuszone-id="FocusZone0"
           >
-            <li
-              className=
-                  ms-Breadcrumb-listItem
+            <ol
+              class=
+                  ms-Breadcrumb-list
                   {
-                    align-items: center;
+                    align-items: stretch;
                     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;
-                  }
-                  &:last-child .ms-Breadcrumb-itemLink {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
-                    -ms-high-contrast-adjust: auto;
-                    forced-color-adjust: auto;
-                  }
-                  &:last-child .ms-Breadcrumb-item {
-                    color: #323130;
-                    font-weight: 600;
+                    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;
                   }
             >
-              <span
-                className=
-                    ms-Breadcrumb-item
+              <li
+                class=
+                    ms-Breadcrumb-listItem
                     {
-                      color: #605e5c;
-                      font-size: 18px;
-                      font-weight: 400;
-                      line-height: 36px;
+                      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: 8px;
-                      padding-right: 8px;
+                      padding-left: 0;
+                      padding-right: 0;
                       padding-top: 0;
+                      position: relative;
+                    }
+                    &:last-child .ms-Breadcrumb-itemLink {
+                      color: #323130;
+                      font-weight: 600;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
+                      -ms-high-contrast-adjust: auto;
+                      forced-color-adjust: auto;
                     }
-                    &:hover {
-                      cursor: default;
+                    &:last-child .ms-Breadcrumb-item {
+                      color: #323130;
+                      font-weight: 600;
                     }
               >
-                <div
-                  className=
-                      ms-TooltipHost
+                <span
+                  class=
+                      ms-Breadcrumb-item
                       {
-                        display: inline;
-                      }
-                  onBlurCapture={[Function]}
-                  onFocusCapture={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  role="none"
+                        color: #605e5c;
+                        font-size: 18px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        padding-bottom: 0;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 0;
+                      }
+                      &:hover {
+                        cursor: default;
+                      }
                 >
-                  TestText1
                   <div
-                    hidden={true}
-                    id="tooltip1"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
+                    class=
+                        ms-TooltipHost
+                        {
+                          display: inline;
+                        }
+                    role="none"
                   >
                     TestText1
+                    <div
+                      hidden=""
+                      id="tooltip1"
+                      style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;"
+                    >
+                      TestText1
+                    </div>
                   </div>
-                </div>
-              </span>
-              <span>
-                *
-              </span>
-            </li>
-            <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;
-                  }
-                  &:last-child .ms-Breadcrumb-itemLink {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
-                    -ms-high-contrast-adjust: auto;
-                    forced-color-adjust: auto;
-                  }
-                  &:last-child .ms-Breadcrumb-item {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-            >
-              <span
-                className=
-                    ms-Breadcrumb-item
+                </span>
+                <span>
+                  *
+                </span>
+              </li>
+              <li
+                class=
+                    ms-Breadcrumb-listItem
                     {
-                      color: #605e5c;
-                      font-size: 18px;
-                      font-weight: 400;
-                      line-height: 36px;
+                      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: 8px;
-                      padding-right: 8px;
+                      padding-left: 0;
+                      padding-right: 0;
                       padding-top: 0;
+                      position: relative;
                     }
-                    &:hover {
-                      cursor: default;
+                    &:last-child .ms-Breadcrumb-itemLink {
+                      color: #323130;
+                      font-weight: 600;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
+                      -ms-high-contrast-adjust: auto;
+                      forced-color-adjust: auto;
+                    }
+                    &:last-child .ms-Breadcrumb-item {
+                      color: #323130;
+                      font-weight: 600;
                     }
               >
-                <div
-                  className=
-                      ms-TooltipHost
+                <span
+                  class=
+                      ms-Breadcrumb-item
                       {
-                        display: inline;
-                      }
-                  onBlurCapture={[Function]}
-                  onFocusCapture={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  role="none"
+                        color: #605e5c;
+                        font-size: 18px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        padding-bottom: 0;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 0;
+                      }
+                      &:hover {
+                        cursor: default;
+                      }
                 >
-                  TestText2
                   <div
-                    hidden={true}
-                    id="tooltip2"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
+                    class=
+                        ms-TooltipHost
+                        {
+                          display: inline;
+                        }
+                    role="none"
                   >
                     TestText2
+                    <div
+                      hidden=""
+                      id="tooltip2"
+                      style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;"
+                    >
+                      TestText2
+                    </div>
                   </div>
-                </div>
-              </span>
-              <span>
-                *
-              </span>
-            </li>
-            <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;
-                  }
-                  &:last-child .ms-Breadcrumb-itemLink {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
-                    -ms-high-contrast-adjust: auto;
-                    forced-color-adjust: auto;
-                  }
-                  &:last-child .ms-Breadcrumb-item {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-            >
-              <span
-                className=
-                    ms-Breadcrumb-item
+                </span>
+                <span>
+                  *
+                </span>
+              </li>
+              <li
+                class=
+                    ms-Breadcrumb-listItem
                     {
-                      color: #605e5c;
-                      font-size: 18px;
-                      font-weight: 400;
-                      line-height: 36px;
+                      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: 8px;
-                      padding-right: 8px;
+                      padding-left: 0;
+                      padding-right: 0;
                       padding-top: 0;
+                      position: relative;
+                    }
+                    &:last-child .ms-Breadcrumb-itemLink {
+                      color: #323130;
+                      font-weight: 600;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
+                      -ms-high-contrast-adjust: auto;
+                      forced-color-adjust: auto;
                     }
-                    &:hover {
-                      cursor: default;
+                    &:last-child .ms-Breadcrumb-item {
+                      color: #323130;
+                      font-weight: 600;
                     }
               >
-                <div
-                  className=
-                      ms-TooltipHost
+                <span
+                  class=
+                      ms-Breadcrumb-item
                       {
-                        display: inline;
-                      }
-                  onBlurCapture={[Function]}
-                  onFocusCapture={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  role="none"
+                        color: #605e5c;
+                        font-size: 18px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        padding-bottom: 0;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 0;
+                      }
+                      &:hover {
+                        cursor: default;
+                      }
                 >
-                  TestText3
                   <div
-                    hidden={true}
-                    id="tooltip3"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
+                    class=
+                        ms-TooltipHost
+                        {
+                          display: inline;
+                        }
+                    role="none"
                   >
                     TestText3
+                    <div
+                      hidden=""
+                      id="tooltip3"
+                      style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;"
+                    >
+                      TestText3
+                    </div>
                   </div>
-                </div>
-              </span>
-              <span>
-                *
-              </span>
-            </li>
-            <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;
-                  }
-                  &:last-child .ms-Breadcrumb-itemLink {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
-                    -ms-high-contrast-adjust: auto;
-                    forced-color-adjust: auto;
-                  }
-                  &:last-child .ms-Breadcrumb-item {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-            >
-              <span
-                className=
-                    ms-Breadcrumb-item
+                </span>
+                <span>
+                  *
+                </span>
+              </li>
+              <li
+                class=
+                    ms-Breadcrumb-listItem
                     {
-                      color: #605e5c;
-                      font-size: 18px;
-                      font-weight: 400;
-                      line-height: 36px;
+                      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: 8px;
-                      padding-right: 8px;
+                      padding-left: 0;
+                      padding-right: 0;
                       padding-top: 0;
+                      position: relative;
+                    }
+                    &:last-child .ms-Breadcrumb-itemLink {
+                      color: #323130;
+                      font-weight: 600;
                     }
-                    &:hover {
-                      cursor: default;
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
+                      -ms-high-contrast-adjust: auto;
+                      forced-color-adjust: auto;
+                    }
+                    &:last-child .ms-Breadcrumb-item {
+                      color: #323130;
+                      font-weight: 600;
                     }
               >
-                <div
-                  className=
-                      ms-TooltipHost
+                <span
+                  class=
+                      ms-Breadcrumb-item
                       {
-                        display: inline;
-                      }
-                  onBlurCapture={[Function]}
-                  onFocusCapture={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  role="none"
+                        color: #605e5c;
+                        font-size: 18px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        padding-bottom: 0;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 0;
+                      }
+                      &:hover {
+                        cursor: default;
+                      }
                 >
-                  TestText4
                   <div
-                    hidden={true}
-                    id="tooltip4"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
+                    class=
+                        ms-TooltipHost
+                        {
+                          display: inline;
+                        }
+                    role="none"
                   >
                     TestText4
+                    <div
+                      hidden=""
+                      id="tooltip4"
+                      style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;"
+                    >
+                      TestText4
+                    </div>
                   </div>
-                </div>
-              </span>
-            </li>
-          </ol>
+                </span>
+              </li>
+            </ol>
+          </div>
         </div>
       </div>
     </div>
@@ -1335,342 +1139,306 @@ exports[`Breadcrumb rendering renders correctly with custom divider 1`] = `
 
 exports[`Breadcrumb rendering renders correctly with maxDisplayedItems and overflowIndex 1`] = `
 <div>
-  <div
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
-  >
+  <div>
     <div
-      data-automation-id="visibleContent"
-      style={
-        Object {
-          "position": "fixed",
-          "visibility": "hidden",
-        }
-      }
+      style="position: relative;"
     >
       <div
-        className=
-            ms-Breadcrumb
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              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;
-              margin-bottom: 1px;
-              margin-left: 0;
-              margin-right: 0;
-              margin-top: 11px;
-            }
-        role="navigation"
+        data-automation-id="visibleContent"
+        style="position: fixed; visibility: hidden;"
       >
         <div
-          className=
-              ms-FocusZone
-              &:focus {
-                outline: none;
+          class=
+              ms-Breadcrumb
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                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;
+                margin-bottom: 1px;
+                margin-left: 0;
+                margin-right: 0;
+                margin-top: 11px;
               }
-          data-focuszone-id="FocusZone0"
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onMouseDownCapture={[Function]}
+          role="navigation"
         >
-          <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;
+          <div
+            class=
+                ms-FocusZone
+                &:focus {
+                  outline: none;
                 }
+            data-focuszone-id="FocusZone0"
           >
-            <li
-              className=
-                  ms-Breadcrumb-listItem
+            <ol
+              class=
+                  ms-Breadcrumb-list
                   {
-                    align-items: center;
+                    align-items: stretch;
                     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;
-                  }
-                  &:last-child .ms-Breadcrumb-itemLink {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
-                    -ms-high-contrast-adjust: auto;
-                    forced-color-adjust: auto;
-                  }
-                  &:last-child .ms-Breadcrumb-item {
-                    color: #323130;
-                    font-weight: 600;
+                    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;
                   }
             >
-              <span
-                className=
-                    ms-Breadcrumb-item
+              <li
+                class=
+                    ms-Breadcrumb-listItem
                     {
-                      color: #605e5c;
-                      font-size: 18px;
-                      font-weight: 400;
-                      line-height: 36px;
+                      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: 8px;
-                      padding-right: 8px;
+                      padding-left: 0;
+                      padding-right: 0;
                       padding-top: 0;
+                      position: relative;
+                    }
+                    &:last-child .ms-Breadcrumb-itemLink {
+                      color: #323130;
+                      font-weight: 600;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
+                      -ms-high-contrast-adjust: auto;
+                      forced-color-adjust: auto;
                     }
-                    &:hover {
-                      cursor: default;
+                    &:last-child .ms-Breadcrumb-item {
+                      color: #323130;
+                      font-weight: 600;
                     }
               >
-                <div
-                  className=
-                      ms-TooltipHost
+                <span
+                  class=
+                      ms-Breadcrumb-item
                       {
-                        display: inline;
-                      }
-                  onBlurCapture={[Function]}
-                  onFocusCapture={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  role="none"
+                        color: #605e5c;
+                        font-size: 18px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        padding-bottom: 0;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 0;
+                      }
+                      &:hover {
+                        cursor: default;
+                      }
                 >
-                  TestText1
                   <div
-                    hidden={true}
-                    id="tooltip1"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
+                    class=
+                        ms-TooltipHost
+                        {
+                          display: inline;
+                        }
+                    role="none"
                   >
                     TestText1
+                    <div
+                      hidden=""
+                      id="tooltip1"
+                      style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;"
+                    >
+                      TestText1
+                    </div>
                   </div>
-                </div>
-              </span>
-              <i
-                aria-hidden={true}
-                className=
-                    ms-Breadcrumb-chevron
-                    {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #605e5c;
-                      display: inline-block;
-                      font-family: "FabricMDL2Icons";
-                      font-size: 12px;
-                      font-style: normal;
-                      font-weight: normal;
-                      speak: none;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                      -ms-high-contrast-adjust: none;
-                      color: WindowText;
-                      forced-color-adjust: none;
-                    }
-                    @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"
-              >
-                
-              </i>
-            </li>
-            <li
-              className=
-                  ms-Breadcrumb-overflow
-                  {
-                    align-items: center;
-                    display: flex;
-                    position: relative;
-                  }
-            >
-              <button
-                aria-controls={null}
-                aria-expanded={false}
-                aria-haspopup={true}
-                className=
-                    ms-Button
-                    ms-Button--icon
-                    ms-Button--hasMenu
-                    ms-Breadcrumb-overflowButton
+                </span>
+                <i
+                  aria-hidden="true"
+                  class=
+                      ms-Breadcrumb-chevron
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #605e5c;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: normal;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: WindowText;
+                        forced-color-adjust: none;
+                      }
+                      @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"
+                >
+                  
+                </i>
+              </li>
+              <li
+                class=
+                    ms-Breadcrumb-overflow
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      background-color: transparent;
-                      border-radius: 2px;
-                      border: none;
-                      box-sizing: border-box;
-                      color: #605e5c;
-                      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;
-                      white-space: nowrap;
-                      width: auto;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                    .ms-Fabric--isFocusVisible &:focus:after {
-                      border: 1px solid #ffffff;
-                      bottom: 1px;
-                      content: "";
-                      left: 1px;
-                      outline: 1px solid #605e5c;
-                      position: absolute;
-                      right: 1px;
-                      top: 1px;
-                      z-index: 1;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                      bottom: -2px;
-                      left: -2px;
-                      outline-color: ButtonText;
-                      right: -2px;
-                      top: -2px;
-                    }
-                    &:active > * {
-                      left: 0px;
+                      align-items: center;
+                      display: flex;
                       position: relative;
-                      top: 0px;
-                    }
-                    &:hover {
-                      background-color: #f3f2f1;
-                      color: #323130;
-                      cursor: pointer;
-                      text-decoration: none;
                     }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
-                      background-color: transparent;
-                      border-color: Highlight;
-                      color: Highlight;
-                    }
-                    &:active {
-                      background-color: #edebe9;
-                      color: #323130;
-                      text-decoration: none;
-                    }
-                    &:active:hover {
-                      background-color: #edebe9;
-                      color: #323130;
-                      text-decoration: none;
-                    }
-                    @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: 16px;
-                    }
-                data-is-focusable={true}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyPress={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                role="button"
-                type="button"
               >
-                <span
-                  className=
-                      ms-Button-flexContainer
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class=
+                      ms-Button
+                      ms-Button--icon
+                      ms-Button--hasMenu
+                      ms-Breadcrumb-overflowButton
                       {
-                        align-items: center;
-                        display: flex;
-                        flex-wrap: nowrap;
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        background-color: transparent;
+                        border-radius: 2px;
+                        border: none;
+                        box-sizing: border-box;
+                        color: #605e5c;
+                        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%;
-                        justify-content: center;
+                        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;
+                        white-space: nowrap;
+                        width: auto;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid #ffffff;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        bottom: -2px;
+                        left: -2px;
+                        outline-color: ButtonText;
+                        right: -2px;
+                        top: -2px;
+                      }
+                      &:active > * {
+                        left: 0px;
+                        position: relative;
+                        top: 0px;
+                      }
+                      &:hover {
+                        background-color: #f3f2f1;
+                        color: #323130;
+                        cursor: pointer;
+                        text-decoration: none;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
+                        background-color: transparent;
+                        border-color: Highlight;
+                        color: Highlight;
+                      }
+                      &:active {
+                        background-color: #edebe9;
+                        color: #323130;
+                        text-decoration: none;
                       }
-                  data-automationid="splitbuttonprimary"
+                      &:active:hover {
+                        background-color: #edebe9;
+                        color: #323130;
+                        text-decoration: none;
+                      }
+                      @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: 16px;
+                      }
+                  data-is-focusable="true"
+                  role="button"
+                  tabindex="0"
+                  type="button"
                 >
-                  <i
-                    aria-hidden={true}
-                    className=
-                        ms-Icon
-                        ms-Button-icon
-                        {
-                          display: inline-block;
-                        }
-                        {
-                          -moz-osx-font-smoothing: grayscale;
-                          -webkit-font-smoothing: antialiased;
-                          font-family: "FabricMDL2Icons";
-                          font-style: normal;
-                          font-weight: normal;
-                          speak: none;
-                        }
+                  <span
+                    class=
+                        ms-Button-flexContainer
                         {
-                          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;
+                          align-items: center;
+                          display: flex;
+                          flex-wrap: nowrap;
+                          height: 100%;
+                          justify-content: center;
                         }
-                    data-icon-name="More"
-                    style={
-                      Object {
-                        "fontFamily": "\\"FabricMDL2Icons\\"",
-                      }
-                    }
+                    data-automationid="splitbuttonprimary"
                   >
-                    
-                  </i>
-                </span>
-              </button>
-            </li>
-          </ol>
+                    <i
+                      aria-hidden="true"
+                      class=
+                          ms-Icon
+                          ms-Button-icon
+                          {
+                            display: inline-block;
+                          }
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            font-family: "FabricMDL2Icons";
+                            font-style: normal;
+                            font-weight: normal;
+                            speak: none;
+                          }
+                          {
+                            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;
+                          }
+                      data-icon-name="More"
+                      style="font-family: \\"FabricMDL2Icons\\";"
+                    >
+                      
+                    </i>
+                  </span>
+                </button>
+              </li>
+            </ol>
+          </div>
         </div>
       </div>
     </div>
@@ -1680,230 +1448,210 @@ exports[`Breadcrumb rendering renders correctly with maxDisplayedItems and overf
 
 exports[`Breadcrumb rendering renders correctly with maxDisplayedItems and overflowIndex as 0 1`] = `
 <div>
-  <div
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
-  >
+  <div>
     <div
-      data-automation-id="visibleContent"
-      style={
-        Object {
-          "position": "fixed",
-          "visibility": "hidden",
-        }
-      }
+      style="position: relative;"
     >
       <div
-        className=
-            ms-Breadcrumb
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              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;
-              margin-bottom: 1px;
-              margin-left: 0;
-              margin-right: 0;
-              margin-top: 11px;
-            }
-        role="navigation"
+        data-automation-id="visibleContent"
+        style="position: fixed; visibility: hidden;"
       >
         <div
-          className=
-              ms-FocusZone
-              &:focus {
-                outline: none;
+          class=
+              ms-Breadcrumb
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                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;
+                margin-bottom: 1px;
+                margin-left: 0;
+                margin-right: 0;
+                margin-top: 11px;
               }
-          data-focuszone-id="FocusZone0"
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onMouseDownCapture={[Function]}
+          role="navigation"
         >
-          <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;
+          <div
+            class=
+                ms-FocusZone
+                &:focus {
+                  outline: none;
                 }
+            data-focuszone-id="FocusZone0"
           >
-            <li
-              className=
-                  ms-Breadcrumb-overflow
+            <ol
+              class=
+                  ms-Breadcrumb-list
                   {
-                    align-items: center;
+                    align-items: stretch;
                     display: flex;
-                    position: relative;
+                    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;
                   }
             >
-              <button
-                aria-controls={null}
-                aria-expanded={false}
-                aria-haspopup={true}
-                className=
-                    ms-Button
-                    ms-Button--icon
-                    ms-Button--hasMenu
-                    ms-Breadcrumb-overflowButton
+              <li
+                class=
+                    ms-Breadcrumb-overflow
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      background-color: transparent;
-                      border-radius: 2px;
-                      border: none;
-                      box-sizing: border-box;
-                      color: #605e5c;
-                      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;
+                      align-items: center;
+                      display: flex;
                       position: relative;
-                      text-align: center;
-                      text-decoration: none;
-                      text-overflow: ellipsis;
-                      user-select: none;
-                      white-space: nowrap;
-                      width: auto;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                    .ms-Fabric--isFocusVisible &:focus:after {
-                      border: 1px solid #ffffff;
-                      bottom: 1px;
-                      content: "";
-                      left: 1px;
-                      outline: 1px solid #605e5c;
-                      position: absolute;
-                      right: 1px;
-                      top: 1px;
-                      z-index: 1;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                      bottom: -2px;
-                      left: -2px;
-                      outline-color: ButtonText;
-                      right: -2px;
-                      top: -2px;
-                    }
-                    &:active > * {
-                      left: 0px;
-                      position: relative;
-                      top: 0px;
-                    }
-                    &:hover {
-                      background-color: #f3f2f1;
-                      color: #323130;
-                      cursor: pointer;
-                      text-decoration: none;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
-                      background-color: transparent;
-                      border-color: Highlight;
-                      color: Highlight;
                     }
-                    &:active {
-                      background-color: #edebe9;
-                      color: #323130;
-                      text-decoration: none;
-                    }
-                    &:active:hover {
-                      background-color: #edebe9;
-                      color: #323130;
-                      text-decoration: none;
-                    }
-                    @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: 16px;
-                    }
-                data-is-focusable={true}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyPress={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                role="button"
-                type="button"
               >
-                <span
-                  className=
-                      ms-Button-flexContainer
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class=
+                      ms-Button
+                      ms-Button--icon
+                      ms-Button--hasMenu
+                      ms-Breadcrumb-overflowButton
                       {
-                        align-items: center;
-                        display: flex;
-                        flex-wrap: nowrap;
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        background-color: transparent;
+                        border-radius: 2px;
+                        border: none;
+                        box-sizing: border-box;
+                        color: #605e5c;
+                        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%;
-                        justify-content: center;
+                        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;
+                        white-space: nowrap;
+                        width: auto;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid #ffffff;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        bottom: -2px;
+                        left: -2px;
+                        outline-color: ButtonText;
+                        right: -2px;
+                        top: -2px;
+                      }
+                      &:active > * {
+                        left: 0px;
+                        position: relative;
+                        top: 0px;
                       }
-                  data-automationid="splitbuttonprimary"
+                      &:hover {
+                        background-color: #f3f2f1;
+                        color: #323130;
+                        cursor: pointer;
+                        text-decoration: none;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
+                        background-color: transparent;
+                        border-color: Highlight;
+                        color: Highlight;
+                      }
+                      &:active {
+                        background-color: #edebe9;
+                        color: #323130;
+                        text-decoration: none;
+                      }
+                      &:active:hover {
+                        background-color: #edebe9;
+                        color: #323130;
+                        text-decoration: none;
+                      }
+                      @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: 16px;
+                      }
+                  data-is-focusable="true"
+                  role="button"
+                  tabindex="0"
+                  type="button"
                 >
-                  <i
-                    aria-hidden={true}
-                    className=
-                        ms-Icon
-                        ms-Button-icon
-                        {
-                          display: inline-block;
-                        }
+                  <span
+                    class=
+                        ms-Button-flexContainer
                         {
-                          -moz-osx-font-smoothing: grayscale;
-                          -webkit-font-smoothing: antialiased;
-                          font-family: "FabricMDL2Icons";
-                          font-style: normal;
-                          font-weight: normal;
-                          speak: none;
+                          align-items: center;
+                          display: flex;
+                          flex-wrap: nowrap;
+                          height: 100%;
+                          justify-content: center;
                         }
-                        {
-                          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;
-                        }
-                    data-icon-name="More"
-                    style={
-                      Object {
-                        "fontFamily": "\\"FabricMDL2Icons\\"",
-                      }
-                    }
+                    data-automationid="splitbuttonprimary"
                   >
-                    
-                  </i>
-                </span>
-              </button>
-            </li>
-          </ol>
+                    <i
+                      aria-hidden="true"
+                      class=
+                          ms-Icon
+                          ms-Button-icon
+                          {
+                            display: inline-block;
+                          }
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            font-family: "FabricMDL2Icons";
+                            font-style: normal;
+                            font-weight: normal;
+                            speak: none;
+                          }
+                          {
+                            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;
+                          }
+                      data-icon-name="More"
+                      style="font-family: \\"FabricMDL2Icons\\";"
+                    >
+                      
+                    </i>
+                  </span>
+                </button>
+              </li>
+            </ol>
+          </div>
         </div>
       </div>
     </div>
@@ -1913,454 +1661,402 @@ exports[`Breadcrumb rendering renders correctly with maxDisplayedItems and overf
 
 exports[`Breadcrumb rendering renders correctly with overflow 1`] = `
 <div>
-  <div
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
-  >
+  <div>
     <div
-      data-automation-id="visibleContent"
-      style={
-        Object {
-          "position": "fixed",
-          "visibility": "hidden",
-        }
-      }
+      style="position: relative;"
     >
       <div
-        className=
-            ms-Breadcrumb
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              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;
-              margin-bottom: 1px;
-              margin-left: 0;
-              margin-right: 0;
-              margin-top: 11px;
-            }
-        role="navigation"
+        data-automation-id="visibleContent"
+        style="position: fixed; visibility: hidden;"
       >
         <div
-          className=
-              ms-FocusZone
-              &:focus {
-                outline: none;
+          class=
+              ms-Breadcrumb
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                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;
+                margin-bottom: 1px;
+                margin-left: 0;
+                margin-right: 0;
+                margin-top: 11px;
               }
-          data-focuszone-id="FocusZone0"
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onMouseDownCapture={[Function]}
+          role="navigation"
         >
-          <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;
+          <div
+            class=
+                ms-FocusZone
+                &:focus {
+                  outline: none;
                 }
+            data-focuszone-id="FocusZone0"
           >
-            <li
-              className=
-                  ms-Breadcrumb-overflow
+            <ol
+              class=
+                  ms-Breadcrumb-list
                   {
-                    align-items: center;
+                    align-items: stretch;
                     display: flex;
-                    position: relative;
+                    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;
                   }
             >
-              <button
-                aria-controls={null}
-                aria-expanded={false}
-                aria-haspopup={true}
-                className=
-                    ms-Button
-                    ms-Button--icon
-                    ms-Button--hasMenu
-                    ms-Breadcrumb-overflowButton
+              <li
+                class=
+                    ms-Breadcrumb-overflow
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      background-color: transparent;
-                      border-radius: 2px;
-                      border: none;
-                      box-sizing: border-box;
-                      color: #605e5c;
-                      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;
-                      white-space: nowrap;
-                      width: auto;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                    .ms-Fabric--isFocusVisible &:focus:after {
-                      border: 1px solid #ffffff;
-                      bottom: 1px;
-                      content: "";
-                      left: 1px;
-                      outline: 1px solid #605e5c;
-                      position: absolute;
-                      right: 1px;
-                      top: 1px;
-                      z-index: 1;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                      bottom: -2px;
-                      left: -2px;
-                      outline-color: ButtonText;
-                      right: -2px;
-                      top: -2px;
-                    }
-                    &:active > * {
-                      left: 0px;
+                      align-items: center;
+                      display: flex;
                       position: relative;
-                      top: 0px;
                     }
-                    &:hover {
-                      background-color: #f3f2f1;
-                      color: #323130;
-                      cursor: pointer;
-                      text-decoration: none;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
-                      background-color: transparent;
-                      border-color: Highlight;
-                      color: Highlight;
-                    }
-                    &:active {
-                      background-color: #edebe9;
-                      color: #323130;
-                      text-decoration: none;
-                    }
-                    &:active:hover {
-                      background-color: #edebe9;
-                      color: #323130;
-                      text-decoration: none;
-                    }
-                    @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: 16px;
-                    }
-                data-is-focusable={true}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyPress={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                role="button"
-                type="button"
               >
-                <span
-                  className=
-                      ms-Button-flexContainer
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class=
+                      ms-Button
+                      ms-Button--icon
+                      ms-Button--hasMenu
+                      ms-Breadcrumb-overflowButton
                       {
-                        align-items: center;
-                        display: flex;
-                        flex-wrap: nowrap;
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        background-color: transparent;
+                        border-radius: 2px;
+                        border: none;
+                        box-sizing: border-box;
+                        color: #605e5c;
+                        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%;
-                        justify-content: center;
+                        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;
+                        white-space: nowrap;
+                        width: auto;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
                       }
-                  data-automationid="splitbuttonprimary"
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid #ffffff;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        bottom: -2px;
+                        left: -2px;
+                        outline-color: ButtonText;
+                        right: -2px;
+                        top: -2px;
+                      }
+                      &:active > * {
+                        left: 0px;
+                        position: relative;
+                        top: 0px;
+                      }
+                      &:hover {
+                        background-color: #f3f2f1;
+                        color: #323130;
+                        cursor: pointer;
+                        text-decoration: none;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
+                        background-color: transparent;
+                        border-color: Highlight;
+                        color: Highlight;
+                      }
+                      &:active {
+                        background-color: #edebe9;
+                        color: #323130;
+                        text-decoration: none;
+                      }
+                      &:active:hover {
+                        background-color: #edebe9;
+                        color: #323130;
+                        text-decoration: none;
+                      }
+                      @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: 16px;
+                      }
+                  data-is-focusable="true"
+                  role="button"
+                  tabindex="0"
+                  type="button"
                 >
-                  <i
-                    aria-hidden={true}
-                    className=
-                        ms-Icon
-                        ms-Button-icon
-                        {
-                          display: inline-block;
-                        }
-                        {
-                          -moz-osx-font-smoothing: grayscale;
-                          -webkit-font-smoothing: antialiased;
-                          font-family: "FabricMDL2Icons";
-                          font-style: normal;
-                          font-weight: normal;
-                          speak: none;
-                        }
+                  <span
+                    class=
+                        ms-Button-flexContainer
                         {
-                          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;
+                          align-items: center;
+                          display: flex;
+                          flex-wrap: nowrap;
+                          height: 100%;
+                          justify-content: center;
                         }
-                    data-icon-name="More"
-                    style={
-                      Object {
-                        "fontFamily": "\\"FabricMDL2Icons\\"",
-                      }
-                    }
+                    data-automationid="splitbuttonprimary"
                   >
-                    
-                  </i>
-                </span>
-              </button>
-              <i
-                aria-hidden={true}
-                className=
-                    ms-Breadcrumb-chevron
-                    {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #605e5c;
-                      display: inline-block;
-                      font-family: "FabricMDL2Icons";
-                      font-size: 12px;
-                      font-style: normal;
-                      font-weight: normal;
-                      speak: none;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                      -ms-high-contrast-adjust: none;
-                      color: WindowText;
-                      forced-color-adjust: none;
-                    }
-                    @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"
-              >
-                
-              </i>
-            </li>
-            <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;
-                  }
-                  &:last-child .ms-Breadcrumb-itemLink {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
-                    -ms-high-contrast-adjust: auto;
-                    forced-color-adjust: auto;
-                  }
-                  &:last-child .ms-Breadcrumb-item {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-            >
-              <span
-                className=
-                    ms-Breadcrumb-item
+                    <i
+                      aria-hidden="true"
+                      class=
+                          ms-Icon
+                          ms-Button-icon
+                          {
+                            display: inline-block;
+                          }
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            font-family: "FabricMDL2Icons";
+                            font-style: normal;
+                            font-weight: normal;
+                            speak: none;
+                          }
+                          {
+                            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;
+                          }
+                      data-icon-name="More"
+                      style="font-family: \\"FabricMDL2Icons\\";"
+                    >
+                      
+                    </i>
+                  </span>
+                </button>
+                <i
+                  aria-hidden="true"
+                  class=
+                      ms-Breadcrumb-chevron
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #605e5c;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: normal;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: WindowText;
+                        forced-color-adjust: none;
+                      }
+                      @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"
+                >
+                  
+                </i>
+              </li>
+              <li
+                class=
+                    ms-Breadcrumb-listItem
                     {
-                      color: #605e5c;
-                      font-size: 18px;
-                      font-weight: 400;
-                      line-height: 36px;
+                      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: 8px;
-                      padding-right: 8px;
+                      padding-left: 0;
+                      padding-right: 0;
                       padding-top: 0;
+                      position: relative;
+                    }
+                    &:last-child .ms-Breadcrumb-itemLink {
+                      color: #323130;
+                      font-weight: 600;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
+                      -ms-high-contrast-adjust: auto;
+                      forced-color-adjust: auto;
                     }
-                    &:hover {
-                      cursor: default;
+                    &:last-child .ms-Breadcrumb-item {
+                      color: #323130;
+                      font-weight: 600;
                     }
               >
-                <div
-                  className=
-                      ms-TooltipHost
+                <span
+                  class=
+                      ms-Breadcrumb-item
                       {
-                        display: inline;
-                      }
-                  onBlurCapture={[Function]}
-                  onFocusCapture={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  role="none"
+                        color: #605e5c;
+                        font-size: 18px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        padding-bottom: 0;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 0;
+                      }
+                      &:hover {
+                        cursor: default;
+                      }
                 >
-                  TestText3
                   <div
-                    hidden={true}
-                    id="tooltip4"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
+                    class=
+                        ms-TooltipHost
+                        {
+                          display: inline;
+                        }
+                    role="none"
                   >
                     TestText3
+                    <div
+                      hidden=""
+                      id="tooltip4"
+                      style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;"
+                    >
+                      TestText3
+                    </div>
                   </div>
-                </div>
-              </span>
-              <i
-                aria-hidden={true}
-                className=
-                    ms-Breadcrumb-chevron
-                    {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #605e5c;
-                      display: inline-block;
-                      font-family: "FabricMDL2Icons";
-                      font-size: 12px;
-                      font-style: normal;
-                      font-weight: normal;
-                      speak: none;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                      -ms-high-contrast-adjust: none;
-                      color: WindowText;
-                      forced-color-adjust: none;
-                    }
-                    @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"
-              >
-                
-              </i>
-            </li>
-            <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;
-                  }
-                  &:last-child .ms-Breadcrumb-itemLink {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
-                    -ms-high-contrast-adjust: auto;
-                    forced-color-adjust: auto;
-                  }
-                  &:last-child .ms-Breadcrumb-item {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-            >
-              <span
-                className=
-                    ms-Breadcrumb-item
+                </span>
+                <i
+                  aria-hidden="true"
+                  class=
+                      ms-Breadcrumb-chevron
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #605e5c;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: normal;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: WindowText;
+                        forced-color-adjust: none;
+                      }
+                      @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"
+                >
+                  
+                </i>
+              </li>
+              <li
+                class=
+                    ms-Breadcrumb-listItem
                     {
-                      color: #605e5c;
-                      font-size: 18px;
-                      font-weight: 400;
-                      line-height: 36px;
+                      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: 8px;
-                      padding-right: 8px;
+                      padding-left: 0;
+                      padding-right: 0;
                       padding-top: 0;
+                      position: relative;
+                    }
+                    &:last-child .ms-Breadcrumb-itemLink {
+                      color: #323130;
+                      font-weight: 600;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
+                      -ms-high-contrast-adjust: auto;
+                      forced-color-adjust: auto;
                     }
-                    &:hover {
-                      cursor: default;
+                    &:last-child .ms-Breadcrumb-item {
+                      color: #323130;
+                      font-weight: 600;
                     }
               >
-                <div
-                  className=
-                      ms-TooltipHost
+                <span
+                  class=
+                      ms-Breadcrumb-item
                       {
-                        display: inline;
-                      }
-                  onBlurCapture={[Function]}
-                  onFocusCapture={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  role="none"
+                        color: #605e5c;
+                        font-size: 18px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        padding-bottom: 0;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 0;
+                      }
+                      &:hover {
+                        cursor: default;
+                      }
                 >
-                  TestText4
                   <div
-                    hidden={true}
-                    id="tooltip5"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
+                    class=
+                        ms-TooltipHost
+                        {
+                          display: inline;
+                        }
+                    role="none"
                   >
                     TestText4
+                    <div
+                      hidden=""
+                      id="tooltip5"
+                      style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;"
+                    >
+                      TestText4
+                    </div>
                   </div>
-                </div>
-              </span>
-            </li>
-          </ol>
+                </span>
+              </li>
+            </ol>
+          </div>
         </div>
       </div>
     </div>
@@ -2370,454 +2066,402 @@ exports[`Breadcrumb rendering renders correctly with overflow 1`] = `
 
 exports[`Breadcrumb rendering renders correctly with overflow and overflowIndex 1`] = `
 <div>
-  <div
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
-  >
+  <div>
     <div
-      data-automation-id="visibleContent"
-      style={
-        Object {
-          "position": "fixed",
-          "visibility": "hidden",
-        }
-      }
+      style="position: relative;"
     >
       <div
-        className=
-            ms-Breadcrumb
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              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;
-              margin-bottom: 1px;
-              margin-left: 0;
-              margin-right: 0;
-              margin-top: 11px;
-            }
-        role="navigation"
+        data-automation-id="visibleContent"
+        style="position: fixed; visibility: hidden;"
       >
         <div
-          className=
-              ms-FocusZone
-              &:focus {
-                outline: none;
+          class=
+              ms-Breadcrumb
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                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;
+                margin-bottom: 1px;
+                margin-left: 0;
+                margin-right: 0;
+                margin-top: 11px;
               }
-          data-focuszone-id="FocusZone0"
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onMouseDownCapture={[Function]}
+          role="navigation"
         >
-          <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;
+          <div
+            class=
+                ms-FocusZone
+                &:focus {
+                  outline: none;
                 }
+            data-focuszone-id="FocusZone0"
           >
-            <li
-              className=
-                  ms-Breadcrumb-listItem
+            <ol
+              class=
+                  ms-Breadcrumb-list
                   {
-                    align-items: center;
+                    align-items: stretch;
                     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;
-                  }
-                  &:last-child .ms-Breadcrumb-itemLink {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
-                    -ms-high-contrast-adjust: auto;
-                    forced-color-adjust: auto;
-                  }
-                  &:last-child .ms-Breadcrumb-item {
-                    color: #323130;
-                    font-weight: 600;
+                    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;
                   }
             >
-              <span
-                className=
-                    ms-Breadcrumb-item
+              <li
+                class=
+                    ms-Breadcrumb-listItem
                     {
-                      color: #605e5c;
-                      font-size: 18px;
-                      font-weight: 400;
-                      line-height: 36px;
+                      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: 8px;
-                      padding-right: 8px;
+                      padding-left: 0;
+                      padding-right: 0;
                       padding-top: 0;
+                      position: relative;
+                    }
+                    &:last-child .ms-Breadcrumb-itemLink {
+                      color: #323130;
+                      font-weight: 600;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
+                      -ms-high-contrast-adjust: auto;
+                      forced-color-adjust: auto;
                     }
-                    &:hover {
-                      cursor: default;
+                    &:last-child .ms-Breadcrumb-item {
+                      color: #323130;
+                      font-weight: 600;
                     }
               >
-                <div
-                  className=
-                      ms-TooltipHost
+                <span
+                  class=
+                      ms-Breadcrumb-item
                       {
-                        display: inline;
-                      }
-                  onBlurCapture={[Function]}
-                  onFocusCapture={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  role="none"
+                        color: #605e5c;
+                        font-size: 18px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        padding-bottom: 0;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 0;
+                      }
+                      &:hover {
+                        cursor: default;
+                      }
                 >
-                  TestText1
                   <div
-                    hidden={true}
-                    id="tooltip1"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
+                    class=
+                        ms-TooltipHost
+                        {
+                          display: inline;
+                        }
+                    role="none"
                   >
                     TestText1
+                    <div
+                      hidden=""
+                      id="tooltip1"
+                      style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;"
+                    >
+                      TestText1
+                    </div>
                   </div>
-                </div>
-              </span>
-              <i
-                aria-hidden={true}
-                className=
-                    ms-Breadcrumb-chevron
-                    {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #605e5c;
-                      display: inline-block;
-                      font-family: "FabricMDL2Icons";
-                      font-size: 12px;
-                      font-style: normal;
-                      font-weight: normal;
-                      speak: none;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                      -ms-high-contrast-adjust: none;
-                      color: WindowText;
-                      forced-color-adjust: none;
-                    }
-                    @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"
-              >
-                
-              </i>
-            </li>
-            <li
-              className=
-                  ms-Breadcrumb-overflow
-                  {
-                    align-items: center;
-                    display: flex;
-                    position: relative;
-                  }
-            >
-              <button
-                aria-controls={null}
-                aria-expanded={false}
-                aria-haspopup={true}
-                className=
-                    ms-Button
-                    ms-Button--icon
-                    ms-Button--hasMenu
-                    ms-Breadcrumb-overflowButton
+                </span>
+                <i
+                  aria-hidden="true"
+                  class=
+                      ms-Breadcrumb-chevron
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #605e5c;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: normal;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: WindowText;
+                        forced-color-adjust: none;
+                      }
+                      @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"
+                >
+                  
+                </i>
+              </li>
+              <li
+                class=
+                    ms-Breadcrumb-overflow
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      background-color: transparent;
-                      border-radius: 2px;
-                      border: none;
-                      box-sizing: border-box;
-                      color: #605e5c;
-                      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;
-                      white-space: nowrap;
-                      width: auto;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                    .ms-Fabric--isFocusVisible &:focus:after {
-                      border: 1px solid #ffffff;
-                      bottom: 1px;
-                      content: "";
-                      left: 1px;
-                      outline: 1px solid #605e5c;
-                      position: absolute;
-                      right: 1px;
-                      top: 1px;
-                      z-index: 1;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                      bottom: -2px;
-                      left: -2px;
-                      outline-color: ButtonText;
-                      right: -2px;
-                      top: -2px;
-                    }
-                    &:active > * {
-                      left: 0px;
+                      align-items: center;
+                      display: flex;
                       position: relative;
-                      top: 0px;
                     }
-                    &:hover {
-                      background-color: #f3f2f1;
-                      color: #323130;
-                      cursor: pointer;
-                      text-decoration: none;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
-                      background-color: transparent;
-                      border-color: Highlight;
-                      color: Highlight;
-                    }
-                    &:active {
-                      background-color: #edebe9;
-                      color: #323130;
-                      text-decoration: none;
-                    }
-                    &:active:hover {
-                      background-color: #edebe9;
-                      color: #323130;
-                      text-decoration: none;
-                    }
-                    @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: 16px;
-                    }
-                data-is-focusable={true}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyPress={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                role="button"
-                type="button"
               >
-                <span
-                  className=
-                      ms-Button-flexContainer
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class=
+                      ms-Button
+                      ms-Button--icon
+                      ms-Button--hasMenu
+                      ms-Breadcrumb-overflowButton
                       {
-                        align-items: center;
-                        display: flex;
-                        flex-wrap: nowrap;
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        background-color: transparent;
+                        border-radius: 2px;
+                        border: none;
+                        box-sizing: border-box;
+                        color: #605e5c;
+                        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%;
-                        justify-content: center;
+                        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;
+                        white-space: nowrap;
+                        width: auto;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
                       }
-                  data-automationid="splitbuttonprimary"
+                      .ms-Fabric--isFocusVisible &:focus:after {
+                        border: 1px solid #ffffff;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        outline: 1px solid #605e5c;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                        z-index: 1;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                        bottom: -2px;
+                        left: -2px;
+                        outline-color: ButtonText;
+                        right: -2px;
+                        top: -2px;
+                      }
+                      &:active > * {
+                        left: 0px;
+                        position: relative;
+                        top: 0px;
+                      }
+                      &:hover {
+                        background-color: #f3f2f1;
+                        color: #323130;
+                        cursor: pointer;
+                        text-decoration: none;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
+                        background-color: transparent;
+                        border-color: Highlight;
+                        color: Highlight;
+                      }
+                      &:active {
+                        background-color: #edebe9;
+                        color: #323130;
+                        text-decoration: none;
+                      }
+                      &:active:hover {
+                        background-color: #edebe9;
+                        color: #323130;
+                        text-decoration: none;
+                      }
+                      @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: 16px;
+                      }
+                  data-is-focusable="true"
+                  role="button"
+                  tabindex="0"
+                  type="button"
                 >
-                  <i
-                    aria-hidden={true}
-                    className=
-                        ms-Icon
-                        ms-Button-icon
-                        {
-                          display: inline-block;
-                        }
-                        {
-                          -moz-osx-font-smoothing: grayscale;
-                          -webkit-font-smoothing: antialiased;
-                          font-family: "FabricMDL2Icons";
-                          font-style: normal;
-                          font-weight: normal;
-                          speak: none;
-                        }
+                  <span
+                    class=
+                        ms-Button-flexContainer
                         {
-                          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;
+                          align-items: center;
+                          display: flex;
+                          flex-wrap: nowrap;
+                          height: 100%;
+                          justify-content: center;
                         }
-                    data-icon-name="More"
-                    style={
-                      Object {
-                        "fontFamily": "\\"FabricMDL2Icons\\"",
-                      }
-                    }
+                    data-automationid="splitbuttonprimary"
                   >
-                    
-                  </i>
-                </span>
-              </button>
-              <i
-                aria-hidden={true}
-                className=
-                    ms-Breadcrumb-chevron
-                    {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #605e5c;
-                      display: inline-block;
-                      font-family: "FabricMDL2Icons";
-                      font-size: 12px;
-                      font-style: normal;
-                      font-weight: normal;
-                      speak: none;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-                      -ms-high-contrast-adjust: none;
-                      color: WindowText;
-                      forced-color-adjust: none;
-                    }
-                    @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"
-              >
-                
-              </i>
-            </li>
-            <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;
-                  }
-                  &:last-child .ms-Breadcrumb-itemLink {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-                  @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
-                    -ms-high-contrast-adjust: auto;
-                    forced-color-adjust: auto;
-                  }
-                  &:last-child .ms-Breadcrumb-item {
-                    color: #323130;
-                    font-weight: 600;
-                  }
-            >
-              <span
-                className=
-                    ms-Breadcrumb-item
+                    <i
+                      aria-hidden="true"
+                      class=
+                          ms-Icon
+                          ms-Button-icon
+                          {
+                            display: inline-block;
+                          }
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            font-family: "FabricMDL2Icons";
+                            font-style: normal;
+                            font-weight: normal;
+                            speak: none;
+                          }
+                          {
+                            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;
+                          }
+                      data-icon-name="More"
+                      style="font-family: \\"FabricMDL2Icons\\";"
+                    >
+                      
+                    </i>
+                  </span>
+                </button>
+                <i
+                  aria-hidden="true"
+                  class=
+                      ms-Breadcrumb-chevron
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #605e5c;
+                        display: inline-block;
+                        font-family: "FabricMDL2Icons";
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: normal;
+                        speak: none;
+                      }
+                      @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                        -ms-high-contrast-adjust: none;
+                        color: WindowText;
+                        forced-color-adjust: none;
+                      }
+                      @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"
+                >
+                  
+                </i>
+              </li>
+              <li
+                class=
+                    ms-Breadcrumb-listItem
                     {
-                      color: #605e5c;
-                      font-size: 18px;
-                      font-weight: 400;
-                      line-height: 36px;
+                      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: 8px;
-                      padding-right: 8px;
+                      padding-left: 0;
+                      padding-right: 0;
                       padding-top: 0;
+                      position: relative;
                     }
-                    &:hover {
-                      cursor: default;
+                    &:last-child .ms-Breadcrumb-itemLink {
+                      color: #323130;
+                      font-weight: 600;
+                    }
+                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:last-child .ms-Breadcrumb-itemLink {
+                      -ms-high-contrast-adjust: auto;
+                      forced-color-adjust: auto;
+                    }
+                    &:last-child .ms-Breadcrumb-item {
+                      color: #323130;
+                      font-weight: 600;
                     }
               >
-                <div
-                  className=
-                      ms-TooltipHost
+                <span
+                  class=
+                      ms-Breadcrumb-item
                       {
-                        display: inline;
-                      }
-                  onBlurCapture={[Function]}
-                  onFocusCapture={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  role="none"
+                        color: #605e5c;
+                        font-size: 18px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        padding-bottom: 0;
+                        padding-left: 8px;
+                        padding-right: 8px;
+                        padding-top: 0;
+                      }
+                      &:hover {
+                        cursor: default;
+                      }
                 >
-                  TestText4
                   <div
-                    hidden={true}
-                    id="tooltip5"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
+                    class=
+                        ms-TooltipHost
+                        {
+                          display: inline;
+                        }
+                    role="none"
                   >
                     TestText4
+                    <div
+                      hidden=""
+                      id="tooltip5"
+                      style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;"
+                    >
+                      TestText4
+                    </div>
                   </div>
-                </div>
-              </span>
-            </li>
-          </ol>
+                </span>
+              </li>
+            </ol>
+          </div>
         </div>
       </div>
     </div>
@@ -2827,66 +2471,56 @@ exports[`Breadcrumb rendering renders correctly with overflow and overflowIndex
 
 exports[`Breadcrumb renders empty breadcrumb 1`] = `
 <div>
-  <div
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
-  >
+  <div>
     <div
-      data-automation-id="visibleContent"
-      style={
-        Object {
-          "position": "fixed",
-          "visibility": "hidden",
-        }
-      }
+      style="position: relative;"
     >
       <div
-        className=
-            ms-Breadcrumb
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              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;
-              margin-bottom: 1px;
-              margin-left: 0;
-              margin-right: 0;
-              margin-top: 11px;
-            }
-        role="navigation"
+        data-automation-id="visibleContent"
+        style="position: fixed; visibility: hidden;"
       >
         <div
-          className=
-              ms-FocusZone
-              &:focus {
-                outline: none;
+          class=
+              ms-Breadcrumb
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                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;
+                margin-bottom: 1px;
+                margin-left: 0;
+                margin-right: 0;
+                margin-top: 11px;
               }
-          data-focuszone-id="FocusZone0"
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onMouseDownCapture={[Function]}
+          role="navigation"
         >
-          <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;
+          <div
+            class=
+                ms-FocusZone
+                &:focus {
+                  outline: none;
                 }
-          />
+            data-focuszone-id="FocusZone0"
+          >
+            <ol
+              class=
+                  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;
+                  }
+            />
+          </div>
         </div>
       </div>
     </div>