@wordpress/admin-ui 1.3.1-next.16d95556a.0 → 1.4.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.4.0 (2025-11-26)
+
 ## 1.3.0 (2025-11-12)
 
 ## 1.2.0 (2025-10-29)

package/README.md

@@ -14,6 +14,10 @@ npm install @wordpress/admin-ui --save
 
 <!-- START TOKEN(Autogenerated API docs) -->
 
+### Breadcrumbs
+
+Undocumented declaration.
+
 ### NavigableRegion
 
 Undocumented declaration.

package/build/breadcrumbs/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/admin-ui/src/breadcrumbs/index.tsx
+var breadcrumbs_exports = {};
+__export(breadcrumbs_exports, {
+  Breadcrumbs: () => Breadcrumbs,
+  default: () => breadcrumbs_default
+});
+module.exports = __toCommonJS(breadcrumbs_exports);
+var import_route = require("@wordpress/route");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_jsx_runtime = require("react/jsx-runtime");
+var BreadcrumbItem = ({
+  item: { label, to }
+}) => {
+  if (!to) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHeading, { level: 1, truncate: true, children: label }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_route.Link, { to, children: label }) });
+};
+var Breadcrumbs = ({ items }) => {
+  if (!items.length) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": (0, import_i18n.__)("Breadcrumbs"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalHStack,
+    {
+      as: "ul",
+      className: "admin-ui-breadcrumbs__list",
+      spacing: 0,
+      justify: "flex-start",
+      alignment: "center",
+      children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { item }, index))
+    }
+  ) });
+};
+var breadcrumbs_default = Breadcrumbs;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Breadcrumbs
+});
+//# sourceMappingURL=index.js.map

package/build/breadcrumbs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/breadcrumbs/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Link } from '@wordpress/route';\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tBreadcrumbsProps,\n\tBreadcrumbItem as BreadcrumbItemType,\n} from './types';\n\nconst BreadcrumbItem = ( {\n\titem: { label, to },\n}: {\n\titem: BreadcrumbItemType;\n} ) => {\n\tif ( ! to ) {\n\t\treturn (\n\t\t\t<li>\n\t\t\t\t<Heading level={ 1 } truncate>\n\t\t\t\t\t{ label }\n\t\t\t\t</Heading>\n\t\t\t</li>\n\t\t);\n\t}\n\n\treturn (\n\t\t<li>\n\t\t\t<Link to={ to }>{ label }</Link>\n\t\t</li>\n\t);\n};\n\nexport const Breadcrumbs = ( { items }: BreadcrumbsProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<nav aria-label={ __( 'Breadcrumbs' ) }>\n\t\t\t<HStack\n\t\t\t\tas=\"ul\"\n\t\t\t\tclassName=\"admin-ui-breadcrumbs__list\"\n\t\t\t\tspacing={ 0 }\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\talignment=\"center\"\n\t\t\t>\n\t\t\t\t{ items.map( ( item, index ) => (\n\t\t\t\t\t<BreadcrumbItem key={ index } item={ item } />\n\t\t\t\t) ) }\n\t\t\t</HStack>\n\t\t</nav>\n\t);\n};\n\nexport default Breadcrumbs;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAqB;AACrB,kBAAmB;AACnB,wBAGO;AAkBH;AARJ,IAAM,iBAAiB,CAAE;AAAA,EACxB,MAAM,EAAE,OAAO,GAAG;AACnB,MAEO;AACN,MAAK,CAAE,IAAK;AACX,WACC,4CAAC,QACA,sDAAC,kBAAAA,uBAAA,EAAQ,OAAQ,GAAI,UAAQ,MAC1B,iBACH,GACD;AAAA,EAEF;AAEA,SACC,4CAAC,QACA,sDAAC,qBAAK,IAAY,iBAAO,GAC1B;AAEF;AAEO,IAAM,cAAc,CAAE,EAAE,MAAM,MAAyB;AAC7D,MAAK,CAAE,MAAM,QAAS;AACrB,WAAO;AAAA,EACR;AAEA,SACC,4CAAC,SAAI,kBAAa,gBAAI,aAAc,GACnC;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACA,IAAG;AAAA,MACH,WAAU;AAAA,MACV,SAAU;AAAA,MACV,SAAQ;AAAA,MACR,WAAU;AAAA,MAER,gBAAM,IAAK,CAAE,MAAM,UACpB,4CAAC,kBAA6B,QAAR,KAAsB,CAC3C;AAAA;AAAA,EACH,GACD;AAEF;AAEA,IAAO,sBAAQ;",
+  "names": ["Heading", "HStack"]
+}

package/build/breadcrumbs/types.js

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/admin-ui/src/breadcrumbs/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/build/breadcrumbs/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/breadcrumbs/types.ts"],
+  "sourcesContent": ["export interface BreadcrumbItem {\n\t/**\n\t * The label text for the breadcrumb item.\n\t */\n\tlabel: string;\n\n\t/**\n\t * The router path that the breadcrumb item should link to.\n\t * It is optional because the current item does not have a link.\n\t */\n\tto?: string;\n}\n\nexport interface BreadcrumbsProps extends React.HTMLAttributes< HTMLElement > {\n\t/**\n\t * An array of items to display in the breadcrumb trail.\n\t * The last item is considered the current item.\n\t */\n\titems: BreadcrumbItem[];\n\t/**\n\t * A boolean to show/hide the current item in the trail.\n\t * Note that when `false` the current item is only visually hidden.\n\t */\n\tshowCurrentItem?: boolean;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build/index.js

@@ -30,14 +30,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/admin-ui/src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Breadcrumbs: () => import_breadcrumbs.default,
   NavigableRegion: () => import_navigable_region.default,
   Page: () => import_page.default
 });
 module.exports = __toCommonJS(index_exports);
+var import_breadcrumbs = __toESM(require("./breadcrumbs"));
 var import_navigable_region = __toESM(require("./navigable-region"));
 var import_page = __toESM(require("./page"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Breadcrumbs,
   NavigableRegion,
   Page
 });

package/build/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["export { default as NavigableRegion } from './navigable-region';\nexport { default as Page } from './page';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA2C;AAC3C,kBAAgC;",
+  "sourcesContent": ["export { default as Breadcrumbs } from './breadcrumbs';\nexport { default as NavigableRegion } from './navigable-region';\nexport { default as Page } from './page';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAuC;AACvC,8BAA2C;AAC3C,kBAAgC;",
   "names": []
 }

package/build-module/breadcrumbs/index.js

@@ -0,0 +1,38 @@
+// packages/admin-ui/src/breadcrumbs/index.tsx
+import { Link } from "@wordpress/route";
+import { __ } from "@wordpress/i18n";
+import {
+  __experimentalHeading as Heading,
+  __experimentalHStack as HStack
+} from "@wordpress/components";
+import { jsx } from "react/jsx-runtime";
+var BreadcrumbItem = ({
+  item: { label, to }
+}) => {
+  if (!to) {
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Heading, { level: 1, truncate: true, children: label }) });
+  }
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { to, children: label }) });
+};
+var Breadcrumbs = ({ items }) => {
+  if (!items.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("nav", { "aria-label": __("Breadcrumbs"), children: /* @__PURE__ */ jsx(
+    HStack,
+    {
+      as: "ul",
+      className: "admin-ui-breadcrumbs__list",
+      spacing: 0,
+      justify: "flex-start",
+      alignment: "center",
+      children: items.map((item, index) => /* @__PURE__ */ jsx(BreadcrumbItem, { item }, index))
+    }
+  ) });
+};
+var breadcrumbs_default = Breadcrumbs;
+export {
+  Breadcrumbs,
+  breadcrumbs_default as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/breadcrumbs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/breadcrumbs/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Link } from '@wordpress/route';\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tBreadcrumbsProps,\n\tBreadcrumbItem as BreadcrumbItemType,\n} from './types';\n\nconst BreadcrumbItem = ( {\n\titem: { label, to },\n}: {\n\titem: BreadcrumbItemType;\n} ) => {\n\tif ( ! to ) {\n\t\treturn (\n\t\t\t<li>\n\t\t\t\t<Heading level={ 1 } truncate>\n\t\t\t\t\t{ label }\n\t\t\t\t</Heading>\n\t\t\t</li>\n\t\t);\n\t}\n\n\treturn (\n\t\t<li>\n\t\t\t<Link to={ to }>{ label }</Link>\n\t\t</li>\n\t);\n};\n\nexport const Breadcrumbs = ( { items }: BreadcrumbsProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<nav aria-label={ __( 'Breadcrumbs' ) }>\n\t\t\t<HStack\n\t\t\t\tas=\"ul\"\n\t\t\t\tclassName=\"admin-ui-breadcrumbs__list\"\n\t\t\t\tspacing={ 0 }\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\talignment=\"center\"\n\t\t\t>\n\t\t\t\t{ items.map( ( item, index ) => (\n\t\t\t\t\t<BreadcrumbItem key={ index } item={ item } />\n\t\t\t\t) ) }\n\t\t\t</HStack>\n\t\t</nav>\n\t);\n};\n\nexport default Breadcrumbs;\n"],
+  "mappings": ";AAGA,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB;AAAA,EACC,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,OAClB;AAkBH;AARJ,IAAM,iBAAiB,CAAE;AAAA,EACxB,MAAM,EAAE,OAAO,GAAG;AACnB,MAEO;AACN,MAAK,CAAE,IAAK;AACX,WACC,oBAAC,QACA,8BAAC,WAAQ,OAAQ,GAAI,UAAQ,MAC1B,iBACH,GACD;AAAA,EAEF;AAEA,SACC,oBAAC,QACA,8BAAC,QAAK,IAAY,iBAAO,GAC1B;AAEF;AAEO,IAAM,cAAc,CAAE,EAAE,MAAM,MAAyB;AAC7D,MAAK,CAAE,MAAM,QAAS;AACrB,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,SAAI,cAAa,GAAI,aAAc,GACnC;AAAA,IAAC;AAAA;AAAA,MACA,IAAG;AAAA,MACH,WAAU;AAAA,MACV,SAAU;AAAA,MACV,SAAQ;AAAA,MACR,WAAU;AAAA,MAER,gBAAM,IAAK,CAAE,MAAM,UACpB,oBAAC,kBAA6B,QAAR,KAAsB,CAC3C;AAAA;AAAA,EACH,GACD;AAEF;AAEA,IAAO,sBAAQ;",
+  "names": []
+}

package/build-module/breadcrumbs/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/build-module/breadcrumbs/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/index.js

@@ -1,8 +1,10 @@
 // packages/admin-ui/src/index.ts
-import { default as default2 } from "./navigable-region";
-import { default as default3 } from "./page";
+import { default as default2 } from "./breadcrumbs";
+import { default as default3 } from "./navigable-region";
+import { default as default4 } from "./page";
 export {
-  default2 as NavigableRegion,
-  default3 as Page
+  default2 as Breadcrumbs,
+  default3 as NavigableRegion,
+  default4 as Page
 };
 //# sourceMappingURL=index.js.map

package/build-module/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["export { default as NavigableRegion } from './navigable-region';\nexport { default as Page } from './page';\n"],
-  "mappings": ";AAAA,SAAoB,WAAXA,gBAAkC;AAC3C,SAAoB,WAAXA,gBAAuB;",
+  "sourcesContent": ["export { default as Breadcrumbs } from './breadcrumbs';\nexport { default as NavigableRegion } from './navigable-region';\nexport { default as Page } from './page';\n"],
+  "mappings": ";AAAA,SAAoB,WAAXA,gBAA8B;AACvC,SAAoB,WAAXA,gBAAkC;AAC3C,SAAoB,WAAXA,gBAAuB;",
   "names": ["default"]
 }

package/build-style/style-rtl.css

@@ -147,4 +147,22 @@
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
   content: attr(aria-label);
   font-size: 12px;
+}
+
+.admin-ui-breadcrumbs__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  gap: 0;
+  font-size: 15px;
+  min-height: 32px;
+  font-weight: 500;
+}
+.admin-ui-breadcrumbs__list li:not(:last-child)::after {
+  content: "/";
+  margin: 0 8px;
+}
+.admin-ui-breadcrumbs__list h1 {
+  font-size: inherit;
+  line-height: inherit;
 }

package/build-style/style.css

@@ -147,4 +147,22 @@
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
   content: attr(aria-label);
   font-size: 12px;
+}
+
+.admin-ui-breadcrumbs__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  gap: 0;
+  font-size: 15px;
+  min-height: 32px;
+  font-weight: 500;
+}
+.admin-ui-breadcrumbs__list li:not(:last-child)::after {
+  content: "/";
+  margin: 0 8px;
+}
+.admin-ui-breadcrumbs__list h1 {
+  font-size: inherit;
+  line-height: inherit;
 }

package/build-types/breadcrumbs/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import type { BreadcrumbsProps } from './types';
+export declare const Breadcrumbs: ({ items }: BreadcrumbsProps) => import("react").JSX.Element | null;
+export default Breadcrumbs;
+//# sourceMappingURL=index.d.ts.map

package/build-types/breadcrumbs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/breadcrumbs/index.tsx"],"names":[],"mappings":"AAUA;;GAEG;AACH,OAAO,KAAK,EACX,gBAAgB,EAEhB,MAAM,SAAS,CAAC;AAwBjB,eAAO,MAAM,WAAW,GAAK,WAAW,gBAAgB,uCAoBvD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build-types/breadcrumbs/types.d.ts

@@ -0,0 +1,24 @@
+export interface BreadcrumbItem {
+    /**
+     * The label text for the breadcrumb item.
+     */
+    label: string;
+    /**
+     * The router path that the breadcrumb item should link to.
+     * It is optional because the current item does not have a link.
+     */
+    to?: string;
+}
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * An array of items to display in the breadcrumb trail.
+     * The last item is considered the current item.
+     */
+    items: BreadcrumbItem[];
+    /**
+     * A boolean to show/hide the current item in the trail.
+     * Note that when `false` the current item is only visually hidden.
+     */
+    showCurrentItem?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/build-types/breadcrumbs/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/breadcrumbs/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAE,WAAW,CAAE;IAC5E;;;OAGG;IACH,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B"}

package/build-types/index.d.ts

@@ -1,3 +1,4 @@
+export { default as Breadcrumbs } from './breadcrumbs';
 export { default as NavigableRegion } from './navigable-region';
 export { default as Page } from './page';
 //# sourceMappingURL=index.d.ts.map

package/build-types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/admin-ui",
-	"version": "1.3.1-next.16d95556a.0",
+	"version": "1.4.0",
 	"description": "Generic components to be used in the Admin UI.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,13 +37,18 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@wordpress/base-styles": "^6.11.1-next.16d95556a.0",
-		"@wordpress/components": "^30.8.1-next.16d95556a.0",
-		"@wordpress/element": "^6.35.1-next.16d95556a.0",
+		"@wordpress/base-styles": "^6.12.0",
+		"@wordpress/components": "^30.9.0",
+		"@wordpress/element": "^6.36.0",
+		"@wordpress/i18n": "^6.9.0",
+		"@wordpress/route": "^0.2.0",
 		"clsx": "^2.1.1"
 	},
+	"peerDependencies": {
+		"react": "^18.0.0"
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "59a9383612bbe16e21af84d13b035bfbca7fe833"
+	"gitHead": "b35cf1a2dce04665e99fd6b9c2891c0b336361b9"
 }

package/src/breadcrumbs/index.tsx

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { Link } from '@wordpress/route';
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalHeading as Heading,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	BreadcrumbsProps,
+	BreadcrumbItem as BreadcrumbItemType,
+} from './types';
+
+const BreadcrumbItem = ( {
+	item: { label, to },
+}: {
+	item: BreadcrumbItemType;
+} ) => {
+	if ( ! to ) {
+		return (
+			<li>
+				<Heading level={ 1 } truncate>
+					{ label }
+				</Heading>
+			</li>
+		);
+	}
+
+	return (
+		<li>
+			<Link to={ to }>{ label }</Link>
+		</li>
+	);
+};
+
+export const Breadcrumbs = ( { items }: BreadcrumbsProps ) => {
+	if ( ! items.length ) {
+		return null;
+	}
+
+	return (
+		<nav aria-label={ __( 'Breadcrumbs' ) }>
+			<HStack
+				as="ul"
+				className="admin-ui-breadcrumbs__list"
+				spacing={ 0 }
+				justify="flex-start"
+				alignment="center"
+			>
+				{ items.map( ( item, index ) => (
+					<BreadcrumbItem key={ index } item={ item } />
+				) ) }
+			</HStack>
+		</nav>
+	);
+};
+
+export default Breadcrumbs;

package/src/breadcrumbs/style.scss

@@ -0,0 +1,22 @@
+@use "@wordpress/base-styles/variables";
+
+.admin-ui-breadcrumbs__list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	// gap prop don't seem to be working properly.
+	gap: 0;
+	font-size: 15px;
+	min-height: 32px;
+	font-weight: 500;
+
+	li:not(:last-child)::after {
+		content: "/";
+		margin: 0 variables.$grid-unit-10;
+	}
+
+	h1 {
+		font-size: inherit;
+		line-height: inherit;
+	}
+}

package/src/breadcrumbs/types.ts

@@ -0,0 +1,25 @@
+export interface BreadcrumbItem {
+	/**
+	 * The label text for the breadcrumb item.
+	 */
+	label: string;
+
+	/**
+	 * The router path that the breadcrumb item should link to.
+	 * It is optional because the current item does not have a link.
+	 */
+	to?: string;
+}
+
+export interface BreadcrumbsProps extends React.HTMLAttributes< HTMLElement > {
+	/**
+	 * An array of items to display in the breadcrumb trail.
+	 * The last item is considered the current item.
+	 */
+	items: BreadcrumbItem[];
+	/**
+	 * A boolean to show/hide the current item in the trail.
+	 * Note that when `false` the current item is only visually hidden.
+	 */
+	showCurrentItem?: boolean;
+}

package/src/index.ts

@@ -1,2 +1,3 @@
+export { default as Breadcrumbs } from './breadcrumbs';
 export { default as NavigableRegion } from './navigable-region';
 export { default as Page } from './page';

package/src/style.scss

@@ -1 +1,2 @@
-@use "./page/style.scss";
+@use "./page/style.scss" as *;
+@use "./breadcrumbs/style.scss" as *;

package/tsconfig.json

@@ -1,5 +1,10 @@
 {
 	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
-	"references": [ { "path": "../components" }, { "path": "../element" } ]
+	"references": [
+		{ "path": "../components" },
+		{ "path": "../element" },
+		{ "path": "../i18n" },
+		{ "path": "../route" }
+	]
 }