مسیر صفحه

<Breadcrumb items={[
{ label: "خانه", href: "/", icon: <HomeIcon />, hideLabel: true },
{ label: "تنظیمات", href: "/settings" },
{ label: "امنیت" },
]} />

<nav class="k-breadcrumb" aria-label="مسیر">
  <ol>
    <li><a class="k-breadcrumb__link k-breadcrumb__link--icon" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" data-kashi-icon="home"><path d="M3.25 9.1c0-.75.35-1.45.95-1.9l4.6-3.6a2 2 0 0 1 2.4 0l4.6 3.6c.6.45.95 1.15.95 1.9v5.15a3 3 0 0 1-3 3h-7.5a3 3 0 0 1-3-3ZM10 13.25v4"/></svg><span class="k-sr-only">خانه</span></a></li>
    <li><a class="k-breadcrumb__link" href="#" title="تنظیمات"><span class="k-breadcrumb__text">تنظیمات</span></a></li>
    <li><span class="k-breadcrumb__link" aria-current="page" title="امنیت"><span class="k-breadcrumb__text">امنیت</span></span></li>
  </ol>
</nav>

<Breadcrumb maxItems={3} items={[
{ label: "خانه", href: "/", icon: <HomeIcon />, hideLabel: true },
{ label: "پروژه‌ها", href: "/projects" },
{ label: "فروشگاه آنلاین", href: "/projects/shop" },
{ label: "تنظیمات", href: "/projects/shop/settings" },
{ label: "امنیت و ورود دو مرحله‌ای" },
]} />

<Breadcrumb separator="slash" items={[…]} />

<nav class="k-breadcrumb k-breadcrumb--slash" aria-label="مسیر">
  <ol>
    <li><a class="k-breadcrumb__link" href="#" title="داشبورد"><span class="k-breadcrumb__text">داشبورد</span></a></li>
    <li><a class="k-breadcrumb__link" href="#" title="گزارش‌ها"><span class="k-breadcrumb__text">گزارش‌ها</span></a></li>
    <li><span class="k-breadcrumb__link" aria-current="page" title="فروش آبان"><span class="k-breadcrumb__text">فروش آبان</span></span></li>
  </ol>
</nav>