diff --git a/README.md b/README.md index a91ca18..eae87e5 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,8 @@ -_# Next Crumb +# Next Crumb > MUI 7 Breadcrumbs with **Next.js Link** support, optional **URL-based generation**, and **SEO microdata**. Router-agnostic, zero runtime deps. + | Item | Value | Badge | |-----------------|-------------------------------------------------------------------------------------------|-------| | **GitHub repo** | [github.com/ameshkin/nextcrumbs](https://github.com/ameshkin/nextcrumbs) | — | @@ -26,9 +27,9 @@ _# Next Crumb - [Auto from URL (Next App Router)](#auto-from-url-next-app-router) - [Props](#props) - [Icon & Separator Examples](#icon--separator-examples) -- [Automated Testing](#automated-testing) - [Accessibility & SEO](#accessibility--seo) - [Dependency Checks](#dependency-checks) +- [FAQ](#faq) - [Contributing](#contributing) - [License](#license) @@ -48,7 +49,7 @@ _# Next Crumb - React **18+** - @mui/material **7+** -- (Optional) @mui/icons-material **7+** +- (Optional) @mui/icons-material **7+** for built-in icons - Next.js **13.4+** (if using Next + App Router) --- @@ -59,6 +60,303 @@ _# Next Crumb npm i @ameshkin/nextcrumbs # peer deps npm i @mui/material @mui/icons-material react react-dom +```` + +> Using pnpm or yarn? Replace `npm i` with your package manager’s command. + +--- + +## Quick Start (Next.js) + +Manual items with `next/link`: + +```tsx +"use client"; +import Link from "next/link"; +import { Breadcrumbs } from "@ameshkin/nextcrumbs"; + +export default function HeaderTrail() { + return ( + + ); +} ``` +--- + +## Auto from URL (Next App Router) + +Generate items from the current pathname: + +```tsx +"use client"; +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { Breadcrumbs, usePathBreadcrumbs } from "@ameshkin/nextcrumbs"; + +export default function AutoTrail() { + const pathname = usePathname(); + const items = usePathBreadcrumbs(pathname, { + baseHref: "/", + labelMap: { new: "Create" }, + exclude: ["_private"] + }); + + return ; +} +``` + +--- + +## Props + +### `` + +| Prop | Type | Default | Description | +| --------------- | ------------------------------------------------------ | -------------------- | ---------------------------------------------------------------- | +| `items` | `{ label: string; href?: string; icon?: ReactNode }[]` | **required** | The breadcrumb trail; last item usually has no `href`. | +| `LinkComponent` | `ElementType` | `@mui/material/Link` | Custom link component (e.g., Next.js `Link`). | +| `muiProps` | `Omit` | — | Pass-through props to MUI ``. | +| `separatorIcon` | `ReactNode` | `ChevronRightIcon` | Icon/node placed between items. | +| `homeLabel` | `string` | `"Dashboard"` | If an item’s label matches this, it gets a Home icon by default. | +| `withSchema` | `boolean` | `true` | Adds `schema.org/BreadcrumbList` microdata. | + +### `usePathBreadcrumbs(pathname, options?)` + +| Option | Type | Default | Description | +| ---------- | ----------------------- | ------- | ---------------------------------- | +| `baseHref` | `string` | `"/"` | Root href for the first crumb. | +| `labelMap` | `Record` | `{}` | Override labels by segment. | +| `exclude` | `string[]` | `[]` | Skip specific path segments. | +| `decode` | `boolean` | `true` | `decodeURIComponent` each segment. | + +--- + +## Icon & Separator Examples + +Change the separator and home icon behavior: + +```tsx +import Link from "next/link"; +import ChevronRightIcon from "@mui/icons-material/ChevronRight"; +import NavigateNextIcon from "@mui/icons-material/NavigateNext"; +import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined"; +import { Breadcrumbs } from "@ameshkin/nextcrumbs"; + +} + items={[ + { label: "Dashboard", href: "/", icon: }, + { label: "Products", href: "/products" }, + { label: "Gadgets" } + ]} +/>; +``` + +* Any MUI icon works for `separatorIcon` or per-item `icon`. +* If you set `homeLabel="Home"`, the component shows a Home icon automatically when a crumb’s label is `"Home"`. + +--- + +## Minimal AutoTrail Example + +> Simple usage with default behavior (no `labelMap`, `exclude`, or `baseHref`) + +```tsx +"use client"; +import { usePathname } from "next/navigation"; +import { Breadcrumbs, usePathBreadcrumbs } from "@ameshkin/nextcrumbs"; +import Link from "next/link"; + +export default function AutoTrail() { + const pathname = usePathname(); + const items = usePathBreadcrumbs(pathname); + + return ; +} +``` + +✅ Great for dashboards or quick scaffolded layouts. Automatically capitalizes, cleans up slugs, and converts URL segments into breadcrumb labels. + + +--- + +## Accessibility & SEO + +* Uses MUI’s accessible ``. +* Adds **schema.org** `BreadcrumbList` microdata by default (set `withSchema={false}` to disable). +* Minimal DOM/no extra wrappers (uses `display: contents` for the list wrapper). + +--- + +## Dependency Checks + +Make sure peer deps resolve cleanly: + +```bash +# in your app +npm ls @mui/material @mui/icons-material react react-dom +``` + +Optional size/security checks: + +* Size: [https://bundlephobia.com/package/@ameshkin/nextcrumbs](https://bundlephobia.com/package/@ameshkin/nextcrumbs) +* Vulnerabilities (example): `npx snyk test` or GitHub Advanced Security (CodeQL) + +--- + +## FAQ + +**Does it work with React Router?** +Yes—pass your router’s `` as `LinkComponent`. The UI is MUI; navigation is your router. + +**How do I change the last crumb’s style?** +The last item usually has no `href`. You can add conditional styles by checking `href` presence in your `items` or wrap this component with your own style logic. + +**Can I disable icons entirely?** +Yes—don’t pass `icon` and set `homeLabel` to a non-matching value. + +--- + +## Accessibility & SEO + +This component previously supported `schema.org` microdata via a `withSchema` and `withJsonLd` prop. These have been **removed** for the following reasons: + +- ⚠️ **Google no longer consistently indexes client-side microdata** (e.g. via React or `dangerouslySetInnerHTML`) unless it's rendered server-side. +- 🧼 Breadcrumb JSON-LD tags added via `