Webflow-Examples · KirklandGee · Mar 4, 2026 · Mar 4, 2026 · Mar 4, 2026
diff --git a/breadcrumbs/README.md b/breadcrumbs/README.md
@@ -0,0 +1,80 @@
+# Breadcrumbs
+A breadcrumb navigation component that displays a hierarchical path to the current page.
+
+## Getting Started
+
+Install dependencies:
+```bash
+npm install
+```
+
+Share the component to your Webflow workspace:
+```bash
+npx webflow library share
+```
+
+For local development:
+```bash
+npm run dev
+```
+
+## Designer Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| ID | Id | — | HTML ID attribute for targeting in custom code |
+| Separator | Variant | chevron | Visual separator between breadcrumb items (slash, chevron, or arrow) |
+| Home Link | Link | — | URL for the home icon link |
+| Level 1 Label | Text | Products | Label text for first level breadcrumb |
+| Level 1 Link | Link | — | URL for first level breadcrumb |
+| Level 1 Visible | Visibility | — | Show or hide level 1 breadcrumb |
+| Level 2 Label | Text | Electronics | Label text for second level breadcrumb |
+| Level 2 Link | Link | — | URL for second level breadcrumb |
+| Level 2 Visible | Visibility | — | Show or hide level 2 breadcrumb |
+| Level 3 Label | Text | Laptops | Label text for third level breadcrumb |
+| Level 3 Link | Link | — | URL for third level breadcrumb |
+| Level 3 Visible | Visibility | — | Show or hide level 3 breadcrumb |
+| Level 4 Label | Text | Gaming | Label text for fourth level breadcrumb |
+| Level 4 Link | Link | — | URL for fourth level breadcrumb |
+| Level 4 Visible | Visibility | — | Show or hide level 4 breadcrumb |
+| Level 5 Label | Text | High Performance | Label text for fifth level breadcrumb |
+| Level 5 Link | Link | — | URL for fifth level breadcrumb |
+| Level 5 Visible | Visibility | — | Show or hide level 5 breadcrumb |
+| Current Page Label | TextNode | Gaming Laptop X1 | Label for the current page (final breadcrumb, non-clickable) |
+
+## Styling
+
+This component automatically adapts to your Webflow site's design system through site variables and inherited properties.
+
+### Site Variables
+
+To match your site's design system, define these CSS variables in your Webflow project settings. The component will use the fallback values shown below until you configure them.
+
+| Site Variable | What It Controls | Fallback |
+|---------------|------------------|----------|
+| --background-primary | Main background color for ellipsis menu | #ffffff |
+| --background-secondary | Hover state background for links and buttons | #f5f5f5 |
+| --text-primary | Main text color for breadcrumb items | #1a1a1a |
+| --text-secondary | Color for separators between breadcrumbs | #737373 |
+| --border-color | Border color for ellipsis menu and active states | #e5e5e5 |
+| --accent-color | Link hover color and focus outline | #1a1a1a |
+| --border-radius | Border radius for menu, buttons, and hover states | 8px |
+
+### Inherited Properties
+
+The component inherits these CSS properties from its parent element:
+- `font-family` — Typography style
+- `color` — Text color
+- `line-height` — Text spacing
+
+## Extending in Code
+
+### Custom Separator Icons
+Replace the default separator characters with custom icons by targeting the `.wf-breadcrumbs-separator` class and using CSS pseudo-elements or inline SVGs.
+
+### Dynamic Breadcrumb Generation
+For CMS-driven pages, use Webflow's CMS binding to populate breadcrumb labels and links dynamically based on collection structure and parent-child relationships.
+
+## Dependencies
+
+No external dependencies.
diff --git a/breadcrumbs/index.html b/breadcrumbs/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Breadcrumbs</title>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; margin: 0; }
+      body { color: inherit; }
+      h1, h2, h3, h4, h5, h6 { color: inherit; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/breadcrumbs/metadata.json b/breadcrumbs/metadata.json
@@ -0,0 +1,5 @@
+{
+  "name": "Breadcrumbs",
+  "description": "Hierarchical navigation trail with customizable separators",
+  "category": "Navigation"
+}
diff --git a/breadcrumbs/package.json b/breadcrumbs/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "breadcrumbs",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.3",
+    "@webflow/data-types": "^1.0.1",
+    "@webflow/react": "^1.0.1",
+    "@webflow/webflow-cli": "^1.8.44",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.7"
+  }
+}
diff --git a/breadcrumbs/screenshot-brand.b64 b/breadcrumbs/screenshot-brand.b64
diff --git a/breadcrumbs/screenshot-brand.png b/breadcrumbs/screenshot-brand.png
diff --git a/breadcrumbs/screenshot-dark.b64 b/breadcrumbs/screenshot-dark.b64
diff --git a/breadcrumbs/screenshot-dark.png b/breadcrumbs/screenshot-dark.png
diff --git a/breadcrumbs/screenshot-light.b64 b/breadcrumbs/screenshot-light.b64
diff --git a/breadcrumbs/screenshot-light.png b/breadcrumbs/screenshot-light.png
diff --git a/breadcrumbs/src/components/Breadcrumbs/Breadcrumbs.css b/breadcrumbs/src/components/Breadcrumbs/Breadcrumbs.css
@@ -0,0 +1,195 @@
+/*
+ * Webflow Site Variables Used:
+ * - --background-primary: Main background color
+ * - --background-secondary: Hover states
+ * - --text-primary: Main text color
+ * - --text-secondary: Separator color
+ * - --border-color: Ellipsis menu border
+ * - --accent-color: Link hover color
+ * - --border-radius: Menu and button rounding
+ */
+
+/* Box sizing reset */
+.wf-breadcrumbs *,
+.wf-breadcrumbs *::before,
+.wf-breadcrumbs *::after {
+  box-sizing: border-box;
+}
+
+/* Root element - inherit Webflow typography + default padding */
+.wf-breadcrumbs {
+  font-family: inherit;
+  color: inherit;
+  line-height: inherit;
+  padding: 24px;
+}
+
+/* Breadcrumb list */
+.wf-breadcrumbs-list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Desktop breadcrumbs - visible on larger screens */
+.wf-breadcrumbs-desktop {
+  display: flex;
+}
+
+/* Mobile breadcrumbs - hidden by default, shown on smaller screens */
+.wf-breadcrumbs-mobile {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .wf-breadcrumbs-desktop {
+    display: none;
+  }
+
+  .wf-breadcrumbs-mobile {
+    display: flex;
+  }
+}
+
+/* Breadcrumb item */
+.wf-breadcrumbs-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Breadcrumb link */
+.wf-breadcrumbs-link {
+  color: var(--text-primary, #1a1a1a);
+  text-decoration: none;
+  font-size: 14px;
+  transition: color 0.2s;
+  display: inline-flex;
+  align-items: center;
+}
+
+.wf-breadcrumbs-link:hover {
+  color: var(--accent-color, #1a1a1a);
+  text-decoration: underline;
+}
+
+.wf-breadcrumbs-link:focus-visible {
+  outline: 2px solid var(--accent-color, #1a1a1a);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Home link */
+.wf-breadcrumbs-home {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Home icon */
+.wf-breadcrumbs-home-icon {
+  width: 16px;
+  height: 16px;
+  color: currentColor;
+}
+
+/* Separator */
+.wf-breadcrumbs-separator {
+  color: var(--text-secondary, #737373);
+  font-size: 14px;
+  user-select: none;
+}
+
+/* Current page (non-clickable) */
+.wf-breadcrumbs-current {
+  color: var(--text-primary, #1a1a1a);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* Ellipsis container */
+.wf-breadcrumbs-ellipsis-container {
+  position: relative;
+}
+
+/* Ellipsis button */
+.wf-breadcrumbs-ellipsis-button {
+  background: transparent;
+  border: none;
+  color: var(--text-primary, #1a1a1a);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: var(--border-radius, 8px);
+  transition: background-color 0.2s;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.wf-breadcrumbs-ellipsis-button:hover {
+  background: var(--background-secondary, #f5f5f5);
+}
+
+.wf-breadcrumbs-ellipsis-button:focus-visible {
+  outline: 2px solid var(--accent-color, #1a1a1a);
+  outline-offset: 2px;
+}
+
+.wf-breadcrumbs-ellipsis-button:active {
+  background: var(--border-color, #e5e5e5);
+}
+
+/* Ellipsis menu */
+.wf-breadcrumbs-ellipsis-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+  background: var(--background-primary, #ffffff);
+  border: 1px solid var(--border-color, #e5e5e5);
+  border-radius: var(--border-radius, 8px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  min-width: 200px;
+}
+
+/* Ellipsis list */
+.wf-breadcrumbs-ellipsis-list {
+  list-style: none;
+  margin: 0;
+  padding: 8px;
+}
+
+/* Ellipsis item */
+.wf-breadcrumbs-ellipsis-item {
+  margin: 0;
+}
+
+.wf-breadcrumbs-ellipsis-item .wf-breadcrumbs-link {
+  display: block;
+  padding: 8px 12px;
+  border-radius: var(--border-radius, 8px);
+  transition: background-color 0.2s;
+}
+
+.wf-breadcrumbs-ellipsis-item .wf-breadcrumbs-link:hover {
+  background: var(--background-secondary, #f5f5f5);
+  text-decoration: none;
+}
+
+/* Screen reader only text */
+.wf-breadcrumbs-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}