diff --git a/docs/components/layout/Breadcrumbs.mdx b/docs/components/layout/Breadcrumbs.mdx
new file mode 100644
index 00000000..4d904760
--- /dev/null
+++ b/docs/components/layout/Breadcrumbs.mdx
@@ -0,0 +1,33 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs';
+import { Breadcrumbs, BreadcrumbList, BreadcrumbItem, BreadcrumbPage, BreadcrumbLink, BreadcrumbSeparator, breadcrumbsTheme } from '../../../src/layout/Breadcrumbs';
+import * as BreadcrumbsStories from '../../../src/layout/Breadcrumbs/Breadcrumbs.story';
+import ThemeRender from '../../ThemeRender.tsx';
+
+<Meta title="Docs/Components/Layout/Breadcrumbs" />
+
+# Breadcrumbs
+Breadcrumbs are a navigation component that shows the user's location within a website or application.
+
+## Example
+<Canvas sourceState="shown" of={BreadcrumbsStories.Basic}/>
+
+## Theme
+This component uses the following default theme:
+
+<ThemeRender theme={breadcrumbsTheme} />
+
+Learn more about how to customize in the [Theme documentation](?path=/docs/docs-theme-getting-started--docs).
+
+## API
+
+### Breadcrumbs
+<ArgTypes of={Breadcrumbs} />
+
+### BreadcrumbList
+<ArgTypes of={BreadcrumbList} />
+
+### BreadcrumbLink
+<ArgTypes of={BreadcrumbLink} />
+
+### BreadcrumbSeparator
+<ArgTypes of={BreadcrumbSeparator} />
diff --git a/src/layout/Breadcrumbs/BreadcrumbItem.tsx b/src/layout/Breadcrumbs/BreadcrumbItem.tsx
new file mode 100644
index 00000000..83daab94
--- /dev/null
+++ b/src/layout/Breadcrumbs/BreadcrumbItem.tsx
@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+import { cn } from '@/utils';
+
+export const BreadcrumbItem: FC<React.LiHTMLAttributes<HTMLLIElement>> = ({
+  className,
+  ...rest
+}) => <li className={cn('flex gap-2 items-center', className)} {...rest} />;
diff --git a/src/layout/Breadcrumbs/BreadcrumbLink.tsx b/src/layout/Breadcrumbs/BreadcrumbLink.tsx
new file mode 100644
index 00000000..c03a53bd
--- /dev/null
+++ b/src/layout/Breadcrumbs/BreadcrumbLink.tsx
@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import { cn, useComponentTheme } from '@/utils';
+import { BreadcrumbsTheme } from './BreadcrumbsTheme';
+
+export interface BreadcrumbLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  theme?: BreadcrumbsTheme;
+}
+
+export const BreadcrumbLink: FC<BreadcrumbLinkProps> = ({
+  className,
+  theme: customTheme,
+  href,
+  ...rest
+}) => {
+  const theme = useComponentTheme('breadcrumbs', customTheme);
+
+  return <a className={cn(theme.link, className)} href={href} {...rest} />;
+};
diff --git a/src/layout/Breadcrumbs/BreadcrumbList.tsx b/src/layout/Breadcrumbs/BreadcrumbList.tsx
new file mode 100644
index 00000000..a41cf534
--- /dev/null
+++ b/src/layout/Breadcrumbs/BreadcrumbList.tsx
@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+import { cn, useComponentTheme } from '@/utils';
+import { BreadcrumbsTheme } from './BreadcrumbsTheme';
+
+export interface BreadcrumbListProps
+  extends React.OlHTMLAttributes<HTMLOListElement> {
+  theme?: BreadcrumbsTheme;
+}
+
+export const BreadcrumbList: FC<BreadcrumbListProps> = ({
+  className,
+  theme: customTheme,
+  ...rest
+}) => {
+  const theme = useComponentTheme('breadcrumbs', customTheme);
+
+  return <ol className={cn(theme.list, className)} {...rest} />;
+};
diff --git a/src/layout/Breadcrumbs/BreadcrumbPage.tsx b/src/layout/Breadcrumbs/BreadcrumbPage.tsx
new file mode 100644
index 00000000..8dfeef25
--- /dev/null
+++ b/src/layout/Breadcrumbs/BreadcrumbPage.tsx
@@ -0,0 +1,26 @@
+import { cn, useComponentTheme } from '@/utils';
+import React, { FC } from 'react';
+import { BreadcrumbsTheme } from './BreadcrumbsTheme';
+
+export interface BreadcrumbPageProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  theme?: BreadcrumbsTheme;
+}
+
+export const BreadcrumbPage: FC<BreadcrumbPageProps> = ({
+  theme: customTheme,
+  className,
+  ...rest
+}) => {
+  const theme = useComponentTheme('breadcrumbs', customTheme);
+
+  return (
+    <span
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn(theme.activePage, className)}
+      {...rest}
+    />
+  );
+};
diff --git a/src/layout/Breadcrumbs/BreadcrumbSeparator.tsx b/src/layout/Breadcrumbs/BreadcrumbSeparator.tsx
new file mode 100644
index 00000000..bc36b5a0
--- /dev/null
+++ b/src/layout/Breadcrumbs/BreadcrumbSeparator.tsx
@@ -0,0 +1,29 @@
+import { Arrow } from '@/elements';
+import { cn, useComponentTheme } from '@/utils';
+import React, { FC } from 'react';
+import { BreadcrumbsTheme } from './BreadcrumbsTheme';
+
+export interface BreadcrumbSeparatorProps
+  extends React.LiHTMLAttributes<HTMLLIElement> {
+  theme?: BreadcrumbsTheme;
+}
+
+export const BreadcrumbSeparator: FC<BreadcrumbSeparatorProps> = ({
+  children = <Arrow direction="right" />,
+  className,
+  theme: customTheme,
+  ...rest
+}) => {
+  const theme = useComponentTheme('breadcrumbs', customTheme);
+
+  return (
+    <li
+      role="presentation"
+      aria-hidden={true}
+      className={cn(theme.separator, className)}
+      {...rest}
+    >
+      {children}
+    </li>
+  );
+};
diff --git a/src/layout/Breadcrumbs/Breadcrumbs.story.tsx b/src/layout/Breadcrumbs/Breadcrumbs.story.tsx
new file mode 100644
index 00000000..9ca27530
--- /dev/null
+++ b/src/layout/Breadcrumbs/Breadcrumbs.story.tsx
@@ -0,0 +1,49 @@
+import {
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Breadcrumbs
+} from './';
+
+export default {
+  title: 'Components/Layout/Breadcrumbs',
+  component: Breadcrumbs
+};
+
+export const Basic = () => (
+  <Breadcrumbs>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">Home</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">Docs</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Breadcrumbs</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumbs>
+);
+
+export const WithCustomSeparator = () => (
+  <Breadcrumbs>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">Home</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator>/</BreadcrumbSeparator>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">Docs</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator>/</BreadcrumbSeparator>
+      <BreadcrumbItem>
+        <BreadcrumbPage>Breadcrumbs</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumbs>
+);
diff --git a/src/layout/Breadcrumbs/Breadcrumbs.tsx b/src/layout/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 00000000..efb56665
--- /dev/null
+++ b/src/layout/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,23 @@
+import { cn, useComponentTheme } from '@/utils';
+import React, { FC } from 'react';
+import { BreadcrumbsTheme } from './BreadcrumbsTheme';
+
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+  theme?: BreadcrumbsTheme;
+}
+
+export const Breadcrumbs: FC<BreadcrumbsProps> = ({
+  theme: customTheme,
+  className,
+  ...rest
+}) => {
+  const theme = useComponentTheme('breadcrumbs', customTheme);
+
+  return (
+    <nav
+      className={cn(theme.base, className)}
+      aria-label={rest?.['aria-label'] ?? 'breadcrumbs'}
+      {...rest}
+    />
+  );
+};
diff --git a/src/layout/Breadcrumbs/BreadcrumbsTheme.ts b/src/layout/Breadcrumbs/BreadcrumbsTheme.ts
new file mode 100644
index 00000000..484e7458
--- /dev/null
+++ b/src/layout/Breadcrumbs/BreadcrumbsTheme.ts
@@ -0,0 +1,17 @@
+export interface BreadcrumbsTheme {
+  base: string;
+  separator: string;
+  list: string;
+  link: string;
+  activePage: string;
+}
+
+export const breadcrumbsTheme: BreadcrumbsTheme = {
+  base: '',
+  separator: '[&>svg]:size-3.5',
+  list: 'flex gap-2 items-center',
+  link: 'hover:text-panel-content text-panel-secondary-content transition-colors',
+  activePage: 'text-primary pointer-events-none'
+};
+
+export const legacyBreadcrumbTheme: BreadcrumbsTheme = breadcrumbsTheme;
diff --git a/src/layout/Breadcrumbs/index.ts b/src/layout/Breadcrumbs/index.ts
new file mode 100644
index 00000000..ec61eadb
--- /dev/null
+++ b/src/layout/Breadcrumbs/index.ts
@@ -0,0 +1,7 @@
+export * from './Breadcrumbs';
+export * from './BreadcrumbsTheme';
+export * from './BreadcrumbItem';
+export * from './BreadcrumbLink';
+export * from './BreadcrumbList';
+export * from './BreadcrumbSeparator';
+export * from './BreadcrumbPage';
diff --git a/src/layout/index.ts b/src/layout/index.ts
index ce38e960..5f9f2ec7 100644
--- a/src/layout/index.ts
+++ b/src/layout/index.ts
@@ -8,3 +8,4 @@ export * from './Stack';
 export * from './Tree';
 export * from './VerticalSpacer';
 export * from './Tabs';
+export * from './Breadcrumbs';
diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts
index 039978c2..9aed6b56 100644
--- a/src/utils/Theme/themes/theme.ts
+++ b/src/utils/Theme/themes/theme.ts
@@ -112,7 +112,10 @@ import {
   legacyDividerTheme,
   JsonTreeTheme,
   jsonTreeTheme,
-  legacyJsonTreeTheme
+  legacyJsonTreeTheme,
+  breadcrumbsTheme,
+  BreadcrumbsTheme,
+  legacyBreadcrumbTheme
 } from '@/layout';
 
 import {
@@ -182,6 +185,7 @@ export interface ReablocksTheme {
     popover: PopoverTheme;
     pager: PagerTheme;
     tabs: TabsTheme;
+    breadcrumbs: BreadcrumbsTheme;
   };
 }
 
@@ -227,7 +231,8 @@ export const theme: ReablocksTheme = {
     popover: popoverTheme,
     pager: pagerTheme,
     tabs: tabsTheme,
-    jsonTree: jsonTreeTheme
+    jsonTree: jsonTreeTheme,
+    breadcrumbs: breadcrumbsTheme
   }
 };
 
@@ -273,6 +278,7 @@ export const legacyThemeVars: ReablocksTheme = {
     popover: legacyPopoverTheme,
     pager: legacyPagerTheme,
     tabs: legacyTabsTheme,
-    jsonTree: legacyJsonTreeTheme
+    jsonTree: legacyJsonTreeTheme,
+    breadcrumbs: legacyBreadcrumbTheme
   }
 };