{"id":29712124,"url":"https://github.com/niklasmencke/nextjs-breadcrumbs","last_synced_at":"2025-07-24T00:06:53.037Z","repository":{"id":43010039,"uuid":"309101104","full_name":"NiklasMencke/nextjs-breadcrumbs","owner":"NiklasMencke","description":"A dynamic, highly customizable breadcrumbs component for Next.js","archived":false,"fork":false,"pushed_at":"2023-08-24T13:06:59.000Z","size":1199,"stargazers_count":113,"open_issues_count":18,"forks_count":50,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-09T06:43:45.997Z","etag":null,"topics":["breadcrumbs","component","navigation","next","nextjs","react"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/nextjs-breadcrumbs","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NiklasMencke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-01T13:24:00.000Z","updated_at":"2025-06-23T22:15:56.000Z","dependencies_parsed_at":"2024-06-18T15:30:36.229Z","dependency_job_id":"214898e4-1509-42e9-9967-96644afd50da","html_url":"https://github.com/NiklasMencke/nextjs-breadcrumbs","commit_stats":{"total_commits":28,"total_committers":9,"mean_commits":3.111111111111111,"dds":0.6428571428571428,"last_synced_commit":"6900d29481cc6882b868a3f93bb4bcc019af8fa1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/NiklasMencke/nextjs-breadcrumbs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiklasMencke%2Fnextjs-breadcrumbs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiklasMencke%2Fnextjs-breadcrumbs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiklasMencke%2Fnextjs-breadcrumbs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiklasMencke%2Fnextjs-breadcrumbs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NiklasMencke","download_url":"https://codeload.github.com/NiklasMencke/nextjs-breadcrumbs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiklasMencke%2Fnextjs-breadcrumbs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266770855,"owners_count":23981633,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["breadcrumbs","component","navigation","next","nextjs","react"],"created_at":"2025-07-24T00:06:50.728Z","updated_at":"2025-07-24T00:06:53.010Z","avatar_url":"https://github.com/NiklasMencke.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nextjs-breadcrumbs\n\n\u003e A dynamic, highly customizable breadcrumbs component for Next.js\n\n[![NPM](https://img.shields.io/npm/v/nextjs-breadcrumbs.svg)](https://www.npmjs.com/package/nextjs-breadcrumbs) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Installation\n\n```bash\nyarn add nextjs-breadcrumbs\n```\n\n## Prerequisites\n\nThis component is highly customizable. You can provide your own CSS via classes or via inline styles.\nIf you want to use the default styling however, you need to make sure to import the CSS file provided by this package.\nInside your `_app.js` paste `import 'nextjs-breadcrumbs/dist/index.css';` at the top. This is not needed, if you just want to use your custom styles.\n\n## Usage\n\nThe component needs to be used within Next.js and won't work in plain React.\nIt will always display a dynamic Breadcrumb navigation, based on the current path of the Next router.\n\n```tsx\nimport React from 'react';\nimport Breadcrumbs from 'nextjs-breadcrumbs';\n\nconst Example = () =\u003e {\n  return \u003cBreadcrumbs useDefaultStyle rootLabel=\"Home\" /\u003e;\n};\n```\n\n## Pass custom list of characters that should be replaced in each label\n\nBy default the breadcrumb labels are generated through the url path. In many cases you might want to transform certain special characters from the path. One example would be transforming all the '.' into ' '. You can pass an array here with your preferred transformation list and the component will take care of that for you.\n\n```tsx\nimport React from 'react';\nimport Breadcrumbs from 'nextjs-breadcrumbs';\n\n// Before: title.to.be.transformed  After: title to be transformed\nconst Example = () =\u003e {\n  return (\n    \u003cBreadcrumbs\n      useDefaultStyle={true}\n      replaceCharacterList={[{ from: '.', to: ' ' }]}\n    /\u003e\n  );\n};\n```\n\n## Custom label transformation\n\nIt's possible to pass a label transformation function to customize the labels.\n\n```tsx\nimport React from 'react';\nimport Breadcrumbs from 'nextjs-breadcrumbs';\n\nconst Example = () =\u003e {\n  return (\n    \u003cBreadcrumbs\n      useDefaultStyle\n      transformLabel={(title) =\u003e title + ' Custom Label'}\n    /\u003e\n  );\n};\n```\n\n## Omit the root / home label\n\nIt's possible to omit the root level entirely. This makes sense if you have an URL like https://website.com/home. If you wouldn't omit the root label in this case, the Breadcrumbs would show something like `/home/home`.\n\n```tsx\nimport React from 'react';\nimport Breadcrumbs from 'nextjs-breadcrumbs';\n\nconst Example = () =\u003e {\n  return \u003cBreadcrumbs omitRootLabel /\u003e;\n};\n```\n\n## Omit certain path indexes from breadcrumb navigation\n\nIt's possible to pass an array containing all the indexes of the path that should be omitted and not be rendered as labels. If we have a path like `/home/category/1` then you might want to pass `[2]` here, which omits the breadcrumb label `1`. Indexes start with 0. Example: `[2]` Default: `undefined`.\n\n```tsx\nimport React from 'react';\nimport Breadcrumbs from 'nextjs-breadcrumbs';\n\n// path: /nested/this-is-ommited will omit the this-is-ommited breadcrumb\nconst Example = () =\u003e {\n  return \u003cBreadcrumbs useDefaultStyle={true} omitIndexList={[1]} /\u003e;\n};\n```\n\n## Custom styling (CSS)\n\nIt's possible, to style each HTML element of this component separetely. This can be done either via inline styles or by assigning your own classes.\n\n\n## Overview of props\n| Prop name  | Description | Data type | Example | Default |\n| ------------- | ------------- | ------------- | ------------- | ------------- |\n| useDefaultStyle  | If true, the default styles are used. Make sure to import the CSS in _app.js. | boolean  | true  | false  |\n| rootLabel  | The title for the very first breadcrumb pointing to the root directory.  | string  | '/'  | 'HOME'  |\n| omitRootLabel  | Boolean indicator whether the root label should be omitted. | boolean  | true  | false  |\n| labelsToUppercase  | Boolean indicator if the labels should be displayed as uppercase.  | boolean  | true  | false  |\n| replaceCharacterList  | Array containing a list of specific characters that should be replaced in the label. This can be useful to convert special characters such as vowels.  | Array\u003cCharacterMap\u003e  | [{ from: 'ae', to: 'ä' }, { from: '-', to: ' '}]  | [{ from: '-', to: ' ' }]  |\n| transformLabel  | A transformation function that allows to customize the label strings. Receives the label string and has to return a string or React Component.  | React.ReactNode  | (title) =\u003e 'Transformed ' + title | null  |\n| omitIndexList  | Array containing all the indexes of the path that should be omitted and not be rendered as labels. If we have a path like '/home/category/1' then you might want to pass '[2]' here, which omits the breadcrumb label '1'. Indexes start with 0.  | Array\u003cnumber\u003e  | [1]  | null  |\n| containerStyle  | An inline style object for the outer container  | Object  |   | null  |\n| containerClassName  | Classes to be used for the outer container. Won't be used if useDefaultStyle is true  | string  |   | null  |\n| listStyle  | An inline style object for the breadcrumb list  | Object  |   | null  |\n| listClassName  | Classes to be used for the breadcrumb list  | string  |   | null  |\n| inactiveItemStyle  | An inline style object for the inactive breadcrumb list item  | Object  |  | null  |\n| inactiveItemClassName  | Classes to be used for the inactive breadcrumb list item  | string  |   | null  |\n| activeItemStyle  | An inline style object for the active breadcrumb list item  | Object  |   | null  |\n| activeItemClassName  | Classes to be used for the active breadcrumb list item  | string  |   | null  |\n\n## License\n\nMIT © [NiklasMencke](https://github.com/NiklasMencke)\n\n# Interfaces\n\n\u003ca name=\"interfacesbreadcrumbmd\"\u003e\u003c/a\u003e\n\n[nextjs-breadcrumbs](#readmemd) / [Exports](#modulesmd) / Breadcrumb\n\n## Interface: Breadcrumb\n\n### Table of contents\n\n#### Properties\n\n- [breadcrumb](#breadcrumb)\n- [href](#href)\n\n### Properties\n\n#### breadcrumb\n\n• **breadcrumb**: _string_\n\nBreadcrumb title. Example: 'blog-entries'\n\nDefined in: [index.tsx:35](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L35)\n\n---\n\n#### href\n\n• **href**: _string_\n\nThe URL which the breadcrumb points to. Example: 'blog/blog-entries'\n\nDefined in: [index.tsx:38](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L38)\n\n\u003ca name=\"interfacesbreadcrumbspropsmd\"\u003e\u003c/a\u003e\n\n[nextjs-breadcrumbs](#readmemd) / [Exports](#modulesmd) / BreadcrumbsProps\n\n## Interface: BreadcrumbsProps\n\n### Table of contents\n\n#### Properties\n\n- [activeItemClassName](#activeitemclassname)\n- [activeItemStyle](#activeitemstyle)\n- [containerClassName](#containerclassname)\n- [containerStyle](#containerstyle)\n- [inactiveItemClassName](#inactiveitemclassname)\n- [inactiveItemStyle](#inactiveitemstyle)\n- [labelsToUppercase](#labelstouppercase)\n- [listClassName](#listclassname)\n- [listStyle](#liststyle)\n- [rootLabel](#rootlabel)\n- [omitRootLabel](#omitRootlabel)\n- [transformLabel](#transformlabel)\n- [useDefaultStyle](#usedefaultstyle)\n\n### Properties\n\n#### activeItemClassName\n\n• `Optional` **activeItemClassName**: _string_\n\nClasses to be used for the active breadcrumb list item\n\nDefined in: [index.tsx:78](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L78)\n\n---\n\n#### activeItemStyle\n\n• `Optional` **activeItemStyle**: _any_\n\nAn inline style object for the active breadcrumb list item\n\nDefined in: [index.tsx:75](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L75)\n\n---\n\n#### containerClassName\n\n• `Optional` **containerClassName**: _string_\n\nClasses to be used for the outer container. Won't be used if useDefaultStyle is true\n\nDefined in: [index.tsx:60](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L60)\n\n---\n\n#### containerStyle\n\n• `Optional` **containerStyle**: _any_\n\nAn inline style object for the outer container\n\nDefined in: [index.tsx:57](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L57)\n\n---\n\n#### inactiveItemClassName\n\n• `Optional` **inactiveItemClassName**: _string_\n\nClasses to be used for the inactive breadcrumb list item\n\nDefined in: [index.tsx:72](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L72)\n\n---\n\n#### inactiveItemStyle\n\n• `Optional` **inactiveItemStyle**: _any_\n\nAn inline style object for the inactive breadcrumb list item\n\nDefined in: [index.tsx:69](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L69)\n\n---\n\n#### labelsToUppercase\n\n• `Optional` **labelsToUppercase**: _boolean_\n\nBoolean indicator if the labels should be displayed as uppercase. Example: true Default: false\n\nDefined in: [index.tsx:51](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L51)\n\n---\n\n#### listClassName\n\n• `Optional` **listClassName**: _string_\n\nClasses to be used for the breadcrumb list\n\nDefined in: [index.tsx:66](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L66)\n\n---\n\n#### listStyle\n\n• `Optional` **listStyle**: _any_\n\nAn inline style object for the breadcrumb list\n\nDefined in: [index.tsx:63](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L63)\n\n---\n\n#### rootLabel\n\n• `Optional` **rootLabel**: `null` \\| _string_\n\nThe title for the very first breadcrumb pointing to the root directory. Example: '/' Default: 'HOME'\n\nDefined in: [index.tsx:48](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L48)\n\n---\n\n#### omitRootLabel\n\n• `Optional` **omitRootLabel**: _boolean_\n\nBoolean indicator whether the root label should be ommitted. Example: true Default: false\n\nDefined in: [index.tsx:48](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L48)\n\n---\n\n#### transformLabel\n\n• `Optional` **transformLabel**: (`title`: _string_) =\u003e _string_\n\nA transformation function that allows to customize the label strings. Receives the label string and has to return a string\n\n##### Type declaration\n\n▸ (`title`: _string_): _string_\n\n##### Parameters\n\n| Name    | Type     |\n| :------ | :------- |\n| `title` | _string_ |\n\n**Returns:** _string_\n\nDefined in: [index.tsx:54](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L54)\n\n---\n\n#### useDefaultStyle\n\n• `Optional` **useDefaultStyle**: _boolean_\n\nIf true, the default styles are used.\nMake sure to import the CSS in \\_app.js\nExample: true Default: false\n\nDefined in: [index.tsx:45](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L45)\n\n\u003ca name=\"modulesmd\"\u003e\u003c/a\u003e\n\n[nextjs-breadcrumbs](#readmemd) / Exports\n\n# nextjs-breadcrumbs\n\n## Table of contents\n\n### Namespaces\n\n- [default](#modulesdefaultmd)\n\n### Interfaces\n\n- [Breadcrumb](#interfacesbreadcrumbmd)\n- [BreadcrumbsProps](#interfacesbreadcrumbspropsmd)\n\n### Variables\n\n- [default](#default)\n\n## Variables\n\n### default\n\n• `Const` **default**: (`__namedParameters`: [_BreadcrumbsProps_](#interfacesbreadcrumbspropsmd)) =\u003e `null` \\| _Element_\n\nA functional React component for Next.js that renders a dynamic Breadcrumb navigation\nbased on the current path within the Next.js router navigation.\n\nOnly works in conjunction with Next.js, since it leverages the Next.js router.\n\nBy setting useDefaultStyle to true, the default CSS will be used.\nThe component is highly customizable by either custom classes or\ninline styles, which can be passed as props.\n\n**`param`** object of type BreadcrumbsProps\n\n**`returns`** The breadcrumb React component.\n\n#### Type declaration\n\n▸ (`__namedParameters`: [_BreadcrumbsProps_](#interfacesbreadcrumbspropsmd)): `null` \\| _Element_\n\nA functional React component for Next.js that renders a dynamic Breadcrumb navigation\nbased on the current path within the Next.js router navigation.\n\nOnly works in conjunction with Next.js, since it leverages the Next.js router.\n\nBy setting useDefaultStyle to true, the default CSS will be used.\nThe component is highly customizable by either custom classes or\ninline styles, which can be passed as props.\n\n#### Parameters\n\n| Name                | Type                                                |\n| :------------------ | :-------------------------------------------------- |\n| `__namedParameters` | [_BreadcrumbsProps_](#interfacesbreadcrumbspropsmd) |\n\n**Returns:** `null` \\| _Element_\n\nThe breadcrumb React component.\n\n| Name           | Type                                                |\n| :------------- | :-------------------------------------------------- |\n| `defaultProps` | [_BreadcrumbsProps_](#interfacesbreadcrumbspropsmd) |\n\nDefined in: [index.tsx:109](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L109)\n\n# Modules\n\n\u003ca name=\"modulesdefaultmd\"\u003e\u003c/a\u003e\n\n[nextjs-breadcrumbs](#readmemd) / [Exports](#modulesmd) / default\n\n## Namespace: default\n\n### Table of contents\n\n#### Variables\n\n- [defaultProps](#defaultprops)\n\n### Variables\n\n#### defaultProps\n\n• **defaultProps**: [_BreadcrumbsProps_](#interfacesbreadcrumbspropsmd)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fniklasmencke%2Fnextjs-breadcrumbs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fniklasmencke%2Fnextjs-breadcrumbs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fniklasmencke%2Fnextjs-breadcrumbs/lists"}