Breadcrumb

'use client';

import { Breadcrumb } from '@akhatmirzo/ui';
import { House } from 'lucide-react';

export default function BreadcrumbBasic() {
  return (
    <Breadcrumb
      items={[
        { label: 'Bosh sahifa', href: '#', icon: <House /> },
        { label: 'Mahsulotlar', href: '#mahsulotlar' },
        { label: 'Telefonlar', href: '#telefonlar' },
        { label: 'iPhone 17' },
      ]}
    />
  );
}

ImportBo'lim havolasini nusxalash

import { Breadcrumb } from '@akhatmirzo/ui';

Qachon ishlatishBo'lim havolasini nusxalash

• Chuqur ierarxiya — katalog → kategoriya → mahsulot, sozlamalar → hisob → xavfsizlik. Foydalanuvchi bir bosishda yuqori darajaga qaytadi.
• Sahifa sarlavhasi ustida, kontentdan oldin qo'ying.
• Bir darajali saytda kerak emas — faqat "Bosh sahifa → Joriy" bo'lsa, foyda kam.
• Qadamlar uchun emas. Ketma-ket jarayonni ko'rsatish uchun Stepper dan foydalaning.

ElementlarBo'lim havolasini nusxalash

items — { label, href?, icon?, onClick? } ro'yxati. Oxirgi element — joriy sahifa: havola bo'lmaydi va aria-current="page" oladi. href siz, lekin onClick li element — tugma bo'ladi.

Yig'ishBo'lim havolasini nusxalash

maxItems dan ko'p bo'lsa: birinchi + … + oxirgi maxItems - 2 ta (kamida 1). … bosilganda yashiringan sahifalar DropdownMenu da ochiladi.

'use client';

import { Breadcrumb } from '@akhatmirzo/ui';
import { House } from 'lucide-react';

export default function BreadcrumbCollapse() {
  return (
    <Breadcrumb
      maxItems={4}
      items={[
        { label: 'Bosh sahifa', href: '#', icon: <House /> },
        { label: 'Katalog', href: '#katalog' },
        { label: 'Elektronika', href: '#elektronika' },
        { label: 'Telefonlar', href: '#telefonlar' },
        { label: 'Apple', href: '#apple' },
        { label: 'iPhone 17 Pro Max 256 GB' },
      ]}
    />
  );
}

Telefonda (< 640px) yo'l avtomatik … + ota + joriy ko'rinishiga tushadi. Bu CSS breakpoint bilan qilinadi — SSR'da hydration farqi bo'lmaydi. Uzun nomlar qisqartiriladi (havolalar 20ch, joriy sahifa 32ch).

Separator va o'lchamBo'lim havolasini nusxalash

separator — istalgan ReactNode (standart — chevron ›). size="sm" — text-xs.

'use client';

import { Breadcrumb } from '@akhatmirzo/ui';

const items = [
  { label: 'Sozlamalar', href: '#' },
  { label: 'Hisob', href: '#hisob' },
  { label: 'Xavfsizlik' },
];

export default function BreadcrumbSeparator() {
  return (
    <div className="flex flex-col items-start gap-4">
      <Breadcrumb items={items} separator="/" />
      <Breadcrumb items={items} size="sm" />
    </div>
  );
}

Next.js LinkBo'lim havolasini nusxalash

renderLink — <a> o'rniga o'z havola komponentingiz. U yig'ilgan menyu ichida ham ishlatiladi.

import Link from 'next/link';
import { Breadcrumb } from '@akhatmirzo/ui';

<Breadcrumb
  items={[
    { label: 'Bosh sahifa', href: '/' },
    { label: 'Mahsulotlar', href: '/products' },
    { label: 'iPhone 17' },
  ]}
  renderLink={(props) => <Link {...props} />}
/>;

PropsBo'lim havolasini nusxalash

Qolgan <nav> atributlari ham qabul qilinadi.

Data atributlariBo'lim havolasini nusxalash

AccessibilityBo'lim havolasini nusxalash

• Tuzilish. <nav aria-label="Sahifa yo'li"> ichida tartiblangan <ol> ro'yxat.
• Joriy sahifa havola emas, aria-current="page" bilan belgilanadi.
• Separator bezak — aria-hidden, ekran o'quvchi uni o'qimaydi.
• … tugmasi — aria-label="Yashirilgan sahifalar", aria-haspopup="menu". Enter / Space bilan ochiladi, ↑ ↓ bilan yuriladi, Esc yopadi va fokusni tugmaga qaytaradi.
• Telefon ko'rinishi CSS bilan yashiriladi (display: none), shuning uchun ekran o'quvchi faqat ko'rinib turgan elementlarni o'qiydi.