Components

Breadcrumbs

The trail from the top of the app to the page being shown. Every step but the last is a link; the last is the page itself, in grey.

Drawn and behaving as Flux UI's breadcrumbs does, measured against its live docs.

Breadcrumbs

A chevron between the steps, and none after the last.

BreadcrumbsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BreadcrumbsExample : Component
{
    protected override Component? Render() =>
        Ui.Breadcrumbs[
            Ui.BreadcrumbsItem.Key("home").Href("#")["Home"],
            Ui.BreadcrumbsItem.Key("blog").Href("#")["Blog"],
            Ui.BreadcrumbsItem.Key("post")["Post"]
        ];
}

Live result

With slashes

Separator(Ui.IconName.Slash) on each step.

BreadcrumbsSlashesExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BreadcrumbsSlashesExample : Component
{
    protected override Component? Render() =>
        Ui.Breadcrumbs[
            Ui.BreadcrumbsItem.Key("home").Href("#").Separator(Ui.IconName.Slash)["Home"],
            Ui.BreadcrumbsItem.Key("blog").Href("#").Separator(Ui.IconName.Slash)["Blog"],
            Ui.BreadcrumbsItem.Key("post").Separator(Ui.IconName.Slash)["Post"]
        ];
}

Live result

Icon

An icon in place of a step's words.

BreadcrumbsIconExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BreadcrumbsIconExample : Component
{
    protected override Component? Render() =>
        Ui.Breadcrumbs[
            Ui.BreadcrumbsItem.Key("home").Href("#").Icon(Ui.IconName.Home),
            Ui.BreadcrumbsItem.Key("blog").Href("#")["Blog"],
            Ui.BreadcrumbsItem.Key("post")["Post"]
        ];
}

Live result

With ellipsis

Steps folded away under an ellipsis.

BreadcrumbsEllipsisExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BreadcrumbsEllipsisExample : Component
{
    protected override Component? Render() =>
        Ui.Breadcrumbs[
            Ui.BreadcrumbsItem.Key("home").Href("#").Icon(Ui.IconName.Home),
            Ui.BreadcrumbsItem.Key("more").Icon(Ui.IconName.EllipsisHorizontal),
            Ui.BreadcrumbsItem.Key("post")["Post"]
        ];
}

Live result

With ellipsis dropdown

The folded steps in a menu: a dropdown is a step's child like any other.

BreadcrumbsDropdownExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class BreadcrumbsDropdownExample : Component
{
    protected override Component? Render() =>
        Ui.Breadcrumbs[
            Ui.BreadcrumbsItem.Key("home").Href("#").Icon(Ui.IconName.Home),
            Ui.BreadcrumbsItem.Key("more")[
                Ui.Dropdown[
                    Ui.Button.Ghost.Sm.Icon(Ui.IconName.EllipsisHorizontal).AriaLabel("The folded steps"),
                    Ui.Navmenu[
                        Ui.NavmenuItem.Href("#")["Client"],
                        Ui.NavmenuItem.Href("#")["Team"],
                        Ui.NavmenuItem.Href("#")["User"]
                    ]
                ]
            ],
            Ui.BreadcrumbsItem.Key("post")["Post"]
        ];
}

Live result

Behaviour

Links, and the page you are on

A step with an Href is a link; one without is plain, greyed text, because the page being shown is not a link to itself. A generated route navigates inside the app under its path base, and a string is an ordinary link written as given. The trail itself is a plain <div>, as Flux's is.

The separator

Each step draws the separator after it: a chevron that turns with the reading direction, so it points the right way in a right-to-left page, and is not drawn after the last step. Separator(Ui.IconName.Slash) is Flux's other one, and any icon will do.

What a step can hold

A step's words are its children, and an Icon can stand in for them. Anything else goes in as a child too, which is how a dropdown holding the folded-away steps goes in: Ui.BreadcrumbsItem[Ui.Dropdown[Ui.Button.Ghost.Sm.Icon(Ui.IconName.EllipsisHorizontal), Ui.Navmenu[…]]].

Reference

`Ui.Breadcrumbs`

flux:breadcrumbs

The trail from the top of the app to the page being shown.

No steps of its own: what goes inside it is its content.

`Ui.BreadcrumbsItem`

flux:breadcrumbs.item

One step, and the separator after it. Its children are its words.

Step	Takes	What it does
`.Href(…)`	a route, or a URL string	Where it goes. Without one the step is greyed text: the page being shown.
`.Icon(…)`	`Ui.IconName` — one of 317 names	An icon before the words, or in place of them.
`.IconVariant(…)`	`Ui.IconVariant` Outline Solid Mini Micro Each is a step of its own too, unless an HTML tag has its name.	Which drawing of the icon. Mini when unset.
`.Separator(…)`	`Ui.IconName` — one of 317 names	The icon drawn after the step. A chevron when unset; Slash is Flux's other one.