diff --git a/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md b/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md
index 2f0e15617a916..ef381920ba41a 100644
--- a/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md
+++ b/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md
@@ -17,12 +17,48 @@ export const Breadcrumb: ForwardRefComponent<BreadcrumbProps>;
 // @public (undocumented)
 export const breadcrumbClassNames: SlotClassNames<BreadcrumbSlots>;
 
+// @public
+export const BreadcrumbDivider: ForwardRefComponent<BreadcrumbDividerProps>;
+
+// @public (undocumented)
+export const breadcrumbDividerClassNames: SlotClassNames<BreadcrumbDividerSlots>;
+
+// @public
+export type BreadcrumbDividerProps = ComponentProps<BreadcrumbDividerSlots> & {};
+
+// @public (undocumented)
+export type BreadcrumbDividerSlots = {
+    root: Slot<'span'>;
+};
+
+// @public
+export type BreadcrumbDividerState = ComponentState<BreadcrumbDividerSlots>;
+
+// @public
+export const BreadcrumbItem: ForwardRefComponent<BreadcrumbItemProps>;
+
+// @public (undocumented)
+export const breadcrumbItemClassNames: SlotClassNames<BreadcrumbItemSlots>;
+
+// @public
+export type BreadcrumbItemProps = ComponentProps<BreadcrumbItemSlots> & {};
+
+// @public (undocumented)
+export type BreadcrumbItemSlots = {
+    root: Slot<'div'>;
+    divider?: Slot<typeof BreadcrumbDivider>;
+};
+
+// @public
+export type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots>;
+
 // @public
 export type BreadcrumbProps = ComponentProps<BreadcrumbSlots> & {};
 
 // @public (undocumented)
 export type BreadcrumbSlots = {
-    root: Slot<'div'>;
+    root: Slot<'nav'>;
+    list?: Slot<'ol'>;
 };
 
 // @public
@@ -31,9 +67,27 @@ export type BreadcrumbState = ComponentState<BreadcrumbSlots>;
 // @public
 export const renderBreadcrumb_unstable: (state: BreadcrumbState) => JSX.Element;
 
+// @public
+export const renderBreadcrumbDivider_unstable: (state: BreadcrumbDividerState) => JSX.Element;
+
+// @public
+export const renderBreadcrumbItem_unstable: (state: BreadcrumbItemState) => JSX.Element;
+
 // @public
 export const useBreadcrumb_unstable: (props: BreadcrumbProps, ref: React_2.Ref<HTMLElement>) => BreadcrumbState;
 
+// @public
+export const useBreadcrumbDivider_unstable: (props: BreadcrumbDividerProps, ref: React_2.Ref<HTMLElement>) => BreadcrumbDividerState;
+
+// @public
+export const useBreadcrumbDividerStyles_unstable: (state: BreadcrumbDividerState) => BreadcrumbDividerState;
+
+// @public
+export const useBreadcrumbItem_unstable: (props: BreadcrumbItemProps, ref: React_2.Ref<HTMLElement>) => BreadcrumbItemState;
+
+// @public
+export const useBreadcrumbItemStyles_unstable: (state: BreadcrumbItemState) => BreadcrumbItemState;
+
 // @public
 export const useBreadcrumbStyles_unstable: (state: BreadcrumbState) => BreadcrumbState;
 
diff --git a/packages/react-components/react-breadcrumb/package.json b/packages/react-components/react-breadcrumb/package.json
index c035f0825d1e2..cefb9626e25d0 100644
--- a/packages/react-components/react-breadcrumb/package.json
+++ b/packages/react-components/react-breadcrumb/package.json
@@ -32,6 +32,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
+    "@fluentui/react-shared-contexts": "^9.3.0",
     "@fluentui/react-theme": "^9.1.5",
     "@fluentui/react-utilities": "^9.6.1",
     "@griffel/react": "^1.5.2",
diff --git a/packages/react-components/react-breadcrumb/src/BreadcrumbDivider.ts b/packages/react-components/react-breadcrumb/src/BreadcrumbDivider.ts
new file mode 100644
index 0000000000000..b38620b9c532e
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/BreadcrumbDivider.ts
@@ -0,0 +1 @@
+export * from './components/BreadcrumbDivider/index';
diff --git a/packages/react-components/react-breadcrumb/src/BreadcrumbItem.ts b/packages/react-components/react-breadcrumb/src/BreadcrumbItem.ts
new file mode 100644
index 0000000000000..7f84c993cca3c
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/BreadcrumbItem.ts
@@ -0,0 +1 @@
+export * from './components/BreadcrumbItem/index';
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.test.tsx
index fb220afbefc2f..c289c3b517532 100644
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.test.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.test.tsx
@@ -13,6 +13,18 @@ describe('Breadcrumb', () => {
 
   it('renders a default state', () => {
     const result = render(<Breadcrumb>Default Breadcrumb</Breadcrumb>);
-    expect(result.container).toMatchSnapshot();
+    expect(result.container).toMatchInlineSnapshot(`
+      <div>
+        <nav
+          class="fui-Breadcrumb"
+        >
+          <ol
+            class="fui-Breadcrumb__list"
+          >
+            Default Breadcrumb
+          </ol>
+        </nav>
+      </div>
+    `);
   });
 });
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.types.ts b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.types.ts
index 57a88e2d0c396..35ee21e0af27d 100644
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.types.ts
+++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.types.ts
@@ -1,7 +1,8 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
 export type BreadcrumbSlots = {
-  root: Slot<'div'>;
+  root: Slot<'nav'>;
+  list?: Slot<'ol'>;
 };
 
 /**
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
deleted file mode 100644
index a022df483a429..0000000000000
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Breadcrumb renders a default state 1`] = `
-<div>
-  <div
-    class="fui-Breadcrumb"
-  >
-    Default Breadcrumb
-  </div>
-</div>
-`;
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/renderBreadcrumb.tsx b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/renderBreadcrumb.tsx
index 678c109a5d62f..f5e43364cb868 100644
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/renderBreadcrumb.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/renderBreadcrumb.tsx
@@ -1,13 +1,11 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 import type { BreadcrumbState, BreadcrumbSlots } from './Breadcrumb.types';
-
 /**
  * Render the final JSX of Breadcrumb
  */
 export const renderBreadcrumb_unstable = (state: BreadcrumbState) => {
   const { slots, slotProps } = getSlots<BreadcrumbSlots>(state);
-
-  // TODO Add additional slots in the appropriate place
-  return <slots.root {...slotProps.root} />;
+  const { root, list } = slotProps;
+  return <slots.root {...root}>{slots.list && <slots.list {...list}>{root.children}</slots.list>}</slots.root>;
 };
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumb.ts b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumb.ts
index 1cb2f18c44e37..7326d94f1a7b1 100644
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumb.ts
+++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumb.ts
@@ -16,13 +16,15 @@ export const useBreadcrumb_unstable = (props: BreadcrumbProps, ref: React.Ref<HT
     // TODO add appropriate props/defaults
     components: {
       // TODO add each slot's element type or component
-      root: 'div',
+      root: 'nav',
+      list: 'ol',
     },
     // TODO add appropriate slots, for example:
     // mySlot: resolveShorthand(props.mySlot),
-    root: getNativeElementProps('div', {
+    root: getNativeElementProps('nav', {
       ref,
       ...props,
     }),
+    list: {},
   };
 };
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.ts b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.ts
index 826f00b3b0fd2..32fcfd39eac43 100644
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.ts
+++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.ts
@@ -4,8 +4,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 
 export const breadcrumbClassNames: SlotClassNames<BreadcrumbSlots> = {
   root: 'fui-Breadcrumb',
-  // TODO: add class names for all slots on BreadcrumbSlots.
-  // Should be of the form `<slotName>: 'fui-Breadcrumb__<slotName>`
+  list: 'fui-Breadcrumb__list',
 };
 
 /**
@@ -15,8 +14,10 @@ const useStyles = makeStyles({
   root: {
     // TODO Add default styles for the root element
   },
-
-  // TODO add additional classes for different states and/or slots
+  list: {
+    listStyleType: 'none',
+    display: 'flex',
+  },
 });
 
 /**
@@ -25,9 +26,8 @@ const useStyles = makeStyles({
 export const useBreadcrumbStyles_unstable = (state: BreadcrumbState): BreadcrumbState => {
   const styles = useStyles();
   state.root.className = mergeClasses(breadcrumbClassNames.root, styles.root, state.root.className);
-
-  // TODO Add class names to slots, for example:
-  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
-
+  if (state.list) {
+    state.list.className = mergeClasses(breadcrumbClassNames.list, styles.list, state.list.className);
+  }
   return state;
 };
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx
new file mode 100644
index 0000000000000..787a5f6a39f6b
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { BreadcrumbDivider } from './BreadcrumbDivider';
+import { isConformant } from '../../testing/isConformant';
+
+describe('BreadcrumbDivider', () => {
+  isConformant({
+    Component: BreadcrumbDivider,
+    displayName: 'BreadcrumbDivider',
+  });
+
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<BreadcrumbDivider>Default BreadcrumbDivider</BreadcrumbDivider>);
+    expect(result.container).toMatchInlineSnapshot(`
+      <div>
+        <span
+          class="fui-BreadcrumbDivider"
+        >
+          &gt;
+        </span>
+      </div>
+    `);
+  });
+});
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx
new file mode 100644
index 0000000000000..09e558ff9d2c8
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { useBreadcrumbDivider_unstable } from './useBreadcrumbDivider';
+import { renderBreadcrumbDivider_unstable } from './renderBreadcrumbDivider';
+import { useBreadcrumbDividerStyles_unstable } from './useBreadcrumbDividerStyles';
+import type { BreadcrumbDividerProps } from './BreadcrumbDivider.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+
+/**
+ * BreadcrumbDivider component - TODO: add more docs
+ */
+export const BreadcrumbDivider: ForwardRefComponent<BreadcrumbDividerProps> = React.forwardRef((props, ref) => {
+  const state = useBreadcrumbDivider_unstable(props, ref);
+
+  useBreadcrumbDividerStyles_unstable(state);
+
+  const { useTextStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
+
+  return renderBreadcrumbDivider_unstable(state);
+});
+
+BreadcrumbDivider.displayName = 'BreadcrumbDivider';
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.types.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.types.ts
new file mode 100644
index 0000000000000..68d87b360ba03
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.types.ts
@@ -0,0 +1,18 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type BreadcrumbDividerSlots = {
+  root: Slot<'span'>;
+};
+
+/**
+ * BreadcrumbDivider Props
+ */
+export type BreadcrumbDividerProps = ComponentProps<BreadcrumbDividerSlots> & {};
+
+/**
+ * State used in rendering BreadcrumbDivider
+ */
+export type BreadcrumbDividerState = ComponentState<BreadcrumbDividerSlots>;
+// TODO: Remove semicolon from previous line, uncomment next line,
+//and provide union of props to pick from BreadcrumbDividerProps.
+// & Required<Pick<BreadcrumbDividerProps, 'propName'>>
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts
new file mode 100644
index 0000000000000..2718c3f9ddff5
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts
@@ -0,0 +1,5 @@
+export * from './BreadcrumbDivider';
+export * from './BreadcrumbDivider.types';
+export * from './renderBreadcrumbDivider';
+export * from './useBreadcrumbDivider';
+export * from './useBreadcrumbDividerStyles';
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/renderBreadcrumbDivider.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/renderBreadcrumbDivider.tsx
new file mode 100644
index 0000000000000..c92221dcbffde
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/renderBreadcrumbDivider.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import type { BreadcrumbDividerState, BreadcrumbDividerSlots } from './BreadcrumbDivider.types';
+
+/**
+ * Render the final JSX of BreadcrumbDivider
+ */
+export const renderBreadcrumbDivider_unstable = (state: BreadcrumbDividerState) => {
+  const { slots, slotProps } = getSlots<BreadcrumbDividerSlots>(state);
+
+  // TODO Add additional slots in the appropriate place
+  return <slots.root {...slotProps.root}>&gt;</slots.root>;
+};
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDivider.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDivider.ts
new file mode 100644
index 0000000000000..6e96bde13233e
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDivider.ts
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import type { BreadcrumbDividerProps, BreadcrumbDividerState } from './BreadcrumbDivider.types';
+
+/**
+ * Create the state required to render BreadcrumbDivider.
+ *
+ * The returned state can be modified with hooks such as useBreadcrumbDividerStyles_unstable,
+ * before being passed to renderBreadcrumbDivider_unstable.
+ *
+ * @param props - props from this instance of BreadcrumbDivider
+ * @param ref - reference to root HTMLElement of BreadcrumbDivider
+ */
+export const useBreadcrumbDivider_unstable = (
+  props: BreadcrumbDividerProps,
+  ref: React.Ref<HTMLElement>,
+): BreadcrumbDividerState => {
+  return {
+    // TODO add appropriate props/defaults
+    components: {
+      // TODO add each slot's element type or component
+      root: 'span',
+    },
+    // TODO add appropriate slots, for example:
+    // mySlot: resolveShorthand(props.mySlot),
+    root: getNativeElementProps('div', {
+      ref,
+      ...props,
+    }),
+  };
+};
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.ts
new file mode 100644
index 0000000000000..6269d644e10a1
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.ts
@@ -0,0 +1,33 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import type { BreadcrumbDividerSlots, BreadcrumbDividerState } from './BreadcrumbDivider.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+export const breadcrumbDividerClassNames: SlotClassNames<BreadcrumbDividerSlots> = {
+  root: 'fui-BreadcrumbDivider',
+  // TODO: add class names for all slots on BreadcrumbDividerSlots.
+  // Should be of the form `<slotName>: 'fui-BreadcrumbDivider__<slotName>`
+};
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: {
+    // TODO Add default styles for the root element
+  },
+
+  // TODO add additional classes for different states and/or slots
+});
+
+/**
+ * Apply styling to the BreadcrumbDivider slots based on the state
+ */
+export const useBreadcrumbDividerStyles_unstable = (state: BreadcrumbDividerState): BreadcrumbDividerState => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(breadcrumbDividerClassNames.root, styles.root, state.root.className);
+
+  // TODO Add class names to slots, for example:
+  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+
+  return state;
+};
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx
new file mode 100644
index 0000000000000..7e933a6e1cc1d
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { BreadcrumbItem } from './BreadcrumbItem';
+import { isConformant } from '../../testing/isConformant';
+
+describe('BreadcrumbItem', () => {
+  isConformant({
+    Component: BreadcrumbItem,
+    displayName: 'BreadcrumbItem',
+  });
+
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<BreadcrumbItem>Default BreadcrumbItem</BreadcrumbItem>);
+    expect(result.container).toMatchInlineSnapshot(`
+      <div>
+        <div
+          class="fui-BreadcrumbItem"
+        >
+          Default BreadcrumbItem
+          <span
+            class="fui-BreadcrumbDivider fui-BreadcrumbItem__divider"
+          >
+            &gt;
+          </span>
+        </div>
+      </div>
+    `);
+  });
+});
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx
new file mode 100644
index 0000000000000..4ff447e07b3b1
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { useBreadcrumbItem_unstable } from './useBreadcrumbItem';
+import { renderBreadcrumbItem_unstable } from './renderBreadcrumbItem';
+import { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles';
+import type { BreadcrumbItemProps } from './BreadcrumbItem.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+
+/**
+ * BreadcrumbItem component - TODO: add more docs
+ */
+export const BreadcrumbItem: ForwardRefComponent<BreadcrumbItemProps> = React.forwardRef((props, ref) => {
+  const state = useBreadcrumbItem_unstable(props, ref);
+
+  useBreadcrumbItemStyles_unstable(state);
+
+  const { useTextStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
+
+  return renderBreadcrumbItem_unstable(state);
+});
+
+BreadcrumbItem.displayName = 'BreadcrumbItem';
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.types.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.types.ts
new file mode 100644
index 0000000000000..e12f88d6a92ef
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.types.ts
@@ -0,0 +1,20 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { BreadcrumbDivider } from '../BreadcrumbDivider/BreadcrumbDivider';
+
+export type BreadcrumbItemSlots = {
+  root: Slot<'div'>;
+  divider?: Slot<typeof BreadcrumbDivider>;
+};
+
+/**
+ * BreadcrumbItem Props
+ */
+export type BreadcrumbItemProps = ComponentProps<BreadcrumbItemSlots> & {};
+
+/**
+ * State used in rendering BreadcrumbItem
+ */
+export type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots>;
+// TODO: Remove semicolon from previous line, uncomment next line,
+// and provide union of props to pick from BreadcrumbItemProps.
+// & Required<Pick<BreadcrumbItemProps, 'propName'>>
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts
new file mode 100644
index 0000000000000..84e95cdc702d9
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts
@@ -0,0 +1,5 @@
+export * from './BreadcrumbItem';
+export * from './BreadcrumbItem.types';
+export * from './renderBreadcrumbItem';
+export * from './useBreadcrumbItem';
+export * from './useBreadcrumbItemStyles';
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx
new file mode 100644
index 0000000000000..a4d2847550bfd
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import type { BreadcrumbItemState, BreadcrumbItemSlots } from './BreadcrumbItem.types';
+
+/**
+ * Render the final JSX of BreadcrumbItem
+ */
+export const renderBreadcrumbItem_unstable = (state: BreadcrumbItemState) => {
+  const { slots, slotProps } = getSlots<BreadcrumbItemSlots>(state);
+
+  // TODO Add additional slots in the appropriate place
+  return (
+    <slots.root {...slotProps.root}>
+      {slotProps.root.children}
+      {slots.divider && <slots.divider {...slotProps.divider} />}
+    </slots.root>
+  );
+};
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItem.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItem.ts
new file mode 100644
index 0000000000000..8532c56101c77
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItem.ts
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import type { BreadcrumbItemProps, BreadcrumbItemState } from './BreadcrumbItem.types';
+import { BreadcrumbDivider } from '../BreadcrumbDivider/BreadcrumbDivider';
+/**
+ * Create the state required to render BreadcrumbItem.
+ *
+ * The returned state can be modified with hooks such as useBreadcrumbItemStyles_unstable,
+ * before being passed to renderBreadcrumbItem_unstable.
+ *
+ * @param props - props from this instance of BreadcrumbItem
+ * @param ref - reference to root HTMLElement of BreadcrumbItem
+ */
+export const useBreadcrumbItem_unstable = (
+  props: BreadcrumbItemProps,
+  ref: React.Ref<HTMLElement>,
+): BreadcrumbItemState => {
+  return {
+    // TODO add appropriate props/defaults
+    components: {
+      root: 'div',
+      divider: BreadcrumbDivider,
+    },
+    // TODO add appropriate slots, for example:
+    // mySlot: resolveShorthand(props.mySlot),
+    root: getNativeElementProps('div', {
+      ref,
+      ...props,
+    }),
+    divider: {},
+  };
+};
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts
new file mode 100644
index 0000000000000..7765e78992d7b
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts
@@ -0,0 +1,31 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import type { BreadcrumbItemSlots, BreadcrumbItemState } from './BreadcrumbItem.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+export const breadcrumbItemClassNames: SlotClassNames<BreadcrumbItemSlots> = {
+  root: 'fui-BreadcrumbItem',
+  divider: 'fui-BreadcrumbItem__divider',
+};
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+  },
+  divider: {},
+});
+
+/**
+ * Apply styling to the BreadcrumbItem slots based on the state
+ */
+export const useBreadcrumbItemStyles_unstable = (state: BreadcrumbItemState): BreadcrumbItemState => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(breadcrumbItemClassNames.root, styles.root, state.root.className);
+
+  if (state.divider) {
+    state.divider.className = mergeClasses(breadcrumbItemClassNames.divider, styles.divider, state.divider.className);
+  }
+  return state;
+};
diff --git a/packages/react-components/react-breadcrumb/src/index.ts b/packages/react-components/react-breadcrumb/src/index.ts
index 88035245ad307..013807b0d3d32 100644
--- a/packages/react-components/react-breadcrumb/src/index.ts
+++ b/packages/react-components/react-breadcrumb/src/index.ts
@@ -6,3 +6,19 @@ export {
   breadcrumbClassNames,
 } from './Breadcrumb';
 export type { BreadcrumbSlots, BreadcrumbProps, BreadcrumbState } from './Breadcrumb';
+export {
+  BreadcrumbDivider,
+  breadcrumbDividerClassNames,
+  renderBreadcrumbDivider_unstable,
+  useBreadcrumbDividerStyles_unstable,
+  useBreadcrumbDivider_unstable,
+} from './BreadcrumbDivider';
+export type { BreadcrumbDividerProps, BreadcrumbDividerSlots, BreadcrumbDividerState } from './BreadcrumbDivider';
+export {
+  BreadcrumbItem,
+  breadcrumbItemClassNames,
+  renderBreadcrumbItem_unstable,
+  useBreadcrumbItemStyles_unstable,
+  useBreadcrumbItem_unstable,
+} from './BreadcrumbItem';
+export type { BreadcrumbItemProps, BreadcrumbItemSlots, BreadcrumbItemState } from './BreadcrumbItem';
diff --git a/packages/react-components/react-breadcrumb/stories/Breadcrumb/BreadcrumbDefault.stories.tsx b/packages/react-components/react-breadcrumb/stories/Breadcrumb/BreadcrumbDefault.stories.tsx
index f086d005b361d..3e1ea5141a986 100644
--- a/packages/react-components/react-breadcrumb/stories/Breadcrumb/BreadcrumbDefault.stories.tsx
+++ b/packages/react-components/react-breadcrumb/stories/Breadcrumb/BreadcrumbDefault.stories.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
-import { Breadcrumb, BreadcrumbProps } from '@fluentui/react-breadcrumb';
+import { Breadcrumb, BreadcrumbProps, BreadcrumbItem } from '@fluentui/react-breadcrumb';
 
-export const Default = (props: Partial<BreadcrumbProps>) => <Breadcrumb {...props} />;
+export const Default = (props: Partial<BreadcrumbProps>) => (
+  <Breadcrumb {...props}>
+    <BreadcrumbItem>Item 1</BreadcrumbItem>
+    <BreadcrumbItem>Item 2</BreadcrumbItem>
+    <BreadcrumbItem>Item 3</BreadcrumbItem>
+  </Breadcrumb>
+);
diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerBestPractices.md b/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerBestPractices.md
new file mode 100644
index 0000000000000..08ff8ddeeb5f8
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerDefault.stories.tsx b/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerDefault.stories.tsx
new file mode 100644
index 0000000000000..6df2381079d78
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerDefault.stories.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { BreadcrumbDivider, BreadcrumbDividerProps } from '@fluentui/react-breadcrumb';
+
+export const Default = (props: Partial<BreadcrumbDividerProps>) => <BreadcrumbDivider {...props} />;
diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerDescription.md b/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerDescription.md
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/index.stories.tsx b/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/index.stories.tsx
new file mode 100644
index 0000000000000..67639ed3c346e
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/index.stories.tsx
@@ -0,0 +1,18 @@
+import { BreadcrumbDivider } from '@fluentui/react-breadcrumb';
+
+import descriptionMd from './BreadcrumbDividerDescription.md';
+import bestPracticesMd from './BreadcrumbDividerBestPractices.md';
+
+export { Default } from './BreadcrumbDividerDefault.stories';
+
+export default {
+  title: 'Preview Components/BreadcrumbDivider',
+  component: BreadcrumbDivider,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemBestPractices.md b/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemBestPractices.md
new file mode 100644
index 0000000000000..08ff8ddeeb5f8
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDefault.stories.tsx b/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDefault.stories.tsx
new file mode 100644
index 0000000000000..f1fa4b2071927
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDefault.stories.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { BreadcrumbItem, BreadcrumbItemProps } from '@fluentui/react-breadcrumb';
+
+export const Default = (props: Partial<BreadcrumbItemProps>) => <BreadcrumbItem {...props} />;
diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDescription.md b/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDescription.md
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/index.stories.tsx b/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/index.stories.tsx
new file mode 100644
index 0000000000000..a2bb7dce70167
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/index.stories.tsx
@@ -0,0 +1,18 @@
+import { BreadcrumbItem } from '@fluentui/react-breadcrumb';
+
+import descriptionMd from './BreadcrumbItemDescription.md';
+import bestPracticesMd from './BreadcrumbItemBestPractices.md';
+
+export { Default } from './BreadcrumbItemDefault.stories';
+
+export default {
+  title: 'Preview Components/BreadcrumbItem',
+  component: BreadcrumbItem,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};