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' },
      ]}
    />
  );
}

ImportCopy Anchor Link

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

When to useCopy Anchor Link

• Deep hierarchies — catalog → category → product, settings → account → security. Users get back to a higher level in one click.
• Place it above the page title, before the content.
• Skip it on flat sites — "Home → Current" alone adds little.
• Not for steps. To show a sequential process, use Stepper.

ItemsCopy Anchor Link

items is a list of { label, href?, icon?, onClick? }. The last item is the current page: it is not a link and gets aria-current="page". An item with onClick but no href renders as a button.

CollapsingCopy Anchor Link

When there are more than maxItems: first + … + the last maxItems - 2 (at least 1). Clicking … opens the hidden pages in a DropdownMenu.

'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' },
      ]}
    />
  );
}

On phones (< 640px) the trail automatically collapses to … + parent + current. This is done with a CSS breakpoint, so there is no SSR hydration mismatch. Long labels are truncated (links at 20ch, the current page at 32ch).

Separator and sizeCopy Anchor Link

separator accepts any ReactNode (default — a › chevron). size="sm" uses 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 LinkCopy Anchor Link

renderLink replaces <a> with your own link component. It is used inside the overflow menu too.

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

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

PropsCopy Anchor Link

Other <nav> attributes are passed through.

Data attributesCopy Anchor Link

AccessibilityCopy Anchor Link

• Structure. <nav aria-label="Sahifa yo'li"> wraps an ordered <ol> list.
• The current page is not a link and is marked with aria-current="page".
• Separators are decorative — aria-hidden, screen readers skip them.
• The … button has aria-label="Yashirilgan sahifalar" and aria-haspopup="menu". Enter / Space opens it, ↑ ↓ move through items, Esc closes it and returns focus to the button.
• The phone layout hides items with CSS (display: none), so screen readers only read what is visible.