fix(breadcrumb): make nxBreadcrumbItem more lenient and add example w…

…ith context menu and buttons (#1376)

projects/ng-aquila/documentation/examples/breadcrumb/breadcrumb-context-menu/breadcrumb-context-menu-example.html

@@ -0,0 +1,29 @@
+<nav aria-label="Breadcrumb">
+    <ol nxBreadcrumb>
+        <li>
+            <button
+                nxBreadcrumbItem
+                [nxContextMenuTriggerFor]="menu"
+                aria-label="Show hidden breadcrumbs"
+            >
+                ...
+            </button>
+        </li>
+        <li>
+            <a nxBreadcrumbItem [routerLink]="'#'"> Subpage 3 </a>
+        </li>
+        <li>
+            <a nxBreadcrumbItem [routerLink]="null"> Current </a>
+        </li>
+    </ol>
+</nav>
+
+<nx-context-menu #menu="nxContextMenu">
+    <button nxContextMenuItem type="button">Home</button>
+    <button nxContextMenuItem type="button" class="nx-margin-left-s">
+        Subpage 1
+    </button>
+    <button nxContextMenuItem type="button" class="nx-margin-left-2m">
+        Subpage 2
+    </button>
+</nx-context-menu>

projects/ng-aquila/documentation/examples/breadcrumb/breadcrumb-context-menu/breadcrumb-context-menu-example.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import {
+    NxBreadcrumbComponent,
+    NxBreadcrumbItemComponent,
+} from '@aposin/ng-aquila/breadcrumb';
+import {
+    NxContextMenuComponent,
+    NxContextMenuItemComponent,
+    NxContextMenuTriggerDirective,
+} from '@aposin/ng-aquila/context-menu';
+
+/**
+ * @title Context menu example
+ */
+@Component({
+    selector: 'breadcrumb-context-menu-example',
+    templateUrl: './breadcrumb-context-menu-example.html',
+    styleUrls: ['./breadcrumb-context-menu-example.css'],
+    standalone: true,
+    imports: [
+        NxBreadcrumbComponent,
+        NxBreadcrumbItemComponent,
+        RouterLink,
+        NxContextMenuComponent,
+        NxContextMenuTriggerDirective,
+        NxContextMenuItemComponent,
+    ],
+})
+export class BreadcrumbContextMenuExampleComponent {}

projects/ng-aquila/documentation/examples/breadcrumb/breadcrumb-examples.module.ts

@@ -4,13 +4,15 @@ import { RouterModule } from '@angular/router';
 import { NxBreadcrumbModule } from '@aposin/ng-aquila/breadcrumb';
 
 import { BreadcrumbExampleComponent } from './breadcrumb/breadcrumb-example';
+import { BreadcrumbContextMenuExampleComponent } from './breadcrumb-context-menu/breadcrumb-context-menu-example';
 import { BreadcrumbLinkExampleComponent } from './breadcrumb-link/breadcrumb-link-example';
 import { BreadcrumbNegativeExampleComponent } from './breadcrumb-negative/breadcrumb-negative-example';
 
 const EXAMPLES = [
     BreadcrumbExampleComponent,
     BreadcrumbNegativeExampleComponent,
     BreadcrumbLinkExampleComponent,
+    BreadcrumbContextMenuExampleComponent,
 ];
 
 @NgModule({
@@ -23,6 +25,7 @@ export class BreadcrumbExamplesModule {
             breadcrumb: BreadcrumbExampleComponent,
             'breadcrumb-negative': BreadcrumbNegativeExampleComponent,
             'breadcrumb-link': BreadcrumbLinkExampleComponent,
+            'breadcrumb-context-menu': BreadcrumbContextMenuExampleComponent,
         };
     }
 }

projects/ng-aquila/src/breadcrumb/breadcrumb-item.component.scss

@@ -8,6 +8,8 @@
     color: v(breadcrumb-color);
     @include type-style(breadcrumb);
     outline: none;
+    background: none;
+    border: 0;
 }
 
 .nx-breadcrumb-item__chevron {
@@ -20,7 +22,7 @@
     }
 }
 
-:host:not([href]) .nx-breadcrumb-item__text {
+:host:not([href]):not(button) .nx-breadcrumb-item__text {
     cursor: auto;
 }
 

projects/ng-aquila/src/breadcrumb/breadcrumb-item.component.ts

@@ -3,7 +3,7 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnDestro
 import { NxIconModule } from '@aposin/ng-aquila/icon';
 
 @Component({
-    selector: 'a[nxBreadcrumbItem]',
+    selector: '[nxBreadcrumbItem]',
     templateUrl: 'breadcrumb-item.component.html',
     styleUrls: ['breadcrumb-item.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,

projects/ng-aquila/src/breadcrumb/breadcrumb.md

@@ -19,14 +19,20 @@ You can see the basic behaviour of the breadcrumb component in the example below
 
 ### Link appearance
 
-You can select the style of the breadcrump via the `appearance` input.
+You can select the style of the breadcrumb via the `appearance` input.
 
 <!-- example(breadcrumb-link) -->
 
+### With Context Menu
+
+This example uses the `nxBreadcrumbItem` on a `button` to open a context menu.
+
+<!-- example(breadcrumb-context-menu) -->
+
 ### Negative styling
 
 <!-- example(breadcrumb-negative) -->
 
 ### Accessibility
 
-Note that the breadcrumb component should be always applied on a `<ol>` tag and wrapped in a `<nav>` with `aria-label='Breadcrumb'`. The breadcrumb items should be on a `<a>` tag and wrapped in `<li>`. The currently active item is automatically marked with `aria-current='page'`. These best practices for breadcrumbs are already applied in the basic example above. You can find further information on the breadcrumb a11y practices [here](https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html).
+Note that the breadcrumb component should be always applied on a `<ol>` tag and wrapped in a `<nav>` with `aria-label='Breadcrumb'`. The breadcrumb items should wrapped in `<li>`. The currently active item is automatically marked with `aria-current='page'`. These best practices for breadcrumbs are already applied in the basic example above. You can find further information on the breadcrumb a11y practices [here](https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html).