├── .travis.yml ├── src ├── .eslintrc ├── typings.d.ts ├── styles.css └── index.tsx ├── .eslintignore ├── example ├── public │ ├── favicon.ico │ └── vercel.svg ├── next-env.d.ts ├── pages │ ├── index.js │ ├── _app.js │ └── nested │ │ ├── this-is-omitted.js │ │ ├── deep.js │ │ ├── custom-label.js │ │ └── transform.title.js ├── .gitignore ├── tsconfig.json ├── package.json └── README.md ├── tsconfig.test.json ├── .vscode ├── extensions.json ├── settings.json └── launch.json ├── .editorconfig ├── .prettierrc ├── docs ├── modules │ └── default.md ├── interfaces │ ├── breadcrumb.md │ └── breadcrumbsprops.md ├── README.md └── modules.md ├── .gitignore ├── tsconfig.json ├── .eslintrc ├── package.json └── README.md /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 12 4 | - 10 5 | -------------------------------------------------------------------------------- /src/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/ 2 | dist/ 3 | node_modules/ 4 | .snapshots/ 5 | *.min.js -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NiklasMencke/nextjs-breadcrumbs/HEAD/example/public/favicon.ico -------------------------------------------------------------------------------- /tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs" 5 | } 6 | } -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | "esbenp.prettier-vscode" 5 | ] 6 | } -------------------------------------------------------------------------------- /example/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /example/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Breadcrumbs from 'nextjs-breadcrumbs'; 3 | 4 | const App = () => { 5 | return ; 6 | }; 7 | 8 | export default App; 9 | -------------------------------------------------------------------------------- /example/pages/_app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import 'nextjs-breadcrumbs/dist/index.css'; 3 | 4 | function MyApp({ Component, pageProps }) { 5 | return ; 6 | } 7 | 8 | export default MyApp; 9 | -------------------------------------------------------------------------------- /example/pages/nested/this-is-omitted.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Breadcrumbs from 'nextjs-breadcrumbs'; 4 | 5 | const App = () => { 6 | return ; 7 | }; 8 | 9 | export default App; 10 | -------------------------------------------------------------------------------- /example/pages/nested/deep.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Breadcrumbs from 'nextjs-breadcrumbs' 4 | 5 | const App = () => { 6 | return ( 7 | title} /> 8 | ) 9 | } 10 | 11 | export default App 12 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "bracketSpacing": true, 3 | "singleQuote": true, 4 | "trailingComma": "all", 5 | "tabWidth": 2, 6 | "printWidth": 100, 7 | "arrowParens": "avoid", 8 | "requirePragma": false, 9 | "insertPragma": true, 10 | "endOfLine": "auto", 11 | "semi": true 12 | } 13 | -------------------------------------------------------------------------------- /example/pages/nested/custom-label.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Breadcrumbs from 'nextjs-breadcrumbs' 4 | 5 | const App = () => { 6 | return ( 7 | title + ' Custom Label'} 10 | /> 11 | ) 12 | } 13 | 14 | export default App 15 | -------------------------------------------------------------------------------- /example/pages/nested/transform.title.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Breadcrumbs from 'nextjs-breadcrumbs'; 4 | 5 | const App = () => { 6 | return ( 7 | 11 | ); 12 | }; 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /docs/modules/default.md: -------------------------------------------------------------------------------- 1 | [nextjs-breadcrumbs](../README.md) / [Exports](../modules.md) / default 2 | 3 | # Namespace: default 4 | 5 | ## Table of contents 6 | 7 | ### Variables 8 | 9 | - [defaultProps](default.md#defaultprops) 10 | 11 | ## Variables 12 | 13 | ### defaultProps 14 | 15 | • **defaultProps**: [*BreadcrumbsProps*](../interfaces/breadcrumbsprops.md) 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # See https://help.github.com/ignore-files/ for more about ignoring files. 3 | 4 | # dependencies 5 | node_modules 6 | 7 | # builds 8 | build 9 | dist 10 | .rpt2_cache 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.codeActionsOnSave": { 3 | "source.fixAll.eslint": true 4 | }, 5 | "editor.formatOnSave": true, 6 | "[javascript]": { 7 | "editor.formatOnSave": true, 8 | "editor.defaultFormatter": "esbenp.prettier-vscode" 9 | }, 10 | "[javascriptreact]": { 11 | "editor.formatOnSave": true 12 | }, 13 | "editor.defaultFormatter": "esbenp.prettier-vscode", 14 | } 15 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Default CSS definition for typescript, 3 | * will be overridden with file-specific definitions by rollup 4 | */ 5 | declare module '*.css' { 6 | const content: { [className: string]: string }; 7 | export default content; 8 | } 9 | 10 | interface SvgrComponent extends React.StatelessComponent> {} 11 | 12 | declare module '*.svg' { 13 | const svgUrl: string; 14 | const svgComponent: SvgrComponent; 15 | export default svgUrl; 16 | export { svgComponent as ReactComponent } 17 | } 18 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "pwa-chrome", 9 | "request": "launch", 10 | "name": "Launch Chrome against localhost", 11 | "url": "http://localhost:8080", 12 | "webRoot": "${workspaceFolder}" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "moduleResolution": "node", 7 | "jsx": "react", 8 | "sourceMap": true, 9 | "declaration": true, 10 | "esModuleInterop": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "suppressImplicitAnyIndexErrors": true, 16 | "noUnusedLocals": true, 17 | "noUnusedParameters": true, 18 | "allowSyntheticDefaultImports": true 19 | }, 20 | "include": ["src"], 21 | "exclude": ["node_modules", "dist", "example"] 22 | } 23 | -------------------------------------------------------------------------------- /docs/interfaces/breadcrumb.md: -------------------------------------------------------------------------------- 1 | [nextjs-breadcrumbs](../README.md) / [Exports](../modules.md) / Breadcrumb 2 | 3 | # Interface: Breadcrumb 4 | 5 | ## Table of contents 6 | 7 | ### Properties 8 | 9 | - [breadcrumb](breadcrumb.md#breadcrumb) 10 | - [href](breadcrumb.md#href) 11 | 12 | ## Properties 13 | 14 | ### breadcrumb 15 | 16 | • **breadcrumb**: *string* 17 | 18 | Breadcrumb title. Example: 'blog-entries' 19 | 20 | Defined in: [index.tsx:35](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L35) 21 | 22 | ___ 23 | 24 | ### href 25 | 26 | • **href**: *string* 27 | 28 | The URL which the breadcrumb points to. Example: 'blog/blog-entries' 29 | 30 | Defined in: [index.tsx:38](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L38) 31 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "moduleResolution": "node", 7 | "jsx": "preserve", 8 | "sourceMap": true, 9 | "declaration": true, 10 | "esModuleInterop": true, 11 | "noImplicitReturns": true, 12 | "noImplicitThis": true, 13 | "noImplicitAny": true, 14 | "strictNullChecks": true, 15 | "suppressImplicitAnyIndexErrors": true, 16 | "noUnusedLocals": true, 17 | "noUnusedParameters": true, 18 | "allowSyntheticDefaultImports": true, 19 | "target": "es5", 20 | "allowJs": true, 21 | "skipLibCheck": true, 22 | "strict": false, 23 | "forceConsistentCasingInFileNames": true, 24 | "noEmit": true, 25 | "resolveJsonModule": true, 26 | "isolatedModules": true 27 | }, 28 | "include": ["src"], 29 | "exclude": ["node_modules", "build"] 30 | } 31 | -------------------------------------------------------------------------------- /example/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "extends": [ 4 | "standard", 5 | "standard-react", 6 | "plugin:prettier/recommended", 7 | "prettier/standard", 8 | "prettier/react", 9 | "plugin:@typescript-eslint/eslint-recommended" 10 | ], 11 | "plugins": ["react-hooks"], 12 | "env": { 13 | "node": true 14 | }, 15 | "parserOptions": { 16 | "ecmaVersion": 2020, 17 | "ecmaFeatures": { 18 | "legacyDecorators": true, 19 | "jsx": true 20 | } 21 | }, 22 | "settings": { 23 | "react": { 24 | "version": "16" 25 | } 26 | }, 27 | "rules": { 28 | "semi": [2, "always"], 29 | "space-before-function-paren": 0, 30 | "react/prop-types": 0, 31 | "react/jsx-handler-names": 0, 32 | "react/jsx-fragments": 0, 33 | "react/no-unused-prop-types": 0, 34 | "import/export": 0, 35 | "react-hooks/rules-of-hooks": "error", 36 | "react-hooks/exhaustive-deps": [ 37 | "warn", 38 | { 39 | "additionalHooks": "useRecoilCallback" 40 | } 41 | ], 42 | "no-unused-vars": "warn" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-breadcrumbs-example", 3 | "homepage": ".", 4 | "version": "0.0.0", 5 | "private": true, 6 | "scripts": { 7 | "dev": "next dev", 8 | "build": "next build", 9 | "start": "next start" 10 | }, 11 | "dependencies": { 12 | "@types/jest": "link:../node_modules/@types/jest", 13 | "@types/node": "link:../node_modules/@types/node", 14 | "@types/react": "link:../node_modules/@types/react", 15 | "@types/react-dom": "link:../node_modules/@types/react-dom", 16 | "react": "link:../node_modules/react", 17 | "react-dom": "link:../node_modules/react-dom", 18 | "react-scripts": "link:../node_modules/react-scripts", 19 | "typescript": "link:../node_modules/typescript", 20 | "nextjs-breadcrumbs": "link:..", 21 | "next": "^11.0.1" 22 | }, 23 | "devDependencies": { 24 | "@babel/plugin-syntax-object-rest-spread": "^7.8.3" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | ## Learn More 18 | 19 | To learn more about Next.js, take a look at the following resources: 20 | 21 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 22 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 23 | 24 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 25 | 26 | ## Deploy on Vercel 27 | 28 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 29 | 30 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 31 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | nextjs-breadcrumbs / [Exports](modules.md) 2 | 3 | # nextjs-breadcrumbs 4 | 5 | > A dynamic, highly customizable breadcrumbs component for Next.js 6 | 7 | [![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) 8 | 9 | ## Installation 10 | 11 | ```bash 12 | yarn add nextjs-breadcrumbs 13 | ``` 14 | 15 | ## Prerequisites 16 | 17 | This component is highly customizable. You can provide your own CSS via classes or via inline styles. 18 | If you want to use the default styling however, you need to make sure to import the CSS file provided by this package. 19 | Inside 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. 20 | 21 | ## Usage 22 | 23 | The component needs to be used within Next.js and won't work in plain React. 24 | It will always display a dynamic Breadcrumb navigation, based on the current path of the Next router. 25 | 26 | ```tsx 27 | import React from 'react'; 28 | import Breadcrumbs from 'nextjs-breadcrumbs'; 29 | 30 | const Example = () => { 31 | return 32 | } 33 | ``` 34 | 35 | ## Custom label transformation 36 | 37 | It's possible to pass a label transformation function to customize the labels. 38 | 39 | ```tsx 40 | import React from 'react'; 41 | import Breadcrumbs from 'nextjs-breadcrumbs'; 42 | 43 | const Example = () => { 44 | return title + ' Custom Label'} /> 45 | } 46 | ``` 47 | 48 | ## Custom styling (CSS) 49 | 50 | It'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. 51 | 52 | ## License 53 | 54 | MIT © [NiklasMencke](https://github.com/NiklasMencke) 55 | -------------------------------------------------------------------------------- /docs/modules.md: -------------------------------------------------------------------------------- 1 | [nextjs-breadcrumbs](README.md) / Exports 2 | 3 | # nextjs-breadcrumbs 4 | 5 | ## Table of contents 6 | 7 | ### Namespaces 8 | 9 | - [default](modules/default.md) 10 | 11 | ### Interfaces 12 | 13 | - [Breadcrumb](interfaces/breadcrumb.md) 14 | - [BreadcrumbsProps](interfaces/breadcrumbsprops.md) 15 | 16 | ### Variables 17 | 18 | - [default](modules.md#default) 19 | 20 | ## Variables 21 | 22 | ### default 23 | 24 | • `Const` **default**: (`__namedParameters`: [*BreadcrumbsProps*](interfaces/breadcrumbsprops.md)) => ``null`` \| *Element* 25 | 26 | A functional React component for Next.js that renders a dynamic Breadcrumb navigation 27 | based on the current path within the Next.js router navigation. 28 | 29 | Only works in conjunction with Next.js, since it leverages the Next.js router. 30 | 31 | By setting useDefaultStyle to true, the default CSS will be used. 32 | The component is highly customizable by either custom classes or 33 | inline styles, which can be passed as props. 34 | 35 | **`param`** object of type BreadcrumbsProps 36 | 37 | **`returns`** The breadcrumb React component. 38 | 39 | #### Type declaration 40 | 41 | ▸ (`__namedParameters`: [*BreadcrumbsProps*](interfaces/breadcrumbsprops.md)): ``null`` \| *Element* 42 | 43 | A functional React component for Next.js that renders a dynamic Breadcrumb navigation 44 | based on the current path within the Next.js router navigation. 45 | 46 | Only works in conjunction with Next.js, since it leverages the Next.js router. 47 | 48 | By setting useDefaultStyle to true, the default CSS will be used. 49 | The component is highly customizable by either custom classes or 50 | inline styles, which can be passed as props. 51 | 52 | #### Parameters 53 | 54 | | Name | Type | 55 | | :------ | :------ | 56 | | `__namedParameters` | [*BreadcrumbsProps*](interfaces/breadcrumbsprops.md) | 57 | 58 | **Returns:** ``null`` \| *Element* 59 | 60 | The breadcrumb React component. 61 | 62 | | Name | Type | 63 | | :------ | :------ | 64 | | `defaultProps` | [*BreadcrumbsProps*](interfaces/breadcrumbsprops.md) | 65 | 66 | Defined in: [index.tsx:109](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L109) 67 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | list-style: none; 3 | overflow: hidden; 4 | font: 16px Sans-Serif; 5 | } 6 | .breadcrumb li { 7 | float: left; 8 | } 9 | .breadcrumb li a { 10 | color: rgb(0, 0, 0); 11 | text-decoration: none; 12 | padding: 10px 0 10px 50px; 13 | background: rgb(230, 224, 224); 14 | position: relative; 15 | display: block; 16 | float: left; 17 | } 18 | 19 | .breadcrumb li a::after { 20 | content: ' '; 21 | display: block; 22 | width: 0; 23 | height: 0; 24 | border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ 25 | border-bottom: 50px solid transparent; 26 | border-left: 30px solid rgb(230, 224, 224); 27 | position: absolute; 28 | top: 50%; 29 | margin-top: -50px; 30 | left: 100%; 31 | z-index: 2; 32 | } 33 | 34 | .breadcrumb li a::before { 35 | content: ' '; 36 | display: block; 37 | width: 0; 38 | height: 0; 39 | border-top: 50px solid transparent; 40 | border-bottom: 50px solid transparent; 41 | border-left: 30px solid white; 42 | position: absolute; 43 | top: 50%; 44 | margin-top: -50px; 45 | margin-left: 1px; 46 | left: 100%; 47 | z-index: 1; 48 | } 49 | 50 | .breadcrumb li:first-child a { 51 | padding-left: 20px; 52 | pointer-events: visible !important; 53 | cursor: pointer !important; 54 | } 55 | .breadcrumb li:nth-child(2) a { 56 | background: rgb(224, 233, 233); 57 | } 58 | .breadcrumb li:nth-child(2) a:after { 59 | border-left-color: rgb(224, 233, 233); 60 | } 61 | .breadcrumb li:nth-child(3) a { 62 | background: rgb(224, 233, 233); 63 | } 64 | .breadcrumb li:nth-child(3) a:after { 65 | border-left-color: rgb(224, 233, 233); 66 | } 67 | .breadcrumb li:nth-child(4) a { 68 | background: rgb(224, 233, 233); 69 | } 70 | .breadcrumb li:nth-child(4) a:after { 71 | border-left-color: rgb(224, 233, 233); 72 | } 73 | .breadcrumb li:nth-child(5) a { 74 | background: rgb(224, 233, 233); 75 | } 76 | .breadcrumb li:nth-child(5) a:after { 77 | border-left-color: rgb(224, 233, 233); 78 | } 79 | .breadcrumb li:last-child a { 80 | background: rgb(238, 235, 232) !important; 81 | color: black; 82 | pointer-events: none; 83 | cursor: default; 84 | padding-right: 20px; 85 | } 86 | .breadcrumb li:last-child a::after { 87 | border: 0; 88 | } 89 | 90 | .breadcrumb li a:hover { 91 | background: rgb(194, 226, 221); 92 | } 93 | .breadcrumb li a:hover:after { 94 | border-left-color: rgb(194, 226, 221) !important; 95 | } 96 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-breadcrumbs", 3 | "version": "1.1.9", 4 | "description": "A dynamic, highly customizable breadcrumbs component for Next.js", 5 | "author": "NiklasMencke", 6 | "license": "MIT", 7 | "repository": "NiklasMencke/nextjs-breadcrumbs", 8 | "main": "dist/index.js", 9 | "module": "dist/index.modern.js", 10 | "source": "src/index.tsx", 11 | "engines": { 12 | "node": ">=10" 13 | }, 14 | "scripts": { 15 | "build": "microbundle-crl --no-compress --css-modules null --format modern,cjs", 16 | "start": "microbundle-crl watch --no-compress --format modern,cjs", 17 | "prepare": "run-s build", 18 | "test": "run-s test:unit test:lint test:build", 19 | "test:build": "run-s build", 20 | "test:lint": "eslint .", 21 | "test:unit": "cross-env CI=1 react-scripts test --env=jsdom", 22 | "test:watch": "react-scripts test --env=jsdom", 23 | "predeploy": "cd example && yarn install && yarn run build", 24 | "docs": "typedoc src/index.tsx --plugin typedoc-plugin-markdown && concat-md --decrease-title-levels --dir-name-as-title docs > DOCUMENTATION.md" 25 | }, 26 | "peerDependencies": { 27 | "next": "^11.0.1", 28 | "react": "^17.0.2" 29 | }, 30 | "devDependencies": { 31 | "@typescript-eslint/eslint-plugin": "^4.28.5", 32 | "@typescript-eslint/parser": "^4.28.5", 33 | "eslint": "^7.2.0", 34 | "eslint-config-airbnb": "18.2.1", 35 | "eslint-config-airbnb-typescript": "^12.3.1", 36 | "eslint-config-prettier": "^8.3.0", 37 | "eslint-plugin-import": "^2.22.1", 38 | "eslint-plugin-jest": "^24.4.0", 39 | "eslint-plugin-jsx-a11y": "^6.4.1", 40 | "eslint-plugin-prettier": "^3.4.0", 41 | "eslint-plugin-react": "^7.21.5", 42 | "eslint-plugin-react-hooks": "^1.7.0", 43 | "prettier": "^2.3.2", 44 | "@testing-library/jest-dom": "^5.11.9", 45 | "@testing-library/react": "^11.2.5", 46 | "@testing-library/user-event": "^13.0.10", 47 | "@types/jest": "^25.1.4", 48 | "@types/node": "^12.12.38", 49 | "@types/react": "^17.0.3", 50 | "@types/react-dom": "^17.0.3", 51 | "babel-eslint": "^10.0.3", 52 | "concat-md": "^0.3.5", 53 | "cross-env": "^7.0.2", 54 | "eslint-config-standard": "^14.1.0", 55 | "eslint-config-standard-react": "^9.2.0", 56 | "eslint-plugin-node": "^11.0.0", 57 | "eslint-plugin-promise": "^4.2.1", 58 | "eslint-plugin-standard": "^4.0.1", 59 | "gh-pages": "^2.2.0", 60 | "microbundle-crl": "^0.13.10", 61 | "next": "^11.0.1", 62 | "npm-run-all": "^4.1.5", 63 | "react": "^17.0.2", 64 | "react-docgen": "^5.4.0", 65 | "react-dom": "^17.0.2", 66 | "react-scripts": "^4.0.3", 67 | "typedoc": "^0.20.36", 68 | "typedoc-plugin-markdown": "^3.8.2", 69 | "typescript": "3.8.3" 70 | }, 71 | "files": [ 72 | "dist" 73 | ], 74 | "prettier": { 75 | "singleQuote": true 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /docs/interfaces/breadcrumbsprops.md: -------------------------------------------------------------------------------- 1 | [nextjs-breadcrumbs](../README.md) / [Exports](../modules.md) / BreadcrumbsProps 2 | 3 | # Interface: BreadcrumbsProps 4 | 5 | ## Table of contents 6 | 7 | ### Properties 8 | 9 | - [activeItemClassName](breadcrumbsprops.md#activeitemclassname) 10 | - [activeItemStyle](breadcrumbsprops.md#activeitemstyle) 11 | - [containerClassName](breadcrumbsprops.md#containerclassname) 12 | - [containerStyle](breadcrumbsprops.md#containerstyle) 13 | - [inactiveItemClassName](breadcrumbsprops.md#inactiveitemclassname) 14 | - [inactiveItemStyle](breadcrumbsprops.md#inactiveitemstyle) 15 | - [labelsToUppercase](breadcrumbsprops.md#labelstouppercase) 16 | - [listClassName](breadcrumbsprops.md#listclassname) 17 | - [listStyle](breadcrumbsprops.md#liststyle) 18 | - [rootLabel](breadcrumbsprops.md#rootlabel) 19 | - [transformLabel](breadcrumbsprops.md#transformlabel) 20 | - [useDefaultStyle](breadcrumbsprops.md#usedefaultstyle) 21 | 22 | ## Properties 23 | 24 | ### activeItemClassName 25 | 26 | • `Optional` **activeItemClassName**: *string* 27 | 28 | Classes to be used for the active breadcrumb list item 29 | 30 | Defined in: [index.tsx:78](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L78) 31 | 32 | ___ 33 | 34 | ### activeItemStyle 35 | 36 | • `Optional` **activeItemStyle**: *any* 37 | 38 | An inline style object for the active breadcrumb list item 39 | 40 | Defined in: [index.tsx:75](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L75) 41 | 42 | ___ 43 | 44 | ### containerClassName 45 | 46 | • `Optional` **containerClassName**: *string* 47 | 48 | Classes to be used for the outer container. Won't be used if useDefaultStyle is true 49 | 50 | Defined in: [index.tsx:60](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L60) 51 | 52 | ___ 53 | 54 | ### containerStyle 55 | 56 | • `Optional` **containerStyle**: *any* 57 | 58 | An inline style object for the outer container 59 | 60 | Defined in: [index.tsx:57](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L57) 61 | 62 | ___ 63 | 64 | ### inactiveItemClassName 65 | 66 | • `Optional` **inactiveItemClassName**: *string* 67 | 68 | Classes to be used for the inactive breadcrumb list item 69 | 70 | Defined in: [index.tsx:72](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L72) 71 | 72 | ___ 73 | 74 | ### inactiveItemStyle 75 | 76 | • `Optional` **inactiveItemStyle**: *any* 77 | 78 | An inline style object for the inactive breadcrumb list item 79 | 80 | Defined in: [index.tsx:69](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L69) 81 | 82 | ___ 83 | 84 | ### labelsToUppercase 85 | 86 | • `Optional` **labelsToUppercase**: *boolean* 87 | 88 | Boolean indicator if the labels should be displayed as uppercase. Example: true Default: false 89 | 90 | Defined in: [index.tsx:51](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L51) 91 | 92 | ___ 93 | 94 | ### listClassName 95 | 96 | • `Optional` **listClassName**: *string* 97 | 98 | Classes to be used for the breadcrumb list 99 | 100 | Defined in: [index.tsx:66](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L66) 101 | 102 | ___ 103 | 104 | ### listStyle 105 | 106 | • `Optional` **listStyle**: *any* 107 | 108 | An inline style object for the breadcrumb list 109 | 110 | Defined in: [index.tsx:63](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L63) 111 | 112 | ___ 113 | 114 | ### rootLabel 115 | 116 | • `Optional` **rootLabel**: ``null`` \| *string* 117 | 118 | The title for the very first breadcrumb pointing to the root directory. Example: '/' Default: 'HOME' 119 | 120 | Defined in: [index.tsx:48](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L48) 121 | 122 | ___ 123 | 124 | ### transformLabel 125 | 126 | • `Optional` **transformLabel**: (`title`: *string*) => *string* 127 | 128 | A transformation function that allows to customize the label strings. Receives the label string and has to return a string 129 | 130 | #### Type declaration 131 | 132 | ▸ (`title`: *string*): *string* 133 | 134 | #### Parameters 135 | 136 | | Name | Type | 137 | | :------ | :------ | 138 | | `title` | *string* | 139 | 140 | **Returns:** *string* 141 | 142 | Defined in: [index.tsx:54](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L54) 143 | 144 | ___ 145 | 146 | ### useDefaultStyle 147 | 148 | • `Optional` **useDefaultStyle**: *boolean* 149 | 150 | If true, the default styles are used. 151 | Make sure to import the CSS in _app.js 152 | Example: true Default: false 153 | 154 | Defined in: [index.tsx:45](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L45) 155 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | /** @format */ 2 | 3 | import React, { useEffect, useState } from 'react'; 4 | import Link from 'next/link'; 5 | import { useRouter } from 'next/router'; 6 | import './styles.css'; 7 | 8 | /** 9 | * Takes an URL String and removes query params and hash params 10 | * 11 | * @param url - The URL string 12 | * @returns The transformed URL string 13 | * 14 | */ 15 | const getPathFromUrl = (url: string): string => { 16 | return url.split(/[?#]/)[0]; 17 | }; 18 | 19 | /** 20 | * Takes a breadcrumb title (from url path) and replaces 21 | * special chars to more readable chars 22 | * 23 | * @param title - The breadcrumb title 24 | * @returns The transformed title or the result of the custom transformLabel function 25 | * 26 | */ 27 | const convertBreadcrumb = ( 28 | title: string, 29 | toUpperCase: boolean | undefined, 30 | replaceCharacterList: Array | undefined, 31 | transformLabel?: ((title: string) => React.ReactNode) | undefined 32 | ): React.ReactNode => { 33 | let transformedTitle = getPathFromUrl(title); 34 | 35 | if (transformLabel) { 36 | return transformLabel(transformedTitle); 37 | } 38 | 39 | if (replaceCharacterList) { 40 | for (let i = 0; i < replaceCharacterList.length; i++) { 41 | transformedTitle = transformedTitle.replaceAll( 42 | replaceCharacterList[i].from, 43 | replaceCharacterList[i].to 44 | ); 45 | } 46 | } 47 | 48 | // decode for utf-8 characters and return ascii. 49 | return toUpperCase ? decodeURI(transformedTitle).toUpperCase() : decodeURI(transformedTitle); 50 | }; 51 | 52 | export interface Breadcrumb { 53 | /** Breadcrumb title. Example: 'blog-entries' */ 54 | breadcrumb: string; 55 | 56 | /** The URL which the breadcrumb points to. Example: 'blog/blog-entries' */ 57 | href: string; 58 | } 59 | 60 | export interface CharacterMap { 61 | /** The source character or character pattern that should be replaced (e.g. 'ae') */ 62 | from: string; 63 | 64 | /** The replacement into which the character should be replaced. */ 65 | to: string; 66 | } 67 | 68 | export interface BreadcrumbsProps { 69 | /** If true, the default styles are used. 70 | * Make sure to import the CSS in _app.js 71 | * Example: true Default: false */ 72 | useDefaultStyle?: boolean; 73 | 74 | /** The title for the very first breadcrumb pointing to the root directory. Example: '/' Default: 'HOME' */ 75 | rootLabel?: string | null; 76 | 77 | /** Boolean indicator whether the root label should be omitted. Example: true Default: false */ 78 | omitRootLabel?: boolean; 79 | 80 | /** Boolean indicator if the labels should be displayed as uppercase. Example: true Default: false */ 81 | labelsToUppercase?: boolean | undefined; 82 | 83 | /** 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. Example: [{ from: 'ae', to: 'ä' }, { from: '-', to: ' '}] Default: [{ from: '-', to: ' ' }] */ 84 | replaceCharacterList?: Array | undefined; 85 | 86 | /** A transformation function that allows to customize the label strings. Receives the label string and has to return a string or React Component */ 87 | transformLabel?: ((title: string) => React.ReactNode) | undefined; 88 | 89 | /** 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 */ 90 | omitIndexList?: Array | undefined; 91 | 92 | /** An inline style object for the outer container */ 93 | containerStyle?: any | null; 94 | 95 | /** Classes to be used for the outer container. Won't be used if useDefaultStyle is true */ 96 | containerClassName?: string; 97 | 98 | /** An inline style object for the breadcrumb list */ 99 | listStyle?: any | null; 100 | 101 | /** Classes to be used for the breadcrumb list */ 102 | listClassName?: string; 103 | 104 | /** An inline style object for the inactive breadcrumb list item */ 105 | inactiveItemStyle?: any | null; 106 | 107 | /** Classes to be used for the inactive breadcrumb list item */ 108 | inactiveItemClassName?: string; 109 | 110 | /** An inline style object for the active breadcrumb list item */ 111 | activeItemStyle?: any | null; 112 | 113 | /** Classes to be used for the active breadcrumb list item */ 114 | activeItemClassName?: string; 115 | } 116 | 117 | const defaultProps: BreadcrumbsProps = { 118 | useDefaultStyle: false, 119 | rootLabel: 'Home', 120 | omitRootLabel: false, 121 | labelsToUppercase: false, 122 | replaceCharacterList: [{ from: '-', to: ' ' }], 123 | transformLabel: undefined, 124 | omitIndexList: undefined, 125 | containerStyle: null, 126 | containerClassName: '', 127 | listStyle: null, 128 | listClassName: '', 129 | inactiveItemStyle: null, 130 | inactiveItemClassName: '', 131 | activeItemStyle: null, 132 | activeItemClassName: '', 133 | }; 134 | 135 | /** 136 | * A functional React component for Next.js that renders a dynamic Breadcrumb navigation 137 | * based on the current path within the Next.js router navigation. 138 | * 139 | * Only works in conjunction with Next.js, since it leverages the Next.js router. 140 | * 141 | * By setting useDefaultStyle to true, the default CSS will be used. 142 | * The component is highly customizable by either custom classes or 143 | * inline styles, which can be passed as props. 144 | * 145 | * @param props - object of type BreadcrumbsProps 146 | * @returns The breadcrumb React component. 147 | */ 148 | const Breadcrumbs = ({ 149 | useDefaultStyle, 150 | rootLabel, 151 | omitRootLabel, 152 | labelsToUppercase, 153 | replaceCharacterList, 154 | transformLabel, 155 | omitIndexList, 156 | containerStyle, 157 | containerClassName, 158 | listStyle, 159 | listClassName, 160 | inactiveItemStyle, 161 | inactiveItemClassName, 162 | activeItemStyle, 163 | activeItemClassName, 164 | }: BreadcrumbsProps) => { 165 | const router = useRouter(); 166 | const [breadcrumbs, setBreadcrumbs] = useState | null>( 167 | null 168 | ); 169 | 170 | useEffect(() => { 171 | if (router) { 172 | const linkPath = router.asPath.split('/'); 173 | linkPath.shift(); 174 | 175 | const pathArray = linkPath.map((path, i) => { 176 | return { 177 | breadcrumb: path, 178 | href: '/' + linkPath.slice(0, i + 1).join('/'), 179 | }; 180 | }); 181 | 182 | setBreadcrumbs(pathArray); 183 | } 184 | }, [router]); 185 | 186 | if (!breadcrumbs) { 187 | return null; 188 | } 189 | 190 | return ( 191 | 252 | ); 253 | }; 254 | 255 | Breadcrumbs.defaultProps = defaultProps; 256 | 257 | export default Breadcrumbs; 258 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # nextjs-breadcrumbs 2 | 3 | > A dynamic, highly customizable breadcrumbs component for Next.js 4 | 5 | [![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) 6 | 7 | ## Installation 8 | 9 | ```bash 10 | yarn add nextjs-breadcrumbs 11 | ``` 12 | 13 | ## Prerequisites 14 | 15 | This component is highly customizable. You can provide your own CSS via classes or via inline styles. 16 | If you want to use the default styling however, you need to make sure to import the CSS file provided by this package. 17 | Inside 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. 18 | 19 | ## Usage 20 | 21 | The component needs to be used within Next.js and won't work in plain React. 22 | It will always display a dynamic Breadcrumb navigation, based on the current path of the Next router. 23 | 24 | ```tsx 25 | import React from 'react'; 26 | import Breadcrumbs from 'nextjs-breadcrumbs'; 27 | 28 | const Example = () => { 29 | return ; 30 | }; 31 | ``` 32 | 33 | ## Pass custom list of characters that should be replaced in each label 34 | 35 | By 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. 36 | 37 | ```tsx 38 | import React from 'react'; 39 | import Breadcrumbs from 'nextjs-breadcrumbs'; 40 | 41 | // Before: title.to.be.transformed After: title to be transformed 42 | const Example = () => { 43 | return ( 44 | 48 | ); 49 | }; 50 | ``` 51 | 52 | ## Custom label transformation 53 | 54 | It's possible to pass a label transformation function to customize the labels. 55 | 56 | ```tsx 57 | import React from 'react'; 58 | import Breadcrumbs from 'nextjs-breadcrumbs'; 59 | 60 | const Example = () => { 61 | return ( 62 | title + ' Custom Label'} 65 | /> 66 | ); 67 | }; 68 | ``` 69 | 70 | ## Omit the root / home label 71 | 72 | It'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`. 73 | 74 | ```tsx 75 | import React from 'react'; 76 | import Breadcrumbs from 'nextjs-breadcrumbs'; 77 | 78 | const Example = () => { 79 | return ; 80 | }; 81 | ``` 82 | 83 | ## Omit certain path indexes from breadcrumb navigation 84 | 85 | It'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`. 86 | 87 | ```tsx 88 | import React from 'react'; 89 | import Breadcrumbs from 'nextjs-breadcrumbs'; 90 | 91 | // path: /nested/this-is-ommited will omit the this-is-ommited breadcrumb 92 | const Example = () => { 93 | return ; 94 | }; 95 | ``` 96 | 97 | ## Custom styling (CSS) 98 | 99 | It'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. 100 | 101 | 102 | ## Overview of props 103 | | Prop name | Description | Data type | Example | Default | 104 | | ------------- | ------------- | ------------- | ------------- | ------------- | 105 | | useDefaultStyle | If true, the default styles are used. Make sure to import the CSS in _app.js. | boolean | true | false | 106 | | rootLabel | The title for the very first breadcrumb pointing to the root directory. | string | '/' | 'HOME' | 107 | | omitRootLabel | Boolean indicator whether the root label should be omitted. | boolean | true | false | 108 | | labelsToUppercase | Boolean indicator if the labels should be displayed as uppercase. | boolean | true | false | 109 | | 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 | [{ from: 'ae', to: 'ä' }, { from: '-', to: ' '}] | [{ from: '-', to: ' ' }] | 110 | | 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) => 'Transformed ' + title | null | 111 | | 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 | [1] | null | 112 | | containerStyle | An inline style object for the outer container | Object | | null | 113 | | containerClassName | Classes to be used for the outer container. Won't be used if useDefaultStyle is true | string | | null | 114 | | listStyle | An inline style object for the breadcrumb list | Object | | null | 115 | | listClassName | Classes to be used for the breadcrumb list | string | | null | 116 | | inactiveItemStyle | An inline style object for the inactive breadcrumb list item | Object | | null | 117 | | inactiveItemClassName | Classes to be used for the inactive breadcrumb list item | string | | null | 118 | | activeItemStyle | An inline style object for the active breadcrumb list item | Object | | null | 119 | | activeItemClassName | Classes to be used for the active breadcrumb list item | string | | null | 120 | 121 | ## License 122 | 123 | MIT © [NiklasMencke](https://github.com/NiklasMencke) 124 | 125 | # Interfaces 126 | 127 | 128 | 129 | [nextjs-breadcrumbs](#readmemd) / [Exports](#modulesmd) / Breadcrumb 130 | 131 | ## Interface: Breadcrumb 132 | 133 | ### Table of contents 134 | 135 | #### Properties 136 | 137 | - [breadcrumb](#breadcrumb) 138 | - [href](#href) 139 | 140 | ### Properties 141 | 142 | #### breadcrumb 143 | 144 | • **breadcrumb**: _string_ 145 | 146 | Breadcrumb title. Example: 'blog-entries' 147 | 148 | Defined in: [index.tsx:35](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L35) 149 | 150 | --- 151 | 152 | #### href 153 | 154 | • **href**: _string_ 155 | 156 | The URL which the breadcrumb points to. Example: 'blog/blog-entries' 157 | 158 | Defined in: [index.tsx:38](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L38) 159 | 160 | 161 | 162 | [nextjs-breadcrumbs](#readmemd) / [Exports](#modulesmd) / BreadcrumbsProps 163 | 164 | ## Interface: BreadcrumbsProps 165 | 166 | ### Table of contents 167 | 168 | #### Properties 169 | 170 | - [activeItemClassName](#activeitemclassname) 171 | - [activeItemStyle](#activeitemstyle) 172 | - [containerClassName](#containerclassname) 173 | - [containerStyle](#containerstyle) 174 | - [inactiveItemClassName](#inactiveitemclassname) 175 | - [inactiveItemStyle](#inactiveitemstyle) 176 | - [labelsToUppercase](#labelstouppercase) 177 | - [listClassName](#listclassname) 178 | - [listStyle](#liststyle) 179 | - [rootLabel](#rootlabel) 180 | - [omitRootLabel](#omitRootlabel) 181 | - [transformLabel](#transformlabel) 182 | - [useDefaultStyle](#usedefaultstyle) 183 | 184 | ### Properties 185 | 186 | #### activeItemClassName 187 | 188 | • `Optional` **activeItemClassName**: _string_ 189 | 190 | Classes to be used for the active breadcrumb list item 191 | 192 | Defined in: [index.tsx:78](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L78) 193 | 194 | --- 195 | 196 | #### activeItemStyle 197 | 198 | • `Optional` **activeItemStyle**: _any_ 199 | 200 | An inline style object for the active breadcrumb list item 201 | 202 | Defined in: [index.tsx:75](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L75) 203 | 204 | --- 205 | 206 | #### containerClassName 207 | 208 | • `Optional` **containerClassName**: _string_ 209 | 210 | Classes to be used for the outer container. Won't be used if useDefaultStyle is true 211 | 212 | Defined in: [index.tsx:60](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L60) 213 | 214 | --- 215 | 216 | #### containerStyle 217 | 218 | • `Optional` **containerStyle**: _any_ 219 | 220 | An inline style object for the outer container 221 | 222 | Defined in: [index.tsx:57](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L57) 223 | 224 | --- 225 | 226 | #### inactiveItemClassName 227 | 228 | • `Optional` **inactiveItemClassName**: _string_ 229 | 230 | Classes to be used for the inactive breadcrumb list item 231 | 232 | Defined in: [index.tsx:72](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L72) 233 | 234 | --- 235 | 236 | #### inactiveItemStyle 237 | 238 | • `Optional` **inactiveItemStyle**: _any_ 239 | 240 | An inline style object for the inactive breadcrumb list item 241 | 242 | Defined in: [index.tsx:69](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L69) 243 | 244 | --- 245 | 246 | #### labelsToUppercase 247 | 248 | • `Optional` **labelsToUppercase**: _boolean_ 249 | 250 | Boolean indicator if the labels should be displayed as uppercase. Example: true Default: false 251 | 252 | Defined in: [index.tsx:51](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L51) 253 | 254 | --- 255 | 256 | #### listClassName 257 | 258 | • `Optional` **listClassName**: _string_ 259 | 260 | Classes to be used for the breadcrumb list 261 | 262 | Defined in: [index.tsx:66](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L66) 263 | 264 | --- 265 | 266 | #### listStyle 267 | 268 | • `Optional` **listStyle**: _any_ 269 | 270 | An inline style object for the breadcrumb list 271 | 272 | Defined in: [index.tsx:63](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L63) 273 | 274 | --- 275 | 276 | #### rootLabel 277 | 278 | • `Optional` **rootLabel**: `null` \| _string_ 279 | 280 | The title for the very first breadcrumb pointing to the root directory. Example: '/' Default: 'HOME' 281 | 282 | Defined in: [index.tsx:48](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L48) 283 | 284 | --- 285 | 286 | #### omitRootLabel 287 | 288 | • `Optional` **omitRootLabel**: _boolean_ 289 | 290 | Boolean indicator whether the root label should be ommitted. Example: true Default: false 291 | 292 | Defined in: [index.tsx:48](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L48) 293 | 294 | --- 295 | 296 | #### transformLabel 297 | 298 | • `Optional` **transformLabel**: (`title`: _string_) => _string_ 299 | 300 | A transformation function that allows to customize the label strings. Receives the label string and has to return a string 301 | 302 | ##### Type declaration 303 | 304 | ▸ (`title`: _string_): _string_ 305 | 306 | ##### Parameters 307 | 308 | | Name | Type | 309 | | :------ | :------- | 310 | | `title` | _string_ | 311 | 312 | **Returns:** _string_ 313 | 314 | Defined in: [index.tsx:54](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L54) 315 | 316 | --- 317 | 318 | #### useDefaultStyle 319 | 320 | • `Optional` **useDefaultStyle**: _boolean_ 321 | 322 | If true, the default styles are used. 323 | Make sure to import the CSS in \_app.js 324 | Example: true Default: false 325 | 326 | Defined in: [index.tsx:45](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L45) 327 | 328 | 329 | 330 | [nextjs-breadcrumbs](#readmemd) / Exports 331 | 332 | # nextjs-breadcrumbs 333 | 334 | ## Table of contents 335 | 336 | ### Namespaces 337 | 338 | - [default](#modulesdefaultmd) 339 | 340 | ### Interfaces 341 | 342 | - [Breadcrumb](#interfacesbreadcrumbmd) 343 | - [BreadcrumbsProps](#interfacesbreadcrumbspropsmd) 344 | 345 | ### Variables 346 | 347 | - [default](#default) 348 | 349 | ## Variables 350 | 351 | ### default 352 | 353 | • `Const` **default**: (`__namedParameters`: [_BreadcrumbsProps_](#interfacesbreadcrumbspropsmd)) => `null` \| _Element_ 354 | 355 | A functional React component for Next.js that renders a dynamic Breadcrumb navigation 356 | based on the current path within the Next.js router navigation. 357 | 358 | Only works in conjunction with Next.js, since it leverages the Next.js router. 359 | 360 | By setting useDefaultStyle to true, the default CSS will be used. 361 | The component is highly customizable by either custom classes or 362 | inline styles, which can be passed as props. 363 | 364 | **`param`** object of type BreadcrumbsProps 365 | 366 | **`returns`** The breadcrumb React component. 367 | 368 | #### Type declaration 369 | 370 | ▸ (`__namedParameters`: [_BreadcrumbsProps_](#interfacesbreadcrumbspropsmd)): `null` \| _Element_ 371 | 372 | A functional React component for Next.js that renders a dynamic Breadcrumb navigation 373 | based on the current path within the Next.js router navigation. 374 | 375 | Only works in conjunction with Next.js, since it leverages the Next.js router. 376 | 377 | By setting useDefaultStyle to true, the default CSS will be used. 378 | The component is highly customizable by either custom classes or 379 | inline styles, which can be passed as props. 380 | 381 | #### Parameters 382 | 383 | | Name | Type | 384 | | :------------------ | :-------------------------------------------------- | 385 | | `__namedParameters` | [_BreadcrumbsProps_](#interfacesbreadcrumbspropsmd) | 386 | 387 | **Returns:** `null` \| _Element_ 388 | 389 | The breadcrumb React component. 390 | 391 | | Name | Type | 392 | | :------------- | :-------------------------------------------------- | 393 | | `defaultProps` | [_BreadcrumbsProps_](#interfacesbreadcrumbspropsmd) | 394 | 395 | Defined in: [index.tsx:109](https://github.com/NiklasMencke/nextjs-breadcrumbs/blob/40dc4f0/src/index.tsx#L109) 396 | 397 | # Modules 398 | 399 | 400 | 401 | [nextjs-breadcrumbs](#readmemd) / [Exports](#modulesmd) / default 402 | 403 | ## Namespace: default 404 | 405 | ### Table of contents 406 | 407 | #### Variables 408 | 409 | - [defaultProps](#defaultprops) 410 | 411 | ### Variables 412 | 413 | #### defaultProps 414 | 415 | • **defaultProps**: [_BreadcrumbsProps_](#interfacesbreadcrumbspropsmd) 416 | --------------------------------------------------------------------------------