Breadcrumb

Displays the path to the current resource using a hierarchy of links.

import { Component } from '@angular/core';
import {
    HlmBreadcrumbDirective,
    HlmBreadcrumbEllipsisComponent,
    HlmBreadcrumbItemDirective,
    HlmBreadcrumbLinkDirective,
    HlmBreadcrumbListDirective,
    HlmBreadcrumbPageDirective,
    HlmBreadcrumbSeparatorComponent,
} from '@spartan-ng/ui-breadcrumb-helm';
import { BrnMenuTriggerDirective } from '@spartan-ng/brain/menu';
import { HlmMenuComponent, HlmMenuItemDirective } from '@spartan-ng/ui-menu-helm';

@Component({
    selector: 'spartan-breadcrumb-preview',
    standalone: true,
    imports: [
        HlmBreadcrumbDirective,
        HlmBreadcrumbSeparatorComponent,
        HlmBreadcrumbEllipsisComponent,
        HlmBreadcrumbListDirective,
        HlmBreadcrumbItemDirective,
        HlmBreadcrumbPageDirective,
        HlmBreadcrumbLinkDirective,

        BrnMenuTriggerDirective,
        HlmMenuComponent,
        HlmMenuItemDirective,
    ],
    template: `
        <nav hlmBreadcrumb>
            <ol hlmBreadcrumbList>
                <li hlmBreadcrumbItem>
                    <a hlmBreadcrumbLink link="/home">Home</a>
                </li>
                <li hlmBreadcrumbSeparator></li>
                <li hlmBreadcrumbItem>
                    <hlm-breadcrumb-ellipsis class="h-4 w-4" [brnMenuTriggerFor]="breadcrumbDropdown" />
                    <ng-template #breadcrumbDropdown>
                        <hlm-menu>
                            <button hlmMenuItem id="document">
                                <span>Documentation</span>
                            </button>
                            <button hlmMenuItem id="themes">
                                <span>Themes</span>
                            </button>
                            <button hlmMenuItem id="github">
                                <span>Github</span>
                            </button>
                        </hlm-menu>
                    </ng-template>
                </li>
                <li hlmBreadcrumbSeparator></li>
                <li hlmBreadcrumbItem>
                    <a hlmBreadcrumbLink hlmL link="/components">Components</a>
                </li>
                <li hlmBreadcrumbSeparator></li>
                <li hlmBreadcrumbItem>
                    <span hlmBreadcrumbPage>Breadcrumb</span>
                </li>
            </ol>
        </nav>
    `,
})
export class BreadcrumbPreviewComponent {}

Installation

npx nx g @spartan-ng/cli:ui breadcrumb

Usage

import {
    HlmBreadcrumbDirective,
    HlmBreadcrumbEllipsisComponent,
    HlmBreadcrumbItemDirective,
    HlmBreadcrumbLinkDirective,
    HlmBreadcrumbListDirective,
    HlmBreadcrumbPageDirective,
    HlmBreadcrumbSeparatorComponent,
} from '@spartan-ng/ui-breadcrumb-helm';

<nav hlmBreadcrumb>
    <ol hlmBreadcrumbList>
        <li hlmBreadcrumbItem>
            <a hlmBreadcrumbLink href="/home">Home</a>
        </li>
        <li hlmBreadcrumbSeparator></li>
        <li hlmBreadcrumbItem>
            <hlm-breadcrumb-ellipsis />
        </li>
        <li hlmBreadcrumbSeparator></li>
        <li hlmBreadcrumbItem>
            <a hlmBreadcrumbLink hlmL href="/components">Components</a>
        </li>
        <li hlmBreadcrumbSeparator></li>
        <li hlmBreadcrumbItem>
            <span hlmBreadcrumbPage>Breadcrumb</span>
        </li>
    </ol>
</nav>

Examples

Custom separator

Use a custom component as children for HlmBreadcrumbSeparator to create a custom separator.

import { Component } from '@angular/core';
import { lucideSlash } from '@ng-icons/lucide';
import {
    HlmBreadcrumbDirective,
    HlmBreadcrumbItemDirective,
    HlmBreadcrumbLinkDirective,
    HlmBreadcrumbListDirective,
    HlmBreadcrumbPageDirective,
    HlmBreadcrumbSeparatorComponent,
} from '@spartan-ng/ui-breadcrumb-helm';
import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';

@Component({
    selector: 'spartan-breadcrumb-custom-separator',
    standalone: true,
    providers: [provideIcons({ lucideSlash })],
    imports: [
        HlmBreadcrumbDirective,
        HlmBreadcrumbSeparatorComponent,
        HlmBreadcrumbListDirective,
        HlmBreadcrumbItemDirective,
        HlmBreadcrumbPageDirective,
        HlmBreadcrumbLinkDirective,

        HlmIconComponent,
    ],
    template: `
        <nav hlmBreadcrumb>
            <ol hlmBreadcrumbList>
                <li hlmBreadcrumbItem>
                    <a hlmBreadcrumbLink link="/home">Home</a>
                </li>
                <li hlmBreadcrumbSeparator>
                    <hlm-icon name="lucideSlash" class="h-4 w-4" />
                </li>
                <li hlmBreadcrumbItem>
                    <a hlmBreadcrumbLink hlmL link="/components">Components</a>
                </li>
                <li hlmBreadcrumbSeparator>
                        <hlm-icon name="lucideSlash" class="h-4 w-4" />
                </li>
                <li hlmBreadcrumbItem>
                    <span hlmBreadcrumbPage>Breadcrumb</span>
                </li>
            </ol>
        </nav>
    `,
})
export class BreadcrumbCustomSeparatorComponent {}

import { lucideSlash } from '@ng-icons/lucide';
import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';

...

<nav hlmBreadcrumb>
    <ol hlmBreadcrumbList>
        <li hlmBreadcrumbItem>
            <a hlmBreadcrumbLink link="/home">Home</a>
        </li>
        <li hlmBreadcrumbSeparator>
            <hlm-icon name="lucideSlash" class="h-4 w-4" />
        </li>
        <li hlmBreadcrumbItem>
            <a hlmBreadcrumbLink hlmL link="/components">Components</a>
        </li>
        <li hlmBreadcrumbSeparator>
                <hlm-icon name="lucideSlash" class="h-4 w-4" />
        </li>
        <li hlmBreadcrumbItem>
            <span hlmBreadcrumbPage>Breadcrumb</span>
        </li>
    </ol>
</nav>

Dropdown

You can compose HlmBreadcrumbItem for HlmDropdownMenu to create a custom separator.

import { Component } from '@angular/core';
import { lucideChevronDown, lucideSlash } from '@ng-icons/lucide';
import {
    HlmBreadcrumbDirective,
    HlmBreadcrumbItemDirective,
    HlmBreadcrumbLinkDirective,
    HlmBreadcrumbListDirective,
    HlmBreadcrumbPageDirective,
    HlmBreadcrumbSeparatorComponent,
} from '@spartan-ng/ui-breadcrumb-helm';
import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
import { BrnMenuTriggerDirective } from '@spartan-ng/brain/menu';
import { HlmMenuComponent, HlmMenuItemDirective } from '@spartan-ng/ui-menu-helm';

@Component({
    selector: 'spartan-breadcrumb-dropdown',
    standalone: true,
    providers: [provideIcons({ lucideChevronDown, lucideSlash })],
    imports: [
        HlmBreadcrumbDirective,
        HlmBreadcrumbSeparatorComponent,
        HlmBreadcrumbListDirective,
        HlmBreadcrumbItemDirective,
        HlmBreadcrumbPageDirective,
        HlmBreadcrumbLinkDirective,

        HlmIconComponent,
        BrnMenuTriggerDirective,
        HlmMenuComponent,
        HlmMenuItemDirective,
    ],
    template: `
        <nav hlmBreadcrumb>
            <ol hlmBreadcrumbList>
                <li hlmBreadcrumbItem>
                    <a hlmBreadcrumbLink link="/home">Home</a>
                </li>
                <li hlmBreadcrumbSeparator>
                        <hlm-icon name="lucideSlash" class="h-4 w-4" />
                </li>
                <li hlmBreadcrumbItem [brnMenuTriggerFor]="breadcrumbDropdown">
                    <div class="flex items-center gap-1">
                        Components
                        <hlm-icon name="lucideChevronDown" class="h-4 w-4" />
                    </div>
                    <ng-template #breadcrumbDropdown>
                        <hlm-menu>
                            <button hlmMenuItem id="document">
                                <span>Documentation</span>
                            </button>
                            <button hlmMenuItem id="themes">
                                <span>Themes</span>
                            </button>
                            <button hlmMenuItem id="github">
                                <span>Github</span>
                            </button>
                        </hlm-menu>
                    </ng-template>
                </li>
                <li hlmBreadcrumbSeparator>
                        <hlm-icon name="lucideSlash" class="h-4 w-4" />
                </li>
                <li hlmBreadcrumbItem>
                    <span hlmBreadcrumbPage>Breadcrumb</span>
                </li>
            </ol>
        </nav>
    `,
})
export class BreadcrumbDropdownComponent {}

import { lmBreadcrumbEllipsisComponent } from '@spartan-ng/ui-breadcrumb-helm';

...

<nav hlmBreadcrumb>
    <ol hlmBreadcrumbList>
        {/*  ...  */}
        <li hlmBreadcrumbItem>
            <hlm-breadcrumb-ellipsis />
        </li>
        {/*  ...  */}
    </ol>
</nav>

Collapsed

We provide a BreadcrumbEllipsis component to show a collapsed state when the breadcrumb is too long.

import { Component } from '@angular/core';
import {
    HlmBreadcrumbDirective,
    HlmBreadcrumbEllipsisComponent,
    HlmBreadcrumbItemDirective,
    HlmBreadcrumbLinkDirective,
    HlmBreadcrumbListDirective,
    HlmBreadcrumbPageDirective,
    HlmBreadcrumbSeparatorComponent,
} from '@spartan-ng/ui-breadcrumb-helm';

@Component({
    selector: 'spartan-breadcrumb-collapsed',
    standalone: true,
    imports: [
        HlmBreadcrumbDirective,
        HlmBreadcrumbSeparatorComponent,
        HlmBreadcrumbEllipsisComponent,
        HlmBreadcrumbListDirective,
        HlmBreadcrumbItemDirective,
        HlmBreadcrumbPageDirective,
        HlmBreadcrumbLinkDirective,
    ],
    template: `
        <nav hlmBreadcrumb>
            <ol hlmBreadcrumbList>
                <li hlmBreadcrumbItem>
                    <a hlmBreadcrumbLink link="/home">Home</a>
                </li>
                <li hlmBreadcrumbSeparator></li>
                <li hlmBreadcrumbItem>
                    <hlm-breadcrumb-ellipsis />
                </li>
                <li hlmBreadcrumbSeparator></li>
                <li hlmBreadcrumbItem>
                    <a hlmBreadcrumbLink link="/components">Components</a>
                </li>
                <li hlmBreadcrumbSeparator></li>
                <li hlmBreadcrumbItem>
                    <span hlmBreadcrumbPage>Breadcrumb</span>
                </li>
            </ol>
        </nav>
    `,
})
export class BreadcrumbCollapsedComponent {}

import { lmBreadcrumbEllipsisComponent } from '@spartan-ng/ui-breadcrumb-helm';

...

<nav hlmBreadcrumb>
    <ol hlmBreadcrumbList>
        {/*  ...  */}
        <li hlmBreadcrumbItem>
            <hlm-breadcrumb-ellipsis />
        </li>
        {/*  ...  */}
    </ol>
</nav>

Button

Badge

Components are in alpha

Getting Started

Stack

UI

Components