feat(breadcrumbs): add 'dropdown' sample

live-editing/configs/BreadcrumbsConfigGenerator.ts

@@ -29,6 +29,12 @@ export class BreadcrumbsConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/layouts/breadcrumbs/"
         }));
 
+        configs.push(new Config({
+            component: 'BreadcrumbsDropdownComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/layouts/breadcrumbs/"
+        }));
+
         configs.push(new Config({
             component: 'BreadcrumbsCustomSeparatorComponent',
             appConfig: BaseAppConfig,

src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.html

@@ -0,0 +1,24 @@
+<nav aria-label="Breadcrumb">
+    <igc-breadcrumbs>
+        <igc-breadcrumb>
+            <a href="/my-drive" (click)="$event.preventDefault()">My drive</a>
+        </igc-breadcrumb>
+        <igc-breadcrumb>
+            <igc-dropdown distance="10">
+                <igc-icon slot="target" name="three-dots"></igc-icon>
+                <igc-dropdown-item>
+                    <igc-icon name="folder" slot="prefix"></igc-icon>Projects
+                </igc-dropdown-item>
+                <igc-dropdown-item>
+                    <igc-icon name="folder" slot="prefix"></igc-icon>Website redesign
+                </igc-dropdown-item>
+            </igc-dropdown>
+        </igc-breadcrumb>
+        <igc-breadcrumb>
+            <a href="/my-drive/assets" (click)="$event.preventDefault()">Assets</a>
+        </igc-breadcrumb>
+        <igc-breadcrumb current>
+            <a href="/my-drive/assets/icons" (click)="$event.preventDefault()">Icons</a>
+        </igc-breadcrumb>
+    </igc-breadcrumbs>
+</nav>

src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.scss

@@ -0,0 +1,57 @@
+:host {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    overflow: auto;
+}
+
+igc-breadcrumbs {
+    --ig-size: var(--ig-size-medium);
+}
+
+[slot="target"] {
+    color: var(--text-color);
+
+    &:hover {
+        color: var(--hover-text-color);
+        cursor: pointer;
+    }
+
+    &:focus {
+        color: var(--focus-text-color);
+    }
+}
+
+igc-dropdown-item[selected] {
+    background: var(--background-color);
+    outline: none;
+    color: var(--item-text-color);
+
+    igc-icon {
+        color: var(--item-icon-color);
+    }
+
+    &:hover {
+        background: var(--hover-item-background);
+        color: var(--hover-item-text-color);
+
+        igc-icon {
+            color: var(--hover-item-icon-color);
+        }
+    }
+}
+
+igc-icon {
+    --ig-size: 2;
+}
+
+@layer base {
+    a {
+        color: revert-layer;
+    }
+
+    * {
+        padding: revert-layer;
+        margin: revert-layer;
+    }
+}

src/app/layouts/breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component.ts

@@ -0,0 +1,24 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcBreadcrumbComponent, IgcBreadcrumbsComponent, IgcDropdownComponent, IgcDropdownItemComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
+
+defineComponents(IgcBreadcrumbsComponent, IgcBreadcrumbComponent, IgcDropdownComponent, IgcDropdownItemComponent, IgcIconComponent);
+
+const threeDotsIcon =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960"><path d="M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z"></path></svg>';
+
+const folderIcon =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path></svg>';
+
+if (typeof window !== 'undefined') {
+    registerIconFromText('three-dots', threeDotsIcon);
+    registerIconFromText('folder', folderIcon);
+}
+
+@Component({
+    selector: 'app-breadcrumbs-dropdown',
+    styleUrls: ['./breadcrumbs-dropdown.component.scss'],
+    templateUrl: './breadcrumbs-dropdown.component.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+
+export class BreadcrumbsDropdownComponent { }

src/app/layouts/breadcrumbs/breadcrumbs-sizes/breadcrumbs-sizes.component.scss

@@ -4,6 +4,7 @@
     height: 100%;
     align-items: center;
     overflow: auto;
+    font-family: var(--ig-font-family);
 }
 
 .small {

src/app/layouts/breadcrumbs/breadcrumbs-states/breadcrumbs-states.component.scss

@@ -5,6 +5,7 @@
     max-height: 15rem;
     padding-block-start: 1rem;
     overflow: auto;
+    font-family: var(--ig-font-family);
 }
 
 igc-breadcrumbs {
@@ -28,7 +29,6 @@ igc-breadcrumbs {
 
     a {
         color: var(--focus-text-color);
-        text-decoration: underline var(--focus-underline-color);
     }
 }
 
@@ -49,7 +49,6 @@ igc-breadcrumbs {
 
     a {
         color: var(--focus-hover-text-color);
-        text-decoration: underline var(--focus-hover-underline-color);
     }
 }
 
@@ -60,7 +59,6 @@ igc-breadcrumbs {
 
     a {
         color: var(--focus-pressed-text-color);
-        text-decoration: underline var(--focus-pressed-underline-color);
     }
 }
 
@@ -74,6 +72,44 @@ igc-breadcrumbs {
     }
 }
 
+[data-igd-theme="material"] {
+    .state-focused-pressed a,
+    .state-focused-hover a,
+    .state-focused a {
+        text-decoration: underline var(--focus-pressed-underline-color);
+    }
+} 
+
+[data-igd-theme="fluent"] {
+    .state-focused-pressed::part(label),
+    .state-focused-hover::part(label),
+    .state-focused::part(label) { 
+        outline: .0625rem solid var(--focus-border-color);
+    }
+}
+
+[data-igd-theme="bootstrap"] {
+    .state-focused-pressed::part(label),
+    .state-focused-hover::part(label),
+    .state-focused::part(label) {
+        outline: .25rem solid var(--focus-border-color);
+        border-radius: 0.25rem;
+    }
+}
+
+[data-igd-theme="indigo"] {
+    .state-focused-pressed::part(label),
+    .state-focused-hover::part(label),
+    .state-focused::part(label) {
+        outline: .1875rem solid var(--focus-border-color);
+        border-radius: 2rem;
+    }
+
+    .state-disabled igc-icon {
+        opacity: 0.2;
+    }
+}
+
 span {
     color: #7d8a96;
     font-size: 0.875rem;
@@ -100,6 +136,12 @@ igc-breadcrumbs:nth-of-type(n+4) {
     grid-row: 2;
 }
 
+@layer base {
+    a {
+        color: revert-layer;
+    }
+}
+
 @media (width < 510px) {
     :host {
         max-height: unset;

src/app/layouts/layouts-routes-data.ts

@@ -20,6 +20,7 @@ export const layoutsRoutesData = {
     'breadcrumbs-overview': { displayName: 'Breadcrumbs Overview', parentName: 'Breadcrumbs' },
     'breadcrumbs-custom-separator': { displayName: 'Breadcrumbs Custom Separator', parentName: 'Breadcrumbs' },
     'breadcrumbs-prefix-suffix': { displayName: 'Breadcrumbs Prefix and Suffix', parentName: 'Breadcrumbs' },
+    'breadcrumbs-dropdown': { displayName: 'Breadcrumbs Dropdown', parentName: 'Breadcrumbs' },
     'breadcrumbs-styling': { displayName: 'Breadcrumbs Styling', parentName: 'Breadcrumbs' },
     'breadcrumbs-tailwind-styling': { displayName: 'Breadcrumbs Tailwind Styling', parentName: 'Breadcrumbs' },
     'breadcrumbs-wrapping': { displayName: 'Breadcrumbs Wrapping', parentName: 'Breadcrumbs' },

src/app/layouts/layouts.routes.ts

@@ -9,6 +9,7 @@ import { AvatarTailwindStylingSampleComponent } from './avatar/avatar-tailwind-s
 import { BreadcrumbsOverviewComponent } from './breadcrumbs/breadcrumbs-overview/breadcrumbs-overview.component';
 import { BreadcrumbsCustomSeparatorComponent } from './breadcrumbs/breadcrumbs-custom-separator/breadcrumbs-custom-separator.component';
 import { BreadcrumbsPrefixSuffixComponent } from './breadcrumbs/breadcrumbs-prefix-suffix/breadcrumbs-prefix-suffix.component';
+import { BreadcrumbsDropdownComponent } from './breadcrumbs/breadcrubms-dropdown/breadcrumbs-dropdown.component';
 import { BreadcrumbsStylingComponent } from './breadcrumbs/breadcrumbs-styling/breadcrumbs-styling.component';
 import { BreadcrumbsTailwindStylingComponent } from './breadcrumbs/breadcrumbs-tailwind-styling/breadcrumbs-tailwind-styling.component';
 import { BreadcrumbsWrappingComponent } from './breadcrumbs/breadcrumbs-wrapping/breadcrumbs-wrapping.component';
@@ -221,6 +222,11 @@ export const LayoutsRoutes: Routes = [
         data: layoutsRoutesData['breadcrumbs-prefix-suffix'],
         path: 'breadcrumbs-prefix-suffix'
     },
+    {
+        component: BreadcrumbsDropdownComponent,
+        data: layoutsRoutesData['breadcrumbs-dropdown'],
+        path: 'breadcrumbs-dropdown'
+    },
     {
         component: BreadcrumbsStylingComponent,
         data: layoutsRoutesData['breadcrumbs-styling'],