amezquita design systemGet started

Patterns

Breadcrumb

Hierarchical page location trail; the last item is the current page (non-linked)

Markdown version for agents

Import
import { Breadcrumb } from '@amezquita/design-system/components/patterns/Breadcrumb'

Live render

    Props

    PropTypeDescription
    items{ label: string; href?: string }[]
    separator?React.ReactNode
    className?string
    LinkComponent?React.ElementType<{ href: string; className?: string; children?: React.ReactNode }>Component to render internal links with — pass your router's Link (e.g. next/link) to get client-side navigation. Defaults to a plain <a>, which works anywhere with a full navigation.

    Tokens

    TokenTypeValue
    --breadcrumb-current-max-widthdimension240px
    --breadcrumb-font-sizedimension14px
    --breadcrumb-item-max-widthdimension200px

    Usage example

    tsx
    <Breadcrumb
  items={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Design System' },
  ]}
/>