IgniteUI · adrianptrv · Sep 25, 2026
diff --git a/samples/layouts/breadcrumbs/custom-separator/.prettierrc b/samples/layouts/breadcrumbs/custom-separator/.prettierrc
@@ -0,0 +1,9 @@
+{
+    "singleQuote": true,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "arrowParens": "avoid",
+    "printWidth": 120,
+    "tabWidth": 4
+}
diff --git a/samples/layouts/breadcrumbs/custom-separator/ReadMe.md b/samples/layouts/breadcrumbs/custom-separator/ReadMe.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of the Breadcrumbs custom separator feature using [Breadcrumbs](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://dl.infragistics.com/x/img/browsers/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/layouts/breadcrumbs/custom-separator" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/layouts/breadcrumbs/custom-separator?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/layouts/breadcrumbs/custom-separator
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/layouts/breadcrumbs/custom-separator/index.html b/samples/layouts/breadcrumbs/custom-separator/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Breadcrumbs Custom Separator</title>
+  <meta charset="UTF-8" />
+
+  <link rel="shortcut icon" href="https://dl.infragistics.com/x/img/browsers/wc.png">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+  <link rel="stylesheet" href="https://dl.infragistics.com/x/css/samples/shared.v8.css" type="text/css" />
+</head>
+
+<body>
+  <div id="root">
+    <div class='sample'>
+      <nav aria-label="Breadcrumb">
+        <igc-breadcrumbs
+          separator="slash"
+        >
+          <igc-breadcrumb><a href="/home">Home</a></igc-breadcrumb>
+          <igc-breadcrumb><a href="/home/products">Products</a></igc-breadcrumb>
+          <igc-breadcrumb><a href="/home/products/laptops">Laptops</a></igc-breadcrumb>
+          <igc-breadcrumb current><a href="/home/products/laptops/gaming">Gaming Laptop</a></igc-breadcrumb>
+        </igc-breadcrumbs>
+      </nav>
+    </div>
+  </div>
+
+  <!-- This script is needed only for parcel and it will be excluded for webpack -->
+  <% if (false) { %>
+    <script src="src/index.ts"></script>
+    <% } %>
+
+</body>
+
+</html>
diff --git a/samples/layouts/breadcrumbs/custom-separator/package.json b/samples/layouts/breadcrumbs/custom-separator/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "wc-breadcrumbs-custom-separator",
+  "version": "1.0.0",
+  "description": "This project provides a Breadcrumbs custom separator example using Ignite UI for Web Components",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color",
+    "build:prod": "webpack --env NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env legacy=true  --mode development --config ./webpack.config.js --progress --color",
+    "build:prod:legacy": "webpack --env NODE_ENV=production --env legacy=true  --mode production --config ./webpack.config.js  --progress  --color --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env NODE_ENV=production --env legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "author": "Infragistics",
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "^7.3.0",
+    "lit": "^3.2.0",
+    "lit-html": "^3.3.1",
+    "postcss": "^8.5.6",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.4",
+    "@babel/plugin-transform-class-properties": "^7.27.1",
+    "@babel/plugin-transform-class-static-block": "^7.28.3",
+    "@babel/plugin-transform-runtime": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-typescript": "^7.27.1",
+    "@tailwindcss/postcss": "^4.1.14",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^10.0.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^7.1.2",
+    "csv-loader": "^3.0.5",
+    "file-loader": "^6.2.0",
+    "fork-ts-checker-webpack-plugin": "^9.1.0",
+    "html-webpack-plugin": "^5.6.4",
+    "parcel-bundler": "^1.12.5",
+    "postcss-loader": "^8.1.1",
+    "source-map": "^0.7.6",
+    "style-loader": "^4.0.0",
+    "tailwindcss": "^4.1.14",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
+    "typescript": "^5.9.2",
+    "webpack": "^5.101.3",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  },
+  "license": "",
+  "homepage": "."
+}
diff --git a/samples/layouts/breadcrumbs/custom-separator/postcss.config.mjs b/samples/layouts/breadcrumbs/custom-separator/postcss.config.mjs
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {}
+  }
+};
diff --git a/samples/layouts/breadcrumbs/custom-separator/sandbox.config.json b/samples/layouts/breadcrumbs/custom-separator/sandbox.config.json
@@ -0,0 +1,6 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node"
+}
diff --git a/samples/layouts/breadcrumbs/custom-separator/src/index.css b/samples/layouts/breadcrumbs/custom-separator/src/index.css
@@ -0,0 +1,8 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.sample {
+    display: flex;
+    justify-content: center;
+    font-family: "Aktiv Grotesk", sans-serif;
+}
diff --git a/samples/layouts/breadcrumbs/custom-separator/src/index.ts b/samples/layouts/breadcrumbs/custom-separator/src/index.ts
@@ -0,0 +1,22 @@
+import {
+    defineComponents,
+    IgcBreadcrumbComponent,
+    IgcBreadcrumbsComponent,
+    registerIconFromText
+} from 'igniteui-webcomponents';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './index.css';
+
+defineComponents(IgcBreadcrumbsComponent, IgcBreadcrumbComponent);
+
+const slashIcon =
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="M12.8535 3C13.3976 3 13.7655 3.55489 13.5537 4.05604L7.85788 17.5331C7.73829 17.8161 7.46093 18 7.15374 18C6.60638 18 6.23639 17.4416 6.44976 16.9375L12.1535 3.46381C12.2725 3.18266 12.5482 3 12.8535 3Z" fill="currentColor"/></svg>';
+
+registerIconFromText('slash', slashIcon);
+
+export class BreadcrumbsCustomSeparator {
+    constructor() {
+    }
+}
+
+new BreadcrumbsCustomSeparator(); 
diff --git a/samples/layouts/breadcrumbs/custom-separator/tailwind.config.cjs b/samples/layouts/breadcrumbs/custom-separator/tailwind.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  content: ["./index.html", "./src/**/*.{ts,js}"],
+  corePlugins: {
+    preflight: false,
+  },
+};
diff --git a/samples/layouts/breadcrumbs/custom-separator/tsconfig.json b/samples/layouts/breadcrumbs/custom-separator/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
diff --git a/samples/layouts/breadcrumbs/custom-separator/webpack.config.js b/samples/layouts/breadcrumbs/custom-separator/webpack.config.js
@@ -0,0 +1,121 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+    const nodeEnv = env?.NODE_ENV || process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!env?.legacy && !(env.legacy == 'false');
+    console.log('>> webpack nodeEnv=' + nodeEnv);
+    console.log('>> webpack isProd=' + isProd);
+    console.log('>> webpack isLegacy=' + isLegacy);
+    const presets = [
+        ['@babel/preset-env', {
+            useBuiltIns: 'usage',
+            corejs: 3,
+            targets: {
+                browsers: isLegacy ? ['defaults'] : [
+                    'last 2 Chrome versions',
+                    'last 2 Safari versions',
+                    'last 2 iOS versions',
+                    'last 2 Firefox versions',
+                    'last 2 Edge versions'
+                ]
+            }
+        }],
+        '@babel/preset-typescript'
+    ];
+
+    return {
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
+        output: {
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist')
+        },
+
+        resolve: {
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
+        },
+
+        module: {
+            rules: [
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                {
+                    test: /\.css$/,
+                    sideEffects: true,
+                    use: [
+                        'style-loader',
+                        {
+                            loader: 'css-loader',
+                            options: { importLoaders: 1 }
+                        },
+                        'postcss-loader'
+                    ]
+                },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader',
+                            options: {
+                                compact: isProd ? true : false,
+                                presets: presets,
+                                plugins: [
+                                    '@babel/plugin-transform-class-static-block',
+                                    '@babel/plugin-transform-class-properties',
+                                    '@babel/plugin-transform-runtime'
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(ts|js)$/,
+                    loader: 'babel-loader',
+                    options: {
+                        compact: isProd ? true : false,
+                        presets: presets,
+                        plugins: [
+                            '@babel/plugin-transform-class-static-block',
+                            '@babel/plugin-transform-class-properties',
+                            '@babel/plugin-transform-runtime'
+                        ]
+                    },
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+            }),
+            new HtmlWebpackPlugin({
+                title: 'for-cs',
+                template: 'index.html'
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ]
+    };
+};
diff --git a/samples/layouts/breadcrumbs/overview/.prettierrc b/samples/layouts/breadcrumbs/overview/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}