{"id":15196927,"url":"https://github.com/nutgaard/react-router-breadcrumbs","last_synced_at":"2025-10-02T12:30:56.449Z","repository":{"id":57343736,"uuid":"52206909","full_name":"nutgaard/react-router-breadcrumbs","owner":"nutgaard","description":"Breadcrumb component for react-router","archived":true,"fork":false,"pushed_at":"2020-06-01T01:15:12.000Z","size":5798,"stargazers_count":46,"open_issues_count":21,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-09-24T22:33:51.419Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nutgaard.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-21T13:07:33.000Z","updated_at":"2023-01-28T10:02:26.000Z","dependencies_parsed_at":"2022-09-12T07:00:34.791Z","dependency_job_id":null,"html_url":"https://github.com/nutgaard/react-router-breadcrumbs","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nutgaard%2Freact-router-breadcrumbs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nutgaard%2Freact-router-breadcrumbs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nutgaard%2Freact-router-breadcrumbs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nutgaard%2Freact-router-breadcrumbs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nutgaard","download_url":"https://codeload.github.com/nutgaard/react-router-breadcrumbs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219875686,"owners_count":16554701,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-28T00:21:07.858Z","updated_at":"2025-10-02T12:30:51.031Z","avatar_url":"https://github.com/nutgaard.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-router-breadcrumbs\nA react-component for creating breadcrumbs based on your current active route.\n\n[![circleci.com](https://circleci.com/gh/nutgaard/react-router-breadcrumbs/tree/master.svg?style=shield\u0026circle-token=6b1cea2c148aa465e5bd27b3c186693e4be2d4a5)](https://circleci.com/gh/nutgaard/react-router-breadcrumbs/tree/master)\n[![codecov.io](https://codecov.io/github/nutgaard/react-router-breadcrumbs/coverage.svg?branch=master)](https://codecov.io/github/nutgaard/react-router-breadcrumbs?branch=master)\n[![Dependency Status](https://david-dm.org/nutgaard/react-router-breadcrumbs.svg)](https://david-dm.org/nutgaard/react-router-breadcrumbs)\n[![devDependency Status](https://david-dm.org/nutgaard/react-router-breadcrumbs/dev-status.svg)](https://david-dm.org/nutgaard/react-router-breadcrumbs#info=devDependencies)\n[![peerDependency Status](https://david-dm.org/nutgaard/react-router-breadcrumbs/peer-status.svg)](https://david-dm.org/nutgaard/react-router-breadcrumbs#info=peerDependencies)\n\n[DEMO](http://www.utgaard.xyz/react-router-breadcrumbs)\n\n## How to install\n```\nnpm install react-router-breadcrumbs --save\n```\n\n## How to use it\nThe component is written with customization and ease-of-use in mind. \nIt therefore comes with some useful default which you can override if needed.\n\n### The most basic setup\nUsing just the default provided by the component. \n\n```jsx\n\u003cBreadcrumbs routes={routes} /\u003e\n```\n\n### The default behaviour\nThe component takes five props in addition to `routes`.\n                                                \n|    PropName           |    PropType                                           |    Default    |  Description                                          |\n| --------------------- | ----------------------------------------------------- | ------------- | ----------------------------------------------------- |\n| `className`           | `PropTypes.string`                                    | `breadcrumbs` | The className for the `div` wrapping your breadcrumbs |\n| `params`              | `PropTypes.object`                                    | `{}`          | Typically the params from react-router                |\n| `resolver`            | `PropTypes.func`                                      | See below     | A text resolver for customized texts                  |\n| `createLink`          | `PropTypes.func`                                      | See below     | Hook for overriding how links are created             |\n| `createSeparator`     | `PT.oneOfType([PT.func, PT.string])`                  | See below     | Hook for override how separators are created          |\n| `wrappingComponent`   | `PT.string`                                           | `div`         | Determines the tagName for the wrapping component     |\n| `prefixElements`      | `PT.oneOfType([PT.arrayOf(PT.element), PT.element])`  | none          | Elements to be added infront of the breadcrumb        |\n| `suffixElements`      | `PT.oneOfType([PT.arrayOf(PT.element), PT.element])`  | none          | Elements to be added at the end of the breadcrumb     |\n\n```\n// Default for `resolver` prop\nconst defaultResolver = (key, text, routePath, route) =\u003e key;\n\n// Inputs and how they are determined:\n// key:         route.breadcrumbName || route.name || route.component.name\n// text:        paramsReplaced(key) (based on the `params` props)\n// routePath:   All current routes, except the last one\n// route:       Your current \u003cRoute /\u003e (last in \u003cRoute\u003e-chain\n```\n\n```\n// Default for `createLink` prop\nconst defaultLink = (link, key, text, index, routes) =\u003e \u003cLink to={link} key={key}\u003e{text}\u003c/Link\u003e;\n\n// Inputs and how they are determined:\n// link:        The suggested href for this crumbs\n// key:         The suggested react-key \u003cComponent key={key} /\u003e\n// text:        The resulting text, either from the defaultResolver or your custom resolver\n// routes:      All current routes, including the last one\n```\n\n\n**NB! Its also possible to just send a `string` as this props-value.**\n```\n// Default for `createSeparator` prop\nconst defaultSeparator = (crumbElement, index, array) =\u003e \u003cspan key={`separator-${index}`}\u003e \u0026gt; \u003c/span\u003e;\n\n// Inputs and how they are determined:\n// crumb:       The react-element (crumb) you are creating a separator after.\n// index:       The index of the current crumb\n// array:       All crumbs that a being generated\n```\n\n## Routes-customization\nA lot-of customization can be done through the props of the component, but in many cases it will be enough to add props to your `Routes`.\nThe component looks for three specific props on the `Route` object.\n\n1. `breadcrumbIgnore`, will remove the `Route` for any breadcrumb-path\n2. `breadcrumbName`, will override the `Route.name` and sent to the `resolver`\n3. `breadcrumbLink`, will override the `Route.path` and be subject to `params` replacement.\n\nWhich can be used to name your breadcrumbs exactly as you want.\n### BreadcrumbIgnore Example\n\n**NB. Theres is currently a bug where paths become wrong if this is used on a 'Route' with a path other then '/'**\n\n\n```\n// The example allways show 'Example' as its first breadcrumb.\n// To remove this, add 'breadcrumbIgnore' as a prop\n\u003cRoute path=\"/\" name=\"Examples\" component={App} breadcrumbIgnore \u003e \n```\n\n### BreadcrumbName Example\n\n```\n// To over the name-prop, we've added the breadcrumbName-prop. \n\u003cRoute name=\"UserDetails\" path=\"details\" component={UserDetails} breadcrumbName=\"Details\" /\u003e\n\n\n// The resulting name will be sent to the resolver as the 'key' and i param-replaced form as 'text' (see resolver)\n\u003cRoute name=\"UserLocator\" path=\":userId\" component={User} breadcrumbName=\":userId\"\u003e\n```\n\n### BreadcrumbLink Example\n\n```\n// Overriding the path-prop\n// NB. Can break functionality if abused\n\u003cRoute path=\"/\" name=\"Examples\" component={App} breadcrumbLink=\"/my-application\" \u003e\n```\n\n\n## Peer dependencies\nThis component has the newest react and react-router as peerdependenies, but will most likely work with lower version.\nIf you test the component with lower versions of react and/or react-router please let me know so that the dependencies can be adjusted.\n\n```\n\"react\": \"^0.14.9 || ^15.3.0\",\n\"react-dom\": \"^0.14.9 || ^15.3.0\",\n\"react-router\": \"^2.0.1 || ^3.0.0\"\n```\n\nIn addition a polyfill for `Array.includes` is needed if you are targeting a browser which does not support this.\n\n## Undocumented / TODO\n1. If a breadcrumbLink and the route.path is both falsy the component uses a empty string. Suggest adding a default message/invariant/console.error to warn the user\n\n## Example\nThe example can be seen at [http://www.utgaard.xyz/react-router-breadcrumbs](http://www.utgaard.xyz/react-router-breadcrumbs) and is greatly inspired by https://github.com/svenanders/react-breadcrumbs which provides a similar breadcrumb component. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnutgaard%2Freact-router-breadcrumbs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnutgaard%2Freact-router-breadcrumbs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnutgaard%2Freact-router-breadcrumbs/lists"}