@bspk/ui-ngx 0.0.1

package/src/lib/banner-alert/banner-alert.scss

@@ -0,0 +1,86 @@
+[data-bspk='banner-alert'] {
+    --color: var(--status-information);
+    --on-color: var(--status-on-information);
+
+    display: flex;
+    flex-direction: row;
+    border: 2px solid var(--color);
+    border-radius: var(--radius-md);
+    background-color: var(--surface-neutral-t1-base);
+    width: 100%;
+
+    &[data-variant='error'] {
+        --color: var(--status-error);
+        --on-color: var(--status-on-error);
+    }
+
+    &[data-variant='success'] {
+        --color: var(--status-success);
+        --on-color: var(--status-on-success);
+    }
+
+    &[data-variant='warning'] {
+        --color: var(--status-warning);
+        --on-color: var(--status-on-warning);
+    }
+
+    &[data-elevated] {
+        box-shadow: var(--drop-shadow-raise);
+    }
+
+    [data-icon-bar] {
+        flex: 1;
+        padding: var(--spacing-sizing-04) var(--spacing-sizing-03);
+        background: var(--color);
+        color: var(--on-color);
+
+        svg {
+            width: var(--spacing-sizing-06);
+            height: var(--spacing-sizing-06);
+        }
+    }
+
+    [data-content] {
+        flex: 100%;
+        display: flex;
+        flex-direction: column;
+        padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
+
+        [data-header] {
+            display: flex;
+            flex-direction: row;
+            gap: var(--spacing-sizing-03);
+            height: var(--spacing-sizing-12);
+            align-items: center;
+
+            span {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                color: var(--foreground-neutral-on-surface);
+                font: var(--heading-h6);
+
+                @media (any-pointer: coarse) {
+                    font: var(--heading-h6);
+                }
+            }
+        }
+
+        [data-body] {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-sizing-02);
+            padding: 0 var(--spacing-sizing-02) var(--spacing-sizing-02) 0;
+
+            span {
+                font: var(--body-base);
+            }
+
+            button {
+                margin-left: auto;
+            }
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/banner-alert/banner-alert.spec.ts

@@ -0,0 +1,19 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
+import { UIBannerAlertExample } from './example';
+
+describe('UIBannerAlert', () => {
+    let fixture: ComponentFixture<UIBannerAlertExample>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [UIBannerAlertExample],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(UIBannerAlertExample);
+        fixture.detectChanges();
+    });
+
+    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
+});

package/src/lib/banner-alert/banner-alert.ts

@@ -0,0 +1,120 @@
+import { Component, EventEmitter, Output, ViewEncapsulation, input } from '@angular/core';
+import { AlertVariant, AsInputSignal } from '../../types/common';
+import { UIButton } from '../button';
+import { IconCheckCircleFill, IconClose, IconErrorFill, IconInfoFill, IconWarningFill } from '../icons';
+
+export interface BannerAlertProps {
+    /**
+     * The color variant of the banner alert.
+     *
+     * @default informational
+     */
+    variant?: AlertVariant;
+    /**
+     * The header of the banner alert.
+     *
+     * @required
+     */
+    header: string;
+    /**
+     * The body of the banner alert.
+     *
+     * @type multiline
+     * @required
+     */
+    body: string;
+    /**
+     * This property may be undefined or an object containing required CallToActionButton properties.
+     *
+     * @type CallToActionButton
+     */
+    callToAction?: CallToActionButton;
+    /**
+     * Is the alert elevated. If true a drop shadow is added.
+     *
+     * @default false
+     */
+    elevated?: boolean;
+}
+
+export interface CallToActionButton {
+    /**
+     * The label of the call to action button.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The callback function for the call to action button.
+     *
+     * @required
+     */
+    onClick: () => void;
+}
+
+@Component({
+    selector: 'ui-banner-alert',
+    imports: [UIButton, IconErrorFill, IconInfoFill, IconCheckCircleFill, IconWarningFill],
+    template: `<div data-icon-bar>
+            @if (variant() === 'error') {
+                <icon-error-fill />
+            } @else if (variant() === 'informational') {
+                <icon-info-fill />
+            } @else if (variant() === 'success') {
+                <icon-check-circle-fill />
+            } @else if (variant() === 'warning') {
+                <icon-warning-fill />
+            }
+        </div>
+        <div data-content>
+            @if (header() || onClose.observed) {
+                <div data-header>
+                    <span>{{ header() }}</span>
+                    @if (onClose.observed) {
+                        <ui-button
+                            (click)="emitClose()"
+                            label="Close"
+                            [icon]="IconClose"
+                            [iconOnly]="true"
+                            [variant]="'tertiary'"
+                            [size]="'small'" />
+                    }
+                </div>
+            }
+            <div data-body>
+                <span>{{ body() }}</span>
+                @if (callToAction()) {
+                    <ui-button
+                        [label]="callToAction()!.label"
+                        (click)="callToAction()!.onClick()"
+                        [size]="'small'"
+                        [variant]="'tertiary'" />
+                }
+            </div>
+        </div>`,
+    styleUrl: './banner-alert.scss',
+    standalone: true,
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        'data-bspk': 'banner-alert',
+        '[attr.data-elevated]': 'elevated() || undefined',
+        '[attr.data-variant]': 'variant()',
+        role: 'alert',
+    },
+})
+export class UIBannerAlert implements AsInputSignal<BannerAlertProps> {
+    /** Function to call when the banner alert is closed. */
+    @Output() onClose = new EventEmitter<void>();
+
+    readonly variant = input<BannerAlertProps['variant']>('informational');
+    readonly elevated = input<BannerAlertProps['elevated']>(false);
+    readonly header = input.required<BannerAlertProps['header']>();
+    readonly body = input.required<BannerAlertProps['body']>();
+    readonly callToAction = input<BannerAlertProps['callToAction']>();
+
+    IconClose = IconClose;
+
+    emitClose() {
+        this.onClose?.emit();
+    }
+}

package/src/lib/banner-alert/example.ts

@@ -0,0 +1,61 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { sendSnackbar } from '../../utils/send-snackbar';
+import { IconAdd } from '../icons/add';
+import { UIBannerAlert } from './banner-alert';
+
+@Component({
+    selector: 'ui-badge-example',
+    standalone: true,
+    imports: [CommonModule, UIBannerAlert],
+    template: `
+        <h2>BannerAlert</h2>
+
+        <h3>Default</h3>
+        <ui-banner-alert header="Example Header" body="Example body text"> </ui-banner-alert>
+
+        <h3>variant="informational"</h3>
+        <ui-banner-alert header="Example Header" body="Example body text" variant="informational"> </ui-banner-alert>
+
+        <h3>variant="success"</h3>
+        <ui-banner-alert header="Example Header" body="Example body text" variant="success"></ui-banner-alert>
+
+        <h3>variant="error"</h3>
+        <ui-banner-alert header="Example Header" body="Example body text" variant="error"></ui-banner-alert>
+
+        <h3>variant="warning"</h3>
+        <ui-banner-alert header="Example Header" body="Example body text" variant="warning"></ui-banner-alert>
+
+        <h3>Elevated</h3>
+        <ui-banner-alert header="Example Header" body="Example body text" [elevated]="true"> </ui-banner-alert>
+
+        <h3>onClose</h3>
+        <ui-banner-alert header="Example Header" body="Example body text" (onClose)="onClose()"> </ui-banner-alert>
+
+        <h3>callToAction</h3>
+        <ui-banner-alert
+            header="Example Header"
+            body="Example body text"
+            [callToAction]="{ label: 'Click me', onClick: onCta }">
+        </ui-banner-alert>
+
+        <h3>onClose + callToAction</h3>
+        <ui-banner-alert
+            header="Example Header"
+            body="Example body text"
+            (onClose)="onClose()"
+            [callToAction]="{ label: 'Click me', onClick: onCta }">
+        </ui-banner-alert>
+    `,
+})
+export class UIBannerAlertExample {
+    protected readonly iconAdd = IconAdd;
+
+    onClose() {
+        sendSnackbar('Banner closed');
+    }
+
+    onCta() {
+        sendSnackbar('Call to action clicked');
+    }
+}

package/src/lib/banner-alert/index.ts

@@ -0,0 +1 @@
+export * from './banner-alert'

package/src/lib/breadcrumb/breadcrumb-dropdown.ts

@@ -0,0 +1,169 @@
+import { CommonModule } from '@angular/common';
+import {
+    Component,
+    ChangeDetectionStrategy,
+    ViewEncapsulation,
+    input,
+    computed,
+    signal,
+    viewChild,
+    AfterViewInit,
+    OnDestroy,
+} from '@angular/core';
+import { AsInputSignal } from '../../types/common';
+import { keydownHandler } from '../../utils/keydown-handler';
+import { uniqueId } from '../../utils/random';
+import { scrollLimitStyle, ScrollLimitStyleProps } from '../../utils/scroll-limit-style';
+import { UIButton } from '../button';
+import { UIFloatingDirective } from '../floating';
+import { IconChevronRight } from '../icons/chevron-right';
+import { IconMoreHoriz } from '../icons/more-horiz';
+import { KeyNavigationUtility } from '../key-navigation';
+import { UIListItem } from '../list-item';
+import { UIMenu } from '../menu';
+import { UIOutsideClickDirective } from '../outside-click';
+import { BreadcrumbItem } from './utils';
+
+export type BreadcrumbDropdownProps = ScrollLimitStyleProps & {
+    items: BreadcrumbItem[];
+    id?: string;
+};
+
+/**
+ * The BreadcrumbDropdown component is used to display a dropdown menu within a breadcrumb navigation.
+ *
+ * @name BreadcrumbDropdown
+ * @parent Breadcrumb
+ */
+@Component({
+    selector: 'ui-breadcrumb-dropdown',
+    imports: [
+        CommonModule,
+        UIButton,
+        UIListItem,
+        UIMenu,
+        IconChevronRight,
+        UIFloatingDirective,
+        UIOutsideClickDirective,
+    ],
+    template: `
+        <ui-button
+            [icon]="iconMoreHoriz"
+            [label]="'Access to ' + items().length + ' pages'"
+            [iconOnly]="true"
+            variant="tertiary"
+            size="small"
+            [attr.aria-expanded]="!!open() || null"
+            [attr.aria-haspopup]="'listbox'"
+            [attr.aria-controls]="open() ? menuId() : null"
+            (onClick)="toggleMenu()"
+            #reference
+            (keydown)="handleKeydown($event)"
+            [id]="safeId() + '-reference'" />
+        @if (open()) {
+            <ui-menu
+                [ui-outside-click]="{ callback: handleOutsideClick.bind(this) }"
+                [ui-floating]="{ reference: referenceEl }"
+                [id]="menuId()"
+                label="Expanded breadcrumb"
+                owner="Breadcrumb"
+                ariaRole="listbox"
+                [ngStyle]="ngMenuStyle()">
+                @for (item of menuItems(); track item.href) {
+                    <ui-list-item
+                        as="a"
+                        [tabIndex]="-1"
+                        [id]="item.id"
+                        [label]="item.label"
+                        [href]="item.href"
+                        [active]="keyNavigation.activeElementId === item.id" />
+                }
+            </ui-menu>
+        }
+        <icon-chevron-right aria-hidden="true" width="24" />
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        style: 'display: contents;',
+    },
+})
+export class UIBreadcrumbDropdown implements AsInputSignal<BreadcrumbDropdownProps>, AfterViewInit, OnDestroy {
+    readonly iconChevronRight = IconChevronRight;
+    readonly iconMoreHoriz = IconMoreHoriz;
+
+    keyNavigation = new KeyNavigationUtility();
+
+    readonly reference = viewChild<UIButton>('reference');
+
+    readonly id = input<BreadcrumbDropdownProps['id']>(uniqueId('dropdown'));
+    readonly safeId = computed(() => this.id() || uniqueId('dropdown'));
+    readonly menuId = computed(() => `${this.safeId()}-menu`);
+    readonly scrollLimit = input<BreadcrumbDropdownProps['scrollLimit']>();
+    readonly open = signal<boolean>(false);
+    readonly items = input.required<BreadcrumbDropdownProps['items']>();
+    readonly menuItems = computed(() =>
+        this.items().map((item, index) => ({
+            ...item,
+            id: `${this.safeId()}-item-${index}`,
+        })),
+    );
+    readonly ids = computed(() => this.menuItems().map((item) => item.id));
+
+    readonly ngMenuStyle = computed(() => {
+        return {
+            ...scrollLimitStyle(this.scrollLimit(), this.items().length),
+            width: 'fit-content',
+            maxWidth: '300px',
+            minWidth: '150px',
+        };
+    });
+
+    get referenceEl() {
+        return this.reference()!.nativeElement as HTMLElement;
+    }
+
+    handleOutsideClick = (): void => {
+        this.open.set(false);
+    };
+
+    handleKeydown(event: KeyboardEvent): void {
+        if (!this.open()) {
+            keydownHandler({
+                ArrowDown: () => this.toggleMenu(true),
+                'Ctrl+Option+Space': () => this.toggleMenu(true),
+                Space: () => this.toggleMenu(true),
+                Enter: () => this.toggleMenu(true),
+            })(event);
+            return;
+        }
+
+        const SpaceEnter = () => this.keyNavigation.activeElement?.click();
+
+        // all key events run through keyNavigation utility when menu is open
+        this.keyNavigation.handleKeydown(event, {
+            'Ctrl+Option+Space': SpaceEnter,
+            Space: SpaceEnter,
+            Enter: SpaceEnter,
+            Escape: () => {
+                if (this.open()) this.toggleMenu(false);
+            },
+        });
+    }
+
+    ngAfterViewInit(): void {
+        this.keyNavigation.init({ ids: this.ids() });
+    }
+
+    ngOnDestroy(): void {
+        this.keyNavigation.destroy();
+    }
+
+    toggleMenu(force?: boolean) {
+        if (force !== undefined) {
+            this.open.set(force);
+            return;
+        }
+        this.open.update((o) => !o);
+    }
+}

package/src/lib/breadcrumb/breadcrumb.scss

@@ -0,0 +1,16 @@
+[data-bspk='breadcrumb'] {
+    width: 100%;
+
+    ol {
+        display: flex;
+        align-items: center;
+        flex-flow: row wrap;
+        list-style: none;
+        gap: var(--spacing-sizing-02);
+
+        li {
+            display: flex;
+            gap: var(--spacing-sizing-02);
+        }
+    }
+}

package/src/lib/breadcrumb/breadcrumb.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
+import { UIBreadcrumb } from './breadcrumb';
+
+describe('Breadcrumb', () => {
+    let fixture: ComponentFixture<UIBreadcrumb>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [UIBreadcrumb],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(UIBreadcrumb);
+        fixture.componentRef.setInput('items', [
+            { label: 'Item 1', href: '#link-1' },
+            { label: 'Item 2', href: '#link-2' },
+            { label: 'Item 3', href: '#link-3' },
+            { label: 'Item 4', href: '#link-4' },
+            { label: 'Item 5', href: '#link-5' },
+        ]);
+
+        fixture.detectChanges();
+    });
+
+    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
+});

package/src/lib/breadcrumb/breadcrumb.ts

@@ -0,0 +1,111 @@
+import { CommonModule } from '@angular/common';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, input, computed } from '@angular/core';
+
+import { AsInputSignal, CommonProps } from '../../types/common';
+import { uniqueId } from '../../utils/random';
+import { ScrollLimitStyleProps } from '../../utils/scroll-limit-style';
+import { IconChevronRight } from '../icons/chevron-right';
+import { UILinkDirective } from '../link';
+import { UITxtDirective } from '../txt';
+import { UIBreadcrumbDropdown } from './breadcrumb-dropdown';
+import { BreadcrumbItem } from './utils';
+
+export type BreadcrumbProps = CommonProps<'id'> &
+    ScrollLimitStyleProps & {
+        /**
+         * The array of breadcrumb items.
+         *
+         * If **less than 2** items are provided, the component will not render.
+         *
+         * @example
+         *     [
+         *         { label: 'Level 1', href: '#level-1' },
+         *         { label: 'Level 2', href: '#level-2' },
+         *         { label: 'Level 3', href: '#level-3' },
+         *         { label: 'Level 4', href: '#level-4' },
+         *         { label: 'Level 5', href: '#level-5' },
+         *         { label: 'Level 6', href: '#level-6' },
+         *         { label: 'Level 7', href: '#level-7' },
+         *         { label: 'Level 8', href: '#level-8' },
+         *         { label: 'Level 9', href: '#level-9' },
+         *         { label: 'Level 10', href: '#level-10' },
+         *     ];
+         *
+         * @type Array<BreadcrumbItem>
+         * @required
+         */
+        items: BreadcrumbItem[];
+    };
+
+/**
+ * Used to indicate the current page's location within a navigational hierarchy.
+ *
+ * @example
+ *     ```html
+ *     <ui-breadcrumb
+ *         [items]="[
+ *             { label: 'Brioche', href: '#brioche' },
+ *             { label: 'Whole Wheat', href: '#whole-wheat' },
+ *             { label: 'Sourdough', href: '#sourdough' },
+ *             { label: 'Rye', href: '#rye' },
+ *             { label: 'Multigrain', href: '#multigrain' },
+ *             { label: 'Baguette', href: '#baguette' },
+ *             { label: 'Focaccia', href: '#focaccia' },
+ *             { label: 'Ciabatta', href: '#ciabatta' },
+ *             { label: 'Pita', href: '#pita' },
+ *             { label: 'Naan', href: '#naan' },
+ *             { label: 'Flatbread', href: '#flatbread' }
+ *         ]"
+ *         [scrollLimit]="5">
+ *     </ui-breadcrumb>
+ *     ```;
+ *
+ * @name Breadcrumb
+ * @phase Dev
+ */
+@Component({
+    selector: 'ui-breadcrumb',
+    template: `@if (shouldRender()) {
+        <nav aria-label="Breadcrumb" [attr.data-bspk]="'breadcrumb'" [attr.id]="id()">
+            <ol>
+                <li>
+                    <a ui-link [href]="firstItem().href">{{ firstItem().label }}</a>
+                    <icon-chevron-right aria-hidden="true" width="24" />
+                </li>
+                @if (items().length > 5) {
+                    <li>
+                        <ui-breadcrumb-dropdown [items]="middleItems()" [id]="id()!" [scrollLimit]="scrollLimit()" />
+                    </li>
+                } @else {
+                    @for (item of middleItems(); track item.href) {
+                        <li>
+                            <a ui-link [href]="item.href">{{ item.label }}</a>
+                            <icon-chevron-right aria-hidden="true" width="24" />
+                        </li>
+                    }
+                }
+                <li [attr.aria-current]="'page'" [ui-txt]="'body-base'">
+                    {{ lastItem().label }}
+                </li>
+            </ol>
+        </nav>
+    }`,
+    styleUrls: ['./breadcrumb.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [CommonModule, UITxtDirective, UIBreadcrumbDropdown, IconChevronRight, UILinkDirective],
+    encapsulation: ViewEncapsulation.None,
+})
+export class UIBreadcrumb implements AsInputSignal<BreadcrumbProps> {
+    readonly items = input.required<BreadcrumbProps['items']>();
+    readonly id = input<BreadcrumbProps['id']>(uniqueId('breadcrumb-'));
+    readonly scrollLimit = input<BreadcrumbProps['scrollLimit']>();
+
+    readonly shouldRender = computed(() => this.items().length >= 2);
+    readonly firstItem = computed(() => this.items()[0]);
+    readonly lastItem = computed(() => this.items()[this.items().length - 1]);
+    readonly middleItems = computed(() =>
+        this.items().length > 2 ? this.items().slice(1, this.items().length - 1) : [],
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/breadcrumb/example.ts

@@ -0,0 +1,69 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { UIBreadcrumb, BreadcrumbItem } from './';
+
+@Component({
+    selector: 'ui-breadcrumb-example',
+    standalone: true,
+    imports: [CommonModule, UIBreadcrumb],
+    template: `
+        <h2>Breadcrumb</h2>
+
+        <h3>Minimum (2 Items)</h3>
+        <p>The breadcrumb component requires at least 2 items to display</p>
+        <ui-breadcrumb [items]="minimumItems" />
+
+        <h3>5 Items</h3>
+        <p>Standard breadcrumb with 5 items</p>
+        <ui-breadcrumb [items]="fiveItems" />
+
+        <h3>With Dropdown (6+ Items)</h3>
+        <p>When more than 5 items are provided, the middle items collapse into a dropdown menu</p>
+        <ui-breadcrumb [items]="manyItems" [scrollLimit]="5" />
+
+        <h3>15 Items with Dropdown and Scroll</h3>
+        <p>The dropdown menu becomes scrollable when there are many items</p>
+        <ui-breadcrumb [items]="manyItemsExtended" [scrollLimit]="5" />
+    `,
+})
+export class UIBreadcrumbExample {
+    readonly minimumItems: BreadcrumbItem[] = [
+        { label: 'Item 1', href: 'breadcrumb/#link-1' },
+        { label: 'Item 2', href: 'breadcrumb/#link-2' },
+    ];
+
+    readonly fiveItems: BreadcrumbItem[] = [
+        { label: 'Item 1', href: 'breadcrumb/#link-1' },
+        { label: 'Item 2', href: 'breadcrumb/#link-2' },
+        { label: 'Item 3', href: 'breadcrumb/#link-3' },
+        { label: 'Item 4', href: 'breadcrumb/#link-4' },
+        { label: 'Item 5', href: 'breadcrumb/#link-5' },
+    ];
+
+    readonly manyItems: BreadcrumbItem[] = [
+        { label: 'Item 1', href: 'breadcrumb/#link-1' },
+        { label: 'Item 2', href: 'breadcrumb/#link-2' },
+        { label: 'Item 3', href: 'breadcrumb/#link-3' },
+        { label: 'Item 4', href: 'breadcrumb/#link-4' },
+        { label: 'Item 5', href: 'breadcrumb/#link-5' },
+        { label: 'Item 6', href: 'breadcrumb/#link-6' },
+    ];
+
+    readonly manyItemsExtended: BreadcrumbItem[] = [
+        { label: 'Brioche', href: 'breadcrumb/#brioche' },
+        { label: 'Whole Wheat', href: 'breadcrumb/#whole-wheat' },
+        { label: 'Sourdough', href: 'breadcrumb/#sourdough' },
+        { label: 'Rye', href: 'breadcrumb/#rye' },
+        { label: 'Multigrain', href: 'breadcrumb/#multigrain' },
+        { label: 'Baguette', href: 'breadcrumb/#baguette' },
+        { label: 'Focaccia', href: 'breadcrumb/#focaccia' },
+        { label: 'Ciabatta', href: 'breadcrumb/#ciabatta' },
+        { label: 'Pita', href: 'breadcrumb/#pita' },
+        { label: 'Naan', href: 'breadcrumb/#naan' },
+        { label: 'Flatbread', href: 'breadcrumb/#flatbread' },
+        { label: 'Pumpernickel', href: 'breadcrumb/#pumpernickel' },
+        { label: 'Cornbread', href: 'breadcrumb/#cornbread' },
+        { label: 'Indian Bread', href: 'breadcrumb/#indian-bread' },
+        { label: 'Tortilla', href: 'breadcrumb/#tortilla' },
+    ];
+}