Tesserae - Breadcrumb

Description

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.

Usage

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:

breadcrumb-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new BreadcrumbExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    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();
        }
    }
}

API reference

class

Breadcrumb

public class Breadcrumb : IComponent, IContainer<Breadcrumb, IComponent>

A navigational trail showing the user's position within a hierarchy of pages or sections.

Constructors

Properties

Methods

Samples

This sample demonstrates a deep breadcrumb hierarchy with click handlers. Each click updates the "Selected" label so you can verify event handling.

breadcrumb-2-sample.js

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            document.body.style.overflow = "hidden";
            MountCenteredToBody(new BasicBreadcrumbSample());
        }
    }

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

            return Stack().Children(
                Label("Selected: ").SetContent(msg).PB(8),
                Breadcrumb().Items(
                    Crumb("Home").OnClick((s, e) => msg.Text("Home")),
                    Crumb("Documents").OnClick((s, e) => msg.Text("Documents")),
                    Crumb("Projects").OnClick((s, e) => msg.Text("Projects")),
                    Crumb("Tesserae").OnClick((s, e) => msg.Text("Tesserae")),
                    Crumb("Samples").OnClick((s, e) => msg.Text("Samples")),
                    Crumb("Breadcrumb")
                )
            ).Render();
        }
    }
}

With a constrained MaxWidth, the breadcrumb collapses extra levels behind an overflow menu. Here we also swap the default separator for a custom chevron and pin the overflow to start after the first item.

breadcrumb-3-sample.js

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            document.body.style.overflow = "hidden";
            MountCenteredToBody(new CollapsedBreadcrumbSample());
        }
    }

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

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

A compact breadcrumb uses Small() for tighter spacing and accepts any UIcons value as separator. The last item omits the click handler so it acts as a non-interactive current-page marker.

breadcrumb-4-sample.js

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            document.body.style.overflow = "hidden";
            MountCenteredToBody(new SmallBreadcrumbSample());
        }
    }

    public class SmallBreadcrumbSample : IComponent
    {
        public HTMLElement Render()
        {
            var msg = TextBlock("(none)");

            return Stack().Children(
                Label("Selected: ").SetContent(msg).PB(8),
                Breadcrumb().Small().SetChevron(UIcons.AngleRight).Items(
                    Crumb("Resources").OnClick((s, e) => msg.Text("Resources")),
                    Crumb("Icons").OnClick((s, e) => msg.Text("Icons")),
                    Crumb("UIcons")
                )
            ).Render();
        }
    }
}

Description

Usage

API reference

Samples

See also

Referenced by

Breadcrumb

Description

Usage

API reference

Constructors

Breadcrumb

Properties

Breadcrumb.MaximumItemsToDisplay

Breadcrumb.OverflowIndex

Breadcrumb.IsSmall

Methods

Breadcrumb.Clear

Breadcrumb.Replace

Breadcrumb.Add

Breadcrumb.Items

Breadcrumb.DisableSizeCache

Breadcrumb.SetOverflowIndex

Breadcrumb.SetChevron

Breadcrumb.Small

Breadcrumb.Render

Samples

Deep Breadcrumb with Click Events

Collapsed Breadcrumb with Custom Chevron

Small Breadcrumb with Custom Separator

See also

Referenced by