+
+ {props.showTitle && }
+ {controlToRender}
+
+
+ );
+
+};
diff --git a/samples/react-pages-hierarchy/src/webparts/pagehierarchy/components/Container/IContainerProps.ts b/samples/react-pages-hierarchy/src/webparts/pagehierarchy/components/Container/IContainerProps.ts
new file mode 100644
index 000000000..02e6d2600
--- /dev/null
+++ b/samples/react-pages-hierarchy/src/webparts/pagehierarchy/components/Container/IContainerProps.ts
@@ -0,0 +1,18 @@
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
+import { PagesToDisplay } from '@src/utilities';
+import { DisplayMode } from "@microsoft/sp-core-library";
+
+export interface IContainerProps {
+ currentPageId: number;
+ pagesToDisplay: PagesToDisplay;
+ themeVariant: IReadonlyTheme;
+ domElement: HTMLElement;
+ // all this is just for WebPartTitle control
+ showTitle: boolean;
+ title: string;
+ displayMode: DisplayMode;
+ updateTitle: (value: string) => void;
+ onConfigure: () => void;
+
+ pageEditFinished: boolean;
+}
diff --git a/samples/react-pages-hierarchy/src/webparts/pagehierarchy/components/Container/index.ts b/samples/react-pages-hierarchy/src/webparts/pagehierarchy/components/Container/index.ts
new file mode 100644
index 000000000..6b43f8315
--- /dev/null
+++ b/samples/react-pages-hierarchy/src/webparts/pagehierarchy/components/Container/index.ts
@@ -0,0 +1,2 @@
+export * from './Container';
+export * from './IContainerProps';
diff --git a/samples/react-pages-hierarchy/src/webparts/pagehierarchy/components/Layouts/BreadcrumbLayout.tsx b/samples/react-pages-hierarchy/src/webparts/pagehierarchy/components/Layouts/BreadcrumbLayout.tsx
new file mode 100644
index 000000000..35dfbc9ee
--- /dev/null
+++ b/samples/react-pages-hierarchy/src/webparts/pagehierarchy/components/Layouts/BreadcrumbLayout.tsx
@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { useState } from 'react';
+import styles from './Layouts.module.scss';
+import { RenderDirection, LogHelper } from '@src/utilities';
+import { IPage } from '@src/models/IPage';
+import { ActionButton, Icon } from 'office-ui-fabric-react';
+import { ILayoutProps } from './ILayoutProps';
+import ReactResizeDetector from 'react-resize-detector';
+import * as strings from 'PageHierarchyWebPartStrings';
+
+export const BreadcrumbLayout: React.FunctionComponent