diff --git a/docs/docs/components/breadcrumb.mdx b/docs/docs/components/breadcrumb.mdx
new file mode 100644
index 0000000..7e31548
--- /dev/null
+++ b/docs/docs/components/breadcrumb.mdx
@@ -0,0 +1,60 @@
+# Breadcrumb
+
+To display hierarchy with respect to current location and help with navigation.
+
+### Quick start
+
+Here's a quick start guide to get started with the Breadcrumb component
+
+### Importing Component
+
+```jsx
+import { Breadcrumb } from "@hover-design/react";
+```
+
+### Code Snippets and Examples
+
+import "@hover-design/react/dist/style.css";
+import { Breadcrumb, Card } from "@hover-design/react";
+export const BreadcrumbComponent = ({ list, separator = "/" }) => (
+  <Breadcrumb crumbs={list} separator={separator} />
+);
+const list = [
+  { title: "Hover" },
+  { title: "Components", href: "#" },
+  { title: "Docs", href: "#" },
+];
+
+```jsx
+const App = () => {
+  const list = [
+    { title: "Hover" },
+    { title: "Components", href: "#" },
+    { title: "Docs", href: "#" },
+  ];
+  return (
+    <div className="App">
+      <Breadcrumb crumbs={list} separator={"/"} />
+    </div>
+  );
+};
+```
+
+#### Example
+
+<Card variant="shadow">
+  <BreadcrumbComponent list={list} separator=">" />
+</Card>
+
+### Breadcrumb
+
+| Property  | Description             | Type                | Default Version |
+| :-------- | :---------------------- | :------------------ | :-------------- |
+| crumbs    | List of Breadcrumbs     | Array[crumb]        | -               |
+| separator | Separator between links | string or ReactNode | `/`             |
+
+### crumbs
+
+| Property | Description                               | Type   | Default Version |
+| :------- | :---------------------------------------- | :----- | :-------------- |
+| crumb    | Object with title(must) & href properties | Object |                 |
diff --git a/lib/src/components/Breadcrumb/BreadCrumb.stories.tsx b/lib/src/components/Breadcrumb/BreadCrumb.stories.tsx
new file mode 100644
index 0000000..7956592
--- /dev/null
+++ b/lib/src/components/Breadcrumb/BreadCrumb.stories.tsx
@@ -0,0 +1,23 @@
+import { Breadcrumb, BreadcrumbProps } from "./Breadcrumb";
+import type { Story } from "@ladle/react";
+
+export const Controls: Story<BreadcrumbProps> = ({
+  crumbs,
+  separator = "/",
+  className,
+  ...nativeProps
+}) => (
+  <>
+    <Breadcrumb crumbs={crumbs} separator={separator} {...nativeProps} />
+  </>
+);
+const crumbs = [
+  { title: "Hover" },
+  { title: "Documantation", href: "#" },
+  { title: "About", href: "#" },
+];
+const separator = ">";
+Controls.args = {
+  crumbs,
+  separator,
+};
diff --git a/lib/src/components/Breadcrumb/Breadcrumb.tsx b/lib/src/components/Breadcrumb/Breadcrumb.tsx
new file mode 100644
index 0000000..9717bff
--- /dev/null
+++ b/lib/src/components/Breadcrumb/Breadcrumb.tsx
@@ -0,0 +1,46 @@
+import React, { forwardRef } from "react";
+import {
+  breadcrumbWrapper,
+  crumbSeparator,
+  crumbTitle,
+} from "./breadcrumb.css";
+
+type crumb = {
+  title: string;
+  href?: string;
+};
+
+export interface BreadcrumbProps {
+  crumbs: Array<crumb>;
+  separator?: string | React.ReactNode;
+  className?: string;
+}
+
+const Breadcrumb: React.ForwardRefRenderFunction<
+  HTMLDivElement,
+  BreadcrumbProps
+> = ({ crumbs, separator = "/", className, ...nativeProps }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={`${breadcrumbWrapper} ${className}`}
+      {...nativeProps}
+    >
+      {crumbs.map((b, index, arr) => {
+        return (
+          <React.Fragment key={index}>
+            <a className={`${crumbTitle}`} href={b.href}>
+              {b.title}
+            </a>
+            {arr.length - 1 !== index && (
+              <span className={`${crumbSeparator}`}>{separator}</span>
+            )}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};
+const BreadcrumbWithRef = forwardRef(Breadcrumb);
+
+export { BreadcrumbWithRef as Breadcrumb };
diff --git a/lib/src/components/Breadcrumb/breadcrumb.css.ts b/lib/src/components/Breadcrumb/breadcrumb.css.ts
new file mode 100644
index 0000000..a9db2a0
--- /dev/null
+++ b/lib/src/components/Breadcrumb/breadcrumb.css.ts
@@ -0,0 +1,12 @@
+import { style } from "@vanilla-extract/css";
+
+export const breadcrumbWrapper = style({
+    display: "flex",
+    alignItems: "center"
+  });
+  export const crumbTitle = style({
+    paddingLeft:"1em"
+  })
+  export const crumbSeparator = style({
+    paddingLeft:"1em"
+  })
\ No newline at end of file
diff --git a/lib/src/components/Breadcrumb/index.ts b/lib/src/components/Breadcrumb/index.ts
new file mode 100644
index 0000000..a227de1
--- /dev/null
+++ b/lib/src/components/Breadcrumb/index.ts
@@ -0,0 +1,2 @@
+export * from "./Breadcrumb";
+export * from "./breadcrumb.css";
\ No newline at end of file
diff --git a/lib/src/index.ts b/lib/src/index.ts
index aa37356..24aa74e 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -1,5 +1,6 @@
 export * from "./components/Badge";
 export * from "./components/Button";
+export * from "./components/Breadcrumb";
 export * from "./components/Card";
 export * from "./components/Checkbox";
 export * from "./components/Flex";