Skip to main content

Breadcrumb Component Usage Guide

_Breadcrumb

Overview​

The _Breadcrumb.cshtml is a reusable Razor component that displays a navigation breadcrumb trail using Bootstrap's breadcrumb component.

Model Structure​

The component expects a List<(string Name, string Url)> model where each item contains:

  • Name: The display text for the breadcrumb item
  • Url: The URL link for the breadcrumb item

Basic Usage​

In a Controller​

public IActionResult MyPage()
{
    var breadcrumb = new List<(string, string)>
    {
        ("Home", "/"),
        ("Section", "/section"),
        ("Subsection", "/section/subsection"),
        ("Current Page", "")  // Empty URL for current page (active)
    };

    return View(breadcrumb);
}

In a View (Razor Page)​

@model List<(string Name, string Url)>
@{
    ViewData["Title"] = "My Page";
}

<partial name="_Breadcrumb" model="Model" />

Example Implementation​

@{
    var breadcrumb = new List<(string, string)>
    {
        ("الرئيسية", "/"),
        ("إدارة القضايا", "/cases"),
        ("تفاصيل القضية", "/cases/123")
    };
}
<partial name="_Breadcrumb" model="breadcrumb" />

Features​

  • RTL Support: Automatically displays breadcrumbs from right to left
  • Active State: The last item in the list is automatically marked as active (non-clickable)
  • Responsive: Hidden on mobile devices (d-none d-sm-flex), visible on small screens and above
  • Custom Styling: Links use #54565B color, active item uses #9DA4AE

Notes​

  • The breadcrumb uses Bootstrap's breadcrumb component with aria-label="breadcrumb" for accessibility
  • The separator between items is > (defined by --bs-breadcrumb-divider)
  • The last item should typically have an empty URL or the current page URL to indicate it's the active location