Add breadcrumbs component

src/layout/Breadcrumbs/Breadcrumbs.story.tsx

@@ -0,0 +1,33 @@
+import { Breadcrumbs } from './Breadcrumbs';
+
+export default {
+  title: 'Components/Layout/Breadcrumbs',
+  component: Breadcrumbs
+};
+
+export const Basic = () => (
+  <Breadcrumbs
+    breadcrumbs={[
+      { label: 'Home', href: '/' },
+      { label: 'Docs', href: '/' },
+      {
+        label: 'Breadcrumbs',
+        href: '/'
+      }
+    ]}
+  />
+);
+
+export const WithCustomSeparator = () => (
+  <Breadcrumbs
+    seperator="/"
+    breadcrumbs={[
+      { label: 'Home', href: '/' },
+      { label: 'Docs', href: '/' },
+      {
+        label: 'Breadcrumbs',
+        href: '/'
+      }
+    ]}
+  />
+);

src/layout/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,65 @@
+import { cn, useComponentTheme } from '@/utils';
+import React, { FC } from 'react';
+import { BreadcrumbsTheme } from './BreadcrumbsTheme';
+
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+  breadcrumbs: { label: string; href: string }[];
+  seperator?: React.ReactNode;
+  theme?: BreadcrumbsTheme;
+}
+
+const Chevron = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+  >
+    <path d="M6.47003 4L5.53003 4.94L8.58336 8L5.53003 11.06L6.47003 12L10.47 8L6.47003 4Z" />
+  </svg>
+);
+
+export const Breadcrumbs: FC<BreadcrumbsProps> = ({
+  breadcrumbs,
+  seperator = <Chevron />,
+  theme: customTheme,
+  ...rest
+}) => {
+  const theme = useComponentTheme('breadcrumbs', customTheme);
+
+  return (
+    <nav aria-label={rest?.['aria-label'] ?? 'breadcrumbs'}>
+      <ol className={theme.base}>
+        {breadcrumbs.map((breadcrumb, index) => {
+          const isActiveBreadcrumb = index === breadcrumbs.length - 1;
+
+          return (
+            <li
+              className="flex gap-2 items-center"
+              key={`breadcrumb-${breadcrumb?.label}-${index}`}
+            >
+              <a
+                className={cn(
+                  theme.breadcrumb,
+                  isActiveBreadcrumb && theme.activeBreadcrumb
+                )}
+                {...(isActiveBreadcrumb
+                  ? {
+                      'aria-current': 'location'
+                    }
+                  : {})}
+                href={breadcrumb.href}
+              >
+                {breadcrumb.label}
+              </a>
+              <span aria-hidden={true}>
+                {index < breadcrumbs.length - 1 && seperator}
+              </span>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};

src/layout/Breadcrumbs/BreadcrumbsTheme.ts

@@ -0,0 +1,14 @@
+export interface BreadcrumbsTheme {
+  base: string;
+  breadcrumb: string;
+  activeBreadcrumb: string;
+}
+
+export const breadcrumbsTheme: BreadcrumbsTheme = {
+  base: 'flex gap-2 items-center',
+  breadcrumb:
+    'hover:text-panel-content text-panel-secondary-content transition-colors',
+  activeBreadcrumb: 'text-primary pointer-events-none'
+};
+
+export const legacyBreadcrumbTheme: BreadcrumbsTheme = breadcrumbsTheme;

src/layout/Breadcrumbs/index.ts

@@ -0,0 +1,2 @@
+export * from './Breadcrumbs';
+export * from './BreadcrumbsTheme';

src/layout/index.ts

@@ -8,3 +8,4 @@ export * from './Stack';
 export * from './Tree';
 export * from './VerticalSpacer';
 export * from './Tabs';
+export * from './Breadcrumbs';

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
   }
 };