{"id":26600652,"url":"https://github.com/multipliedtwice/router5-breadcrumbs-react","last_synced_at":"2026-04-17T10:01:57.571Z","repository":{"id":53809325,"uuid":"239487896","full_name":"multipliedtwice/router5-breadcrumbs-react","owner":"multipliedtwice","description":"React breadcrumbs navigation based on Router5 with automatic trail build","archived":false,"fork":false,"pushed_at":"2022-02-10T21:24:53.000Z","size":2125,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-17T04:38:22.811Z","etag":null,"topics":["breadcrumb-navigation","breadcrumbs","breadcrumbs-dynamic","react","router5","typescript"],"latest_commit_sha":null,"homepage":"https://router5-breadcrumbs-react.netlify.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/multipliedtwice.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2020-02-10T10:44:58.000Z","updated_at":"2020-08-28T03:36:46.000Z","dependencies_parsed_at":"2022-08-21T17:00:58.750Z","dependency_job_id":null,"html_url":"https://github.com/multipliedtwice/router5-breadcrumbs-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multipliedtwice%2Frouter5-breadcrumbs-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multipliedtwice%2Frouter5-breadcrumbs-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multipliedtwice%2Frouter5-breadcrumbs-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multipliedtwice%2Frouter5-breadcrumbs-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/multipliedtwice","download_url":"https://codeload.github.com/multipliedtwice/router5-breadcrumbs-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245149556,"owners_count":20568923,"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":["breadcrumb-navigation","breadcrumbs","breadcrumbs-dynamic","react","router5","typescript"],"created_at":"2025-03-23T18:32:49.300Z","updated_at":"2026-04-17T10:01:57.462Z","avatar_url":"https://github.com/multipliedtwice.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# router5-breadcrumbs-react\n\n\u003e Breadcrumbs component, based on router5 and react.js which renders crumbs automatically written in less than 200 lines of code.\n\n\u003cimg src=\"https://github.com/thousandsofraccoons/router5-breadcrumbs-react/raw/develop/public/banner-01.jpg\" alt=\"React breadcrumbs component download\" width=\"100%\"\u003e\n\n[![NPM](https://img.shields.io/npm/v/router5-breadcrumbs-react.svg)](https://www.npmjs.com/package/router5-breadcrumbs-react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) ![npm](https://img.shields.io/npm/dt/router5-breadcrumbs-react)\n\n## Install\n\n```bash\nyarn add router5-breadcrumbs-react\n```\n\n## Features\n\n:paperclip: Microdata and semantics  \n:earth_asia: Translation support  \n:hamster: Tiny component (\u003c 200 lines, ~3kb gzipped)  \n:scissors: Customizable icons  \n:heart: Tailwind default styles\n\n## Breadcrumbs usage\n\n```tsx\nimport Breadcrumbs from 'router5-breadcrumbs-react'\n\nexport const Page = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cBreadcrumbs /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\nIncluding breadcrumbs tag into page will automatically render trail to current page based on it's path. It could be something like: _\"user \u003e user-profile\"_. You can utilize it by using localization files, just add following to your json with translations:\n\n```json\n{\n  \"user\": \"User\",\n  \"user-profile\": \"Profile\"\n}\n```\n\nOr you can specify crumbs right in your **router5** route files:\nTree structure also will work in the same way - just add \"crumb\" key to each children. Each hierarchical link will be passed translated if translation function is specified. See description of [**t** props](#t)\n\n```typescript\nexport const routes = [\n  { name: 'user', path: '/user', crumb: 'User' },\n  { name: 'user.profile', path: '/profile', crumb: 'Profile' },\n]\n```\n\n## Props\n\n\u003e #### got\n\u003e\n\u003e `{[index: number]: string | React.ReactElement}`\n\u003e\n\u003e ```tsx\n\u003e export const Example = () =\u003e {\n\u003e   return \u003cBreadcrumbs got={{ 0: product_title }} /\u003e\n\u003e }\n\u003e ```\n\u003e\n\u003e Allows to pass dynamic value resulted from fetch request to server. Starts from 0, root crumb not being count in.\n\n\u003e #### children\n\u003e\n\u003e `string | React.ReactElement`  \n\u003e default = `undefined`\n\u003e\n\u003e ```tsx\n\u003e export const Example = () =\u003e {\n\u003e   return \u003cBreadcrumbs\u003e{product_title}\u003c/Breadcrumbs\u003e\n\u003e }\n\u003e ```\n\u003e\n\u003e Allows to rewrite current page's link with dynamic value.\n\n\u003e #### hide\n\u003e\n\u003e `Array\u003cstring\u003e`\n\u003e default = `undefined`\n\u003e\n\u003e In some cases you would prefer to hide certain crumbs. For example if you have duplicated nodes in your route tree. Or in case when one view being returned for two different routes (for example if you using **router5-tabs-react** with redirect to \\*.tabs parameter)\n\u003e\n\u003e ```tsx\n\u003e export const Example = () =\u003e {\n\u003e   return \u003cBreadcrumbs hide={['route.names', 'to.hide']} /\u003e\n\u003e }\n\u003e ```\n\n\u003e #### t\n\u003e\n\u003e `function`  \n\u003e default = `(text: string) =\u003e text`\n\u003e\n\u003e To enable translation just pass translation function to component:\n\u003e\n\u003e ```tsx\n\u003e import { useTranslation } from 'react-i18next'\n\u003e\n\u003e export const Example = () =\u003e {\n\u003e   const { t } = useTranslation()\n\u003e   return \u003cBreadcrumbs t={t} /\u003e\n\u003e }\n\u003e ```\n\n\u003e #### homeRouteName\n\u003e\n\u003e `string`\n\u003e default = `'home'`\n\u003e\n\u003e Name of route node which will be assigned to **Home** crumb\n\n\u003e #### homeRouteLabel\n\u003e\n\u003e `string`\n\u003e default = `'Home'`\n\u003e\n\u003e ```typescript\n\u003e {\n\u003e   strokeWidth: string\n\u003e   fill: string\n\u003e   stroke: string\n\u003e   className: any\n\u003e }\n\u003e ```\n\u003e\n\u003e Defines which label for root of the trail to display.\n\n\u003e #### iconProps\n\u003e\n\u003e ```typescript\n\u003e {\n\u003e   strokeWidth: string\n\u003e   fill: string\n\u003e   stroke: string\n\u003e   className: any\n\u003e }\n\u003e ```\n\u003e\n\u003e Parameters, which will be applied to default Home Icon and Arrow Icons\n\n\u003e #### forward\n\u003e\n\u003e ```typescript\n\u003e {\n\u003e   from: string // router paths\n\u003e   to: string\n\u003e }\n\u003e ```\n\u003e\n\u003e Use it if you want to overwrite links assigned by default.\n\n\u003e #### classes\n\u003e\n\u003e ```typescript\n\u003e {\n\u003e   activeLink: string // clickable links style\n\u003e   currentPage: string // classes for current page's label\n\u003e   wrapper: string // \u003col\u003e\u003c/ol\u003e tag around trails\n\u003e }\n\u003e ```\n\u003e\n\u003e default =\n\u003e\n\u003e ```typescript\n\u003e {\n\u003e   activeLink = 'flex items-baseline text-blue-700 hover:underline mx-2',\n\u003e   currentPage = 'text-gray-500 ml-2',\n\u003e   wrapper = 'flex items-baseline text-xl my-10 whitespace-no-wrap',\n\u003e }\n\u003e ```\n\u003e\n\u003e Classnames for HTML elements.\n\n\u003e \u003e #### icons\n\u003e\n\u003e ```typescript\n\u003e {\n\u003e   CustomHomeIcon: React.ReactElement\n\u003e   CustomArrowIcon: React.ReactElement\n\u003e }\n\u003e ```\n\u003e\n\u003e default = `\u003c\u003e\u003c/\u003e`\n\n## Check also\n\n### router5-tabs-react\n\n\u003e [https://github.com/thousandsofraccoons/router5-tabs-react](https://github.com/thousandsofraccoons/router5-tabs-react)\n\nTiny tabbed navigation component, which renders selected tab in active breadcrumb\n\n### Acknowledgements\n\nDee Money  \n[\u003cimg src=\"https://avatars3.githubusercontent.com/u/52338586?s=200\u0026v=4\" alt=\"Dee Money\" width=\"100\" height=\"100\"\u003e](https://github.com/dee-money)\n\n## License\n\nMIT © [https://github.com/thousandsofraccoons](https://github.com/thousandsofraccoons)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultipliedtwice%2Frouter5-breadcrumbs-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmultipliedtwice%2Frouter5-breadcrumbs-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultipliedtwice%2Frouter5-breadcrumbs-react/lists"}