# Text Breadcrumbs

# TextBreadcrumbs

# Description

The TextBreadcrumbs component is used as a navigational container that aggregates multiple TextBreadcrumb components. It displays a series of navigational links (breadcrumbs) that help users understand their current location within a hierarchical structure. Use this component when you want to provide users with one-click access to higher levels in your app's navigation hierarchy.

# Usage

Instantiate TextBreadcrumbs using the static helper method from Tesserae.UI. Chain the Items() method to add individual TextBreadcrumb elements. The component supports method chaining and fluent interface conventions.

using System;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;

public class BreadcrumbsExample : IComponent
{
    public HTMLElement Render()
    {
        // A simple message element to display selected breadcrumb text
        var message = TextBlock("Selected: ").SetContent(TextBlock());
        
        // Create a TextBreadcrumbs container and add several breadcrumbs
        var breadcrumbs = TextBreadcrumbs()
            .Items(
                TextBreadcrumb("Home").OnClick((s, e) => Console.WriteLine("Home clicked")),
                TextBreadcrumb("Products").OnClick((s, e) => Console.WriteLine("Products clicked")),
                TextBreadcrumb("Electronics").OnClick((s, e) => Console.WriteLine("Electronics clicked"))
            );
        
        return Stack().Children(message, breadcrumbs).Render();
    }
}

# Methods

Clear()
Clears all the child breadcrumb elements from the container.
Parameters: None.
Replace(TextBreadcrumb newComponent, TextBreadcrumb oldComponent)
Replaces an existing breadcrumb with a new one in the container.
Parameters:
- newComponent: The new TextBreadcrumb component to be added.
- oldComponent: The existing TextBreadcrumb component to be replaced.
Add(TextBreadcrumb component)
Adds a new TextBreadcrumb element to the container.
Parameters:
- component: The TextBreadcrumb to be added.
Items(params TextBreadcrumb[] children)
Adds multiple TextBreadcrumb items at once to the container.
Parameters:
- children: A variable number of TextBreadcrumb components.
Render()
Renders the HTML element of the TextBreadcrumbs container.
Parameters: None.
Returns: HTMLElement.

# Properties

Size (TextSize)
Gets or sets the text size by adding or removing appropriate CSS classes.
Type: TextSize
Default: TextSize.Small
Weight (TextWeight)
Gets or sets the text weight by manipulating CSS classes.
Type: TextWeight
Default: TextWeight.Regular
TextAlign (TextAlign)
Provides text alignment settings. This property is available but not implemented in the current version.
Type: TextAlign
Foreground (string)
Gets or sets the foreground color of the breadcrumbs container by directly manipulating its style.
Type: string

# Samples

# Basic Breadcrumbs Usage

This sample demonstrates how to create a TextBreadcrumbs container with a series of TextBreadcrumbs items. Each TextBreadcrumb fires an event on click that can be used to update UI or perform custom logic.

using System;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;

public class BasicBreadcrumbsSample : IComponent
{
    public HTMLElement Render()
    {
        var msg = TextBlock("Selected: ").SetContent(TextBlock());

        // Create a breadcrumbs container with several breadcrumb items.
        var breadcrumbs = TextBreadcrumbs()
            .MaxWidth(100.percent())
            .PaddingTop(16.px())
            .PB(16)
            .Items(
                TextBreadcrumb("Home").OnClick((s, e) => msg.Text("Home")),
                TextBreadcrumb("About").OnClick((s, e) => msg.Text("About")),
                TextBreadcrumb("Contact").OnClick((s, e) => msg.Text("Contact"))
            );

        return Stack().Children(msg, breadcrumbs).Render();
    }
}

# Text Breadcrumbs