diff --git a/components/doc/breadcrumb/basicdoc.js b/components/doc/breadcrumb/basicdoc.js
index a74f7ddd7b..101919a268 100644
--- a/components/doc/breadcrumb/basicdoc.js
+++ b/components/doc/breadcrumb/basicdoc.js
@@ -2,7 +2,7 @@ import { BreadCrumb } from '../../lib/breadcrumb/BreadCrumb';
 import { DocSectionCode } from '../common/docsectioncode';
 import { DocSectionText } from '../common/docsectiontext';
 
-export function DefaultDoc(props) {
+export function BasicDoc(props) {
     const items = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }];
 
     const home = { icon: 'pi pi-home', url: 'https://www.primefaces.org/primereact/showcase' };
@@ -15,14 +15,8 @@ export function DefaultDoc(props) {
 import React from 'react'; 
 import { BreadCrumb } from 'primereact/breadcrumb';
 
-export default function DefaultDoc() {
-    const items = [
-        {label: 'Computer'},
-        {label: 'Notebook'},
-        {label: 'Accessories'},
-        {label: 'Backpacks'},
-        {label: 'Item'}
-    ];
+export default function BasicDoc() {
+    const items = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }];
 
     const home = { icon: 'pi pi-home', url: 'https://www.primefaces.org/primereact/showcase' }
 
@@ -35,14 +29,8 @@ export default function DefaultDoc() {
 import React from 'react'; 
 import { BreadCrumb } from 'primereact/breadcrumb';
 
-export default function DefaultDoc() {
-    const items = [
-        {label: 'Computer'},
-        {label: 'Notebook'},
-        {label: 'Accessories'},
-        {label: 'Backpacks'},
-        {label: 'Item'}
-    ];
+export default function BasicDoc() {
+    const items = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }];
 
     const home = { icon: 'pi pi-home', url: 'https://www.primefaces.org/primereact/showcase' }
 
diff --git a/components/doc/breadcrumb/templatedoc.js b/components/doc/breadcrumb/templatedoc.js
new file mode 100644
index 0000000000..770566a98c
--- /dev/null
+++ b/components/doc/breadcrumb/templatedoc.js
@@ -0,0 +1,56 @@
+import { BreadCrumb } from '../../lib/breadcrumb/BreadCrumb';
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function TemplateDoc(props) {
+    const items = [{ className: ' pi pi-sitemap' }, { className: 'pi pi-book' }, { className: 'pi pi-wallet' }, { className: 'pi pi-shopping-bag' }, { className: 'pi pi-calculator' }];
+
+    const home = { icon: 'pi pi-home', url: 'https://www.primefaces.org/primereact/showcase' };
+
+    const code = {
+        basic: `
+<BreadCrumb model={items} home={home} />
+        `,
+        javascript: `
+import React from 'react'; 
+import { BreadCrumb } from 'primereact/breadcrumb';
+
+export default function TemplateDoc() {
+    const items = [{ className: ' pi pi-sitemap' }, { className: 'pi pi-book' }, { className: 'pi pi-wallet' }, { className: 'pi pi-shopping-bag' }, { className: 'pi pi-calculator' }];
+
+    const home = { icon: 'pi pi-home', url: 'https://www.primefaces.org/primereact/showcase' }
+
+    return (
+        <BreadCrumb model={items} home={home} />
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { BreadCrumb } from 'primereact/breadcrumb';
+
+export default function TemplateDoc() {
+    const items = [{ className: ' pi pi-sitemap' }, { className: 'pi pi-book' }, { className: 'pi pi-wallet' }, { className: 'pi pi-shopping-bag' }, { className: 'pi pi-calculator' }];
+
+    const home = { icon: 'pi pi-home', url: 'https://www.primefaces.org/primereact/showcase' }
+
+    return (
+        <BreadCrumb model={items} home={home} />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                {/* TO DO: Add demo content. */}
+                <p></p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <BreadCrumb model={items} home={home} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/pages/breadcrumb/index.js b/pages/breadcrumb/index.js
index 45a0887444..84ee5d67c8 100644
--- a/pages/breadcrumb/index.js
+++ b/pages/breadcrumb/index.js
@@ -3,8 +3,9 @@ import { DocSectionNav } from '../../components/doc/common/docsectionnav';
 import { DocSections } from '../../components/doc/common/docsections';
 import { DocActions } from '../../components/doc/common/docactions';
 import { ImportDoc } from '../../components/doc/breadcrumb/importdoc';
-import { DefaultDoc } from '../../components/doc/breadcrumb/basicdoc';
+import { BasicDoc } from '../../components/doc/breadcrumb/basicdoc';
 import { ApiDoc } from '../../components/doc/breadcrumb/apipdoc';
+import { TemplateDoc } from '../../components/doc/breadcrumb/templatedoc';
 
 const BreadCrumbDemo = () => {
     const docs = [
@@ -14,11 +15,15 @@ const BreadCrumbDemo = () => {
             component: ImportDoc
         },
         {
-            id: 'Default',
-            label: 'Default',
-            component: DefaultDoc
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
         },
-
         {
             id: 'api',
             label: 'API',