Navigation — Blazify

Breadcrumbs

Three ready-made separators; only Separator changes.

razor

@using BzCore.Components.Navigation
@using BzCore.Enums

<BzBreadcrumbs Items="crumbs" Separator="BzBreadcrumbSeparator.Chevron" />
<BzBreadcrumbs Items="crumbs" Separator="BzBreadcrumbSeparator.Slash" />
<BzBreadcrumbs Items="crumbs" Separator="BzBreadcrumbSeparator.Arrow" />

@code {
    // BzBreadcrumbItem(text, href, icon?)
    List<BzBreadcrumbItem> crumbs = new()
    {
        new("خانه", "/", "fa-solid fa-house"),
        new("کامپوننت ها", "/components"),
        new("ناوبری", null),      // last one has no link
    };
}

Navbar — 10 variants

A site top bar with three areas: Brand, ChildContent and End. Every variant shares one snippet; only Variant changes.

Solid Light Dark Gradient Glass Bordered Elevated Minimal Accent Centered

razor

@using BzCore.Components.Navigation
@using BzCore.Components.Button
@using BzCore.Enums

<BzNavbar Variant="BzNavbarVariant.Glass" Sticky="true">
    <Brand><i class="fa-solid fa-cube"></i> بلیزی فای</Brand>
    <ChildContent>
        <BzMenu Items="navItems" Variant="BzMenuVariant.Underline" />
    </ChildContent>
    <End>
        <BzButton Size="BzSize.Small" Text="ورود" Variant="BzButtonVariant.Outlined" />
    </End>
</BzNavbar>

@code {
    List<BzMenuItem> navItems = new()
    {
        new() { Text = "خانه", Href = "/" },
        new() { Text = "کامپوننت ها", Href = "/components" },
        new() { Text = "مستندات", Href = "/docs" },
    };
}

@* Navbar and Menu each ship 10 variants -- swap Variant to try them. *@

Menu with a dropdown

Any BzMenuItem can carry Children to become a dropdown.

razor

@using BzCore.Components.Navigation
@using BzCore.Enums

<BzMenu Items="menuWithDropdown" Variant="BzMenuVariant.Pills" />

@code {
    List<BzMenuItem> menuWithDropdown = new()
    {
        new() { Text = "خانه", Href = "/", Icon = "fa-solid fa-house" },
        new()
        {
            Text = "محصولات",
            Icon = "fa-solid fa-box",
            Children = new()      // having Children turns it into a dropdown
            {
                new() { Text = "کامپوننت ها", Href = "/components" },
                new() { Text = "قالب ها", Href = "/templates" },
            }
        },
        new() { Text = "تماس", Href = "/contact" },
    };
}

FloatingBox

A floating corner button — look at the bottom start corner.

Look at the bottom of the page; the support button lives there.

razor

@using BzCore.Components.Navigation
@using BzCore.Components.Button
@using BzCore.Enums

@* Put this once per page -- it pins itself to a corner of the viewport. *@
<BzFloatingBox Icon="fa-solid fa-headset"
               Title="پشتیبانی"
               Position="BzFloatingPosition.BottomStart">
    <p style="margin:0 0 .75rem">چطور میتونیم کمک کنیم؟</p>
    <BzButton Text="شروع گفتگو" Color="BzColor.Primary" FullWidth />
</BzFloatingBox>

@*
Position: BottomEnd (default) | BottomStart | TopEnd | TopStart
OpenIcon  -- the icon shown while it is open (default: fa-xmark)
@bind-Open -- control it from your own code
*@