# Breadcrumb

The Breadcrumb component is used to display a navigational trail, indicating the user's current page within a hierarchical structure. It is part of the Collections group and is ideal for showing navigational contexts in an application, allowing users to quickly jump back to higher level categories. Breadcrumbs are typically placed below the main navigation area to provide quick access to previous pages or sections.

Instantiate the Breadcrumb component using the static helper method from Tesserae.UI. You can add individual breadcrumb items using the fluent interface. Each breadcrumb item is created using the helper method Crumb(string text), which can be further customized with event handlers such as OnClick and Disabled.

Below is a sample code demonstrating how to create a simple Breadcrumb component with several items:

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

public class BreadcrumbExample : IComponent
{
    public HTMLElement Render()
    {
        // Message text block to show the selection result
        var msg = TextBlock();

        return Stack().Children(
            Label("Selected: ").SetContent(msg),
            Breadcrumb()
                .PaddingTop(16.px())
                .PB(16)
                .Items(
                    Crumb("Home").OnClick((s, e) => msg.Text("Home")),
                    Crumb("Products").OnClick((s, e) => msg.Text("Products")),
                    Crumb("Electronics").OnClick((s, e) => msg.Text("Electronics"))
                )
        ).Render();
    }
}

• Clear()
  • Description: Clears all child components from the breadcrumb.
  • Parameters: None.

• Replace(IComponent newComponent, IComponent oldComponent)
  • Description: Replaces an existing breadcrumb component with a new component.
  • Parameters:

  • newComponent: The component to be inserted.
  • oldComponent: The component to be replaced.

• Add(IComponent component)
  • Description: Adds a new breadcrumb item. The method automatically adds a chevron between items (if applicable).
  • Parameters:

  • component: The breadcrumb item component to add.

• Items(params IComponent[] children)
  • Description: Adds multiple breadcrumb items at once.
  • Parameters:

  • children: An array of components representing breadcrumb items.

• DisableSizeCache()
  • Description: Disables the caching of item sizes, useful if dynamic changes to content sizes are expected.
  • Parameters: None.

• SetOverflowIndex(int i)
  • Description: Sets the index at which items should collapse and be replaced by an overflow menu.
  • Parameters:

  • i: The index value indicating the point at which breadcrumbs start collapsing.

• SetChevron(UIcons icon)
  • Description: Specifies the chevron (icon) to be used as the overflow button.
  • Parameters:

  • icon: The icon (from UIcons) to replace the default chevron.

• Small()
  • Description: Applies a smaller styling to the breadcrumb items.
  • Parameters: None.

• Render()
  • Description: Renders the Breadcrumb component into an HTMLElement.
  • Parameters: None.

• MaximumItemsToDisplay
  • Type: int
  • Description: Gets or sets the maximum number of breadcrumb items to display before collapsing excess items.
  • When set, the component recalculates the layout immediately.

• OverflowIndex
  • Type: int
  • Description: Gets or sets the index at which breadcrumb items begin to collapse into an overflow group.

• IsSmall
  • Type: bool
  • Description: Determines if the breadcrumb should be rendered in its smaller variant. Setting this property adds or removes the "tss-small" class from the component.

This sample demonstrates a simple breadcrumb navigation with three items. The first item ("Home") and subsequent items are clickable, and clicking them updates a message.

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

public class BasicBreadcrumbSample : IComponent
{
    public HTMLElement Render()
    {
        var msg = TextBlock();

        return Stack().Children(
            Label("Selected: ").SetContent(msg),
            Breadcrumb()
                .PaddingTop(16.px())
                .PB(16)
                .Items(
                    Crumb("Home").OnClick((s, e) => msg.Text("Home")),
                    Crumb("About").OnClick((s, e) => msg.Text("About")),
                    Crumb("Contact").OnClick((s, e) => msg.Text("Contact"))
                )
        ).Render();
    }
}

In this sample, the breadcrumb is configured to collapse at a defined maximum width and uses a custom chevron icon. This is useful when space is limited and you want to provide an alternative overflow mechanism.

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

public class CollapsedBreadcrumbSample : IComponent
{
    public HTMLElement Render()
    {
        var msg = TextBlock();

        return Stack().Children(
            Label("Selected: ").SetContent(msg),
            Breadcrumb()
                .PaddingTop(16.px())
                .PB(16)
                .MaxWidth(300.px())
                .SetChevron(UIcons.Plane)
                .SetOverflowIndex(1)
                .Items(
                    Crumb("Dashboard").OnClick((s, e) => msg.Text("Dashboard")),
                    Crumb("Reports").OnClick((s, e) => msg.Text("Reports")),
                    Crumb("Annual").OnClick((s, e) => msg.Text("Annual")),
                    Crumb("Summary").OnClick((s, e) => msg.Text("Summary"))
                )
        ).Render();
    }
}

• Stack – A layout container useful for stacking components vertically.
• ItemsList – A collection component for displaying lists of items.