diff --git a/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx b/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx
new file mode 100644
index 00000000..036ab818
--- /dev/null
+++ b/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx
@@ -0,0 +1,46 @@
+import { Breadcrumbs, Button } from '@mantine/core'
+import { Link } from 'tuono'
+
+import { IconChevronRight, IconBolt } from '@tabler/icons-react'
+import type { ReactNode } from 'react'
+
+export default function TuonoBreadcrumbs({
+ children,
+}: {
+ children: ReactNode
+}): JSX.Element {
+ return (
+ }
+ mb="md"
+ mt="md"
+ >
+
+ {children}
+
+ )
+}
+
+interface BreadcrumbElementProps {
+ href?: string
+ label: string
+}
+
+export function BreadcrumbElement({
+ href,
+ label,
+}: BreadcrumbElementProps): JSX.Element {
+ return (
+
+ )
+}
diff --git a/apps/documentation/src/components/breadcrumbs/index.ts b/apps/documentation/src/components/breadcrumbs/index.ts
new file mode 100644
index 00000000..d766c8d5
--- /dev/null
+++ b/apps/documentation/src/components/breadcrumbs/index.ts
@@ -0,0 +1,5 @@
+import Breadcrumbs, { BreadcrumbElement } from './breadcrumbs'
+
+export default Breadcrumbs
+
+export { BreadcrumbElement as Element }
diff --git a/apps/documentation/src/routes/documentation/contributing.mdx b/apps/documentation/src/routes/documentation/contributing.mdx
index b866b813..5e7f2794 100644
--- a/apps/documentation/src/routes/documentation/contributing.mdx
+++ b/apps/documentation/src/routes/documentation/contributing.mdx
@@ -4,6 +4,12 @@ import { Head } from 'tuono'
Tuono - Contributing
+import Breadcrumbs, { Element } from '../../components/breadcrumbs'
+
+
+
+
+
# How to contribute
## TL;DR
diff --git a/apps/documentation/src/routes/documentation/installation.mdx b/apps/documentation/src/routes/documentation/installation.mdx
index ca10ebbb..f3727f5d 100644
--- a/apps/documentation/src/routes/documentation/installation.mdx
+++ b/apps/documentation/src/routes/documentation/installation.mdx
@@ -1,9 +1,14 @@
import { Head } from 'tuono'
+import Breadcrumbs, { Element } from '../../components/breadcrumbs'
Tuono - Installation
+
+
+
+
# Installation
## Requirements
diff --git a/apps/documentation/src/routes/documentation/routing/index.mdx b/apps/documentation/src/routes/documentation/routing/index.mdx
index 634a99b7..9a3656ab 100644
--- a/apps/documentation/src/routes/documentation/routing/index.mdx
+++ b/apps/documentation/src/routes/documentation/routing/index.mdx
@@ -4,4 +4,12 @@ import { Head } from 'tuono'
Tuono - Routing
+import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
+
+
+
+
+
# Routing index
+
+TODO
diff --git a/apps/documentation/src/routes/documentation/routing/intro.mdx b/apps/documentation/src/routes/documentation/routing/intro.mdx
index e230165b..a1512633 100644
--- a/apps/documentation/src/routes/documentation/routing/intro.mdx
+++ b/apps/documentation/src/routes/documentation/routing/intro.mdx
@@ -4,6 +4,13 @@ import { Head } from 'tuono'
Tuono - Routing
+import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
+
+
+
+
+
+
# Project structure
Todo
diff --git a/apps/documentation/src/routes/documentation/tutorial/intro.mdx b/apps/documentation/src/routes/documentation/tutorial/intro.mdx
index adfb42eb..14afbac3 100644
--- a/apps/documentation/src/routes/documentation/tutorial/intro.mdx
+++ b/apps/documentation/src/routes/documentation/tutorial/intro.mdx
@@ -4,6 +4,12 @@ import { Head } from 'tuono'
Tuono - Tutorial intro
+import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
+
+
+
+
+
# Tutorial intro
TODO