Breadcrumb

Renders a navigation trail with animated breadcrumb items. Items appear with a staggered animation effect. Use for indicating a user's location within a website hierarchy.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/breadcrumb

npx layro-cli add @educlopez/breadcrumb

npx layro-cli add @educlopez/breadcrumb

bunx layro-cli add @educlopez/breadcrumb

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import { cn } from "@/lib/utils";
import { ChevronRight } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import type { ReactNode } from "react";
import { SPRING_DEFAULT } from "@/components/smoothui/lib/animation";

/** A single breadcrumb item definition. */
export type BreadcrumbItemProps = {
  /** Display label for the breadcrumb item. */
  label: ReactNode;
  /** URL the breadcrumb links to. Omit for the current (last) page. */
  href?: string;