Breadcrumb

⟦Tráíl óf líñkš fróm thé šíté róót tó thé çúrréñt págé.~~~~~~~~~~~~~~~~~~~⟧

⟦Brówšérš~~~⟧: Chrome 123+Firefox 121+Safari 17.5+
⟦Tíér~~⟧: 0
⟦Búñdlé çómpréššéd~~~~~~⟧: 1.12 kB
⟦Fórçéd láýóút búdgét~~~~~~~⟧: 0 ms
⟦Áxé búdgét~~~~⟧: 0
⟦ŠŠR çómpátíblé~~~~~⟧: ⟦Ýéš~~⟧
⟦Búílt óñ~~~⟧: elements/details
⟦Públíšhéd çóñtráçt~~~~~~~⟧: ⟦Téšt hárñéšš~~~~~⟧

⟦Pláýgróúñd~~~~⟧

Breadcrumb

React

CSS

Tailwind

import { Breadcrumb } from "@gunkin/uiify";

export default function Example() {
  return (
    <Breadcrumb.Root className="">
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
          <Breadcrumb.Separator />
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Breadcrumb.Link current>Components</Breadcrumb.Link>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb.Root>
  );
}

@layer components {
  [data-uiify-breadcrumb] [data-part="list"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  [data-uiify-breadcrumb] [data-part="item"] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  [data-uiify-breadcrumb] [data-part="link"] {
    color: var(--primary);
    text-decoration: none;
  }

  [data-uiify-breadcrumb] [data-part="link"]:hover {
    text-decoration: underline;
  }

  [data-uiify-breadcrumb] [aria-hidden="true"] {
    color: var(--muted-foreground);
  }

  [data-uiify-breadcrumb] [data-current] {
    color: var(--foreground);
    font-weight: 600;
  }
}

import { Breadcrumb } from "@gunkin/uiify";

export default function Example() {
  return (
    <Breadcrumb.Root
      className="
        [&_[data-part=list]]:flex [&_[data-part=list]]:flex-wrap [&_[data-part=list]]:items-center
        [&_[data-part=list]]:[gap:0.5rem] [&_[data-part=list]]:list-none [&_[data-part=list]]:p-0
        [&_[data-part=list]]:m-0 [&_[data-part=item]]:flex [&_[data-part=item]]:items-center
        [&_[data-part=item]]:[gap:0.5rem] [&_[data-part=link]:where(:not([data-current]))]:text-primary
        [&_[data-part=link]]:no-underline [&_[data-part=link]:hover]:underline
        [&_[aria-hidden=true]]:text-muted-foreground [&_[data-current]]:text-foreground
        [&_[data-current]]:[font-weight:600]
      "
    >
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
          <Breadcrumb.Separator />
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Breadcrumb.Link current>Components</Breadcrumb.Link>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb.Root>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('[&_[data-part=list]]:flex [&_[data-part=list]]:flex-wrap [&_[data-part=list]]:items-center [&_[data-part=list]]:[gap:0.5rem] [&_[data-part=list]]:list-none [&_[data-part=list]]:p-0 [&_[data-part=list]]:m-0 [&_[data-part=item]]:flex [&_[data-part=item]]:items-center [&_[data-part=item]]:[gap:0.5rem] [&_[data-part=link]:where(:not([data-current]))]:text-primary [&_[data-part=link]]:no-underline [&_[data-part=link]:hover]:underline [&_[aria-hidden=true]]:text-muted-foreground [&_[data-current]]:text-foreground [&_[data-current]]:[font-weight:600]');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

⟦ÁPÍ~~⟧

`Breadcrumb.Root`

⟦Próp~~⟧	⟦Týpé~~⟧	⟦Défáúlt~~~⟧	⟦Déšçríptíóñ~~~~⟧
`aria-label`	`string`	`"Breadcrumb"`	⟦Áççéššíblé ñámé óf thé ñávígátíóñ láñdmárk.~~~~~~~~~~~~~~~~⟧
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	⟦Répláçé thé réñdéréd éléméñt whílé kéépíñg béhávíór áñd áççéššíbílítý wíríñg.~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

`Breadcrumb.List`

⟦Próp~~⟧	⟦Týpé~~⟧	⟦Défáúlt~~~⟧	⟦Déšçríptíóñ~~~~⟧
`children`	`ReactNode`	—	⟦Bréádçrúmb ítémš wríttéñ bý háñd, áš áñ áltérñátívé tó ítémš.~~~~~~~~~~~~~~~~~~~~~~⟧
`items`	`BreadcrumbItemData[]`	—	⟦Dátá-drívéñ éñtríéš, éáçh wíth á kéý, á lábél áñd áñ óptíóñál hréf áñd çúrréñt flág; réqúíréd whéñ máxÍtémš íš šét.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧
`itemsAfterCollapse`	`number`	`1`	⟦Ñúmbér óf tráílíñg ítémš képt víšíblé whéñ thé tráíl íš çóllápšéd.~~~~~~~~~~~~~~~~~~~~~~~~⟧
`itemsBeforeCollapse`	`number`	`1`	⟦Ñúmbér óf léádíñg ítémš képt víšíblé whéñ thé tráíl íš çóllápšéd.~~~~~~~~~~~~~~~~~~~~~~~⟧
`maxItems`	`number`	—	⟦Ítém çóúñt ábóvé whíçh thé míddlé óf thé tráíl çóllápšéš béhíñd áñ éxpáñdáblé éllípšíš.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧
`separator`	`ReactNode`	—	⟦Çóñtéñt réñdéréd bétwééñ ítémš whéñ thé líšt íš búílt fróm ítémš.~~~~~~~~~~~~~~~~~~~~~~~⟧
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	⟦Répláçé thé réñdéréd éléméñt whílé kéépíñg béhávíór áñd áççéššíbílítý wíríñg.~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

`Breadcrumb.Item`

⟦Próp~~⟧	⟦Týpé~~⟧	⟦Défáúlt~~~⟧	⟦Déšçríptíóñ~~~~⟧
`children`	`ReactNode`	—	⟦Çóñtéñt óf óñé bréádçrúmb líšt ítém.~~~~~~~~~~~~~⟧
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	⟦Répláçé thé réñdéréd éléméñt whílé kéépíñg béhávíór áñd áççéššíbílítý wíríñg.~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

`Breadcrumb.Link`

⟦Próp~~⟧	⟦Týpé~~⟧	⟦Défáúlt~~~⟧	⟦Déšçríptíóñ~~~~⟧
`children`	`ReactNode`	—	⟦Lábél óf thé líñk.~~~~~~~⟧
`current`	`boolean`	`false`	⟦Márkš thíš éñtrý áš thé çúrréñt págé áñd šétš áríá-çúrréñt óñ ít.~~~~~~~~~~~~~~~~~~~~~~~⟧
`href`	`string`	—	⟦Déštíñátíóñ óf thé líñk; ómít ít tó réñdér á ñóñ-ñávígátíñg éñtrý.~~~~~~~~~~~~~~~~~~~~~~~~⟧
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	⟦Répláçé thé réñdéréd éléméñt whílé kéépíñg béhávíór áñd áççéššíbílítý wíríñg.~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

`Breadcrumb.Separator`

⟦Próp~~⟧	⟦Týpé~~⟧	⟦Défáúlt~~~⟧	⟦Déšçríptíóñ~~~~⟧
`children`	`ReactNode`	`"/"`	⟦Šépárátór çóñtéñt, híddéñ fróm áššíštívé téçhñólógý.~~~~~~~~~~~~~~~~~~~⟧
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	⟦Répláçé thé réñdéréd éléméñt whílé kéépíñg béhávíór áñd áççéššíbílítý wíríñg.~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

`Breadcrumb.Ellipsis`

⟦Próp~~⟧	⟦Týpé~~⟧	⟦Défáúlt~~~⟧	⟦Déšçríptíóñ~~~~⟧

⟦Kéýbóárd~~~⟧

⟦Kéý~~⟧	⟦Áçtíóñ~~~⟧
`Tab`	⟦Móvé fóçúš tó/fróm thé çóñtról~~~~~~~~~~~⟧
`Enter` / `Space`	⟦Áçtíváté whéñ fóçúšéd (búttóñ-líké çóñtrólš)~~~~~~~~~~~~~~~~⟧

⟦Áççéššíbílítý~~~~~⟧

⟦Úšéš šémáñtíç HTML whéré póššíblé. Íñšpéçt réñdéréd márkúp íñ thé pláýgróúñd — ÁRÍÁ íš áddéd óñlý whéñ ñátívé éléméñtš áré íñšúffíçíéñt.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

⟦Štýlíñg hóókš~~~~~⟧

data-disabled

⟦Fráméwórk~~~~⟧

⟦Štýlé~~⟧

⟦Thémé~~⟧

⟦Láñgúágé~~~⟧

Breadcrumb

⟦Pláýgróúñd~~~~⟧

Breadcrumb

⟦ÁPÍ~~⟧

`Breadcrumb.Root`

`Breadcrumb.List`

`Breadcrumb.Item`

`Breadcrumb.Link`

`Breadcrumb.Separator`

`Breadcrumb.Ellipsis`

⟦Kéýbóárd~~~⟧

⟦Áççéššíbílítý~~~~~⟧

⟦Štýlíñg hóókš~~~~~⟧