breadcrumbs-next

Breadcrumbs for NextJS

Table of contents

• Breadcrumbs for NextJS
  • Installation
  • Behind The Scenes
  • Contents
  • Type Aliases
  • Components
  • Functions
  • Testing
  • TODOs

Installation

npm install breadcrumbs-next

yarn install breadcrumbs-next

pnpm install breadcrumbs-next

Behind The Scenes

Click to read!

Imagine your app having the following routes:

1. /momentum
2. /projects/[projectId]
3. /[[…slug]]
4. /users/[userId]/[[…stuff]]
5. /users/[userId]/[[…slug]]?t=record
6. /users?t=record
7. /users/[userId]?t=record

Last three examples also include URL parameters, which can be used to construct breadcrumbs. For example, when you have a page consisting from another set of tabs, but you don't want to create another route for that.

All of those examples can be transformed to the following formats (lets omit Home element in resulting breadcrumbs):

Pattern	Breadcrumbs	Example URL
/momentum	Momentum	=
/profile?t=records	Profile > Records	=
/projects/[projectId]	Projects > "Grammar"	/projects/17
/[[…slug]]	Russia > Moscow > Subway > Kommunarka	/russia/moscow/subway/kommunarka
/users/[userId]/[[…stuff]]	Users > Pavel > Deliveries > Yandex > Lavka	/users/132/deliveries/yandex/lavka
/users/[userId]/[[…slug]]?t=records[1]	Users > Pavel > Deliveries > Dashboard > Record	/users/132/deliveries/dashboard?t=records
/users/[userId]?t=records	Users > Pavel > Records	/users/132?t=records

[1] - Search params always are taken last, because change of URL (w/o params) is the same as opening another page, thus even having the same params set int the URL doesn't mean they should go in the beginning. They are behaviour modifiers of the page, but not its primary descriptor.

Contents

Type Aliases

• BreadCrumb
• CrumbComponentProps
• NextBreadcrumbsProps
• GetDefaultTextGenerator
• GetTextGenerator
• TextGeneratorFn

Components

• NextBreadcrumbs

Functions

• createNextCrumbComponent

Type Aliases

BreadCrumb

Type declaration

Name	Type
href	string
text	string
textGenerator	null or TextGeneratorFn

---

CrumbComponentProps

Type Declaration

Name	Type
href	string
isFirst	boolean
isLast	boolean
text	string
textGenerator	null or TextGeneratorFn

---

GetDefaultTextGenerator

Type declaration

▸ (config) => string

Parameters

Name	Type
config	Object
config.href	string
config.isCatchAllSubpath	boolean
config.paramIndex	number
config.paramName	string
config.isCatchAllSubpath	boolean
config.paramSlugIndex	null or number
config.paramValue	string
config.query	NextRouter["query"]

---

GetTextGenerator

Type declaration

▸ (config) => null | TextGeneratorFn

Parameters

Name	Type
config	Object
config.href	string
config.isCatchAllSubpath	boolean
config.paramIndex	number
config.paramName	string
config.paramSlugIndex	null or number
config.paramValue	string
config.query	NextRouter["query"]

---

NextBreadcrumbsProps

Type declaration

Name	Type
Container	string or FC<{children: ReactNode}>
Crumb	FC<CrumbComponentProps>
getDefaultTextGenerator?	GetDefaultTextGenerator
getTextGenerator?	GetTextGenerator
homeText?	string

Used in:

• NextBreadcrumbs

---

TextGeneratorFn

Type declaration

▸ () => string | Promise<string>

Used in:

• GetTextGenerator

Components

NextBreadcrumbs

Props

Name	Type
{...props}	NextBreadcrumbsProps

---

Functions

createNextCrumbComponent

Parameters

Name	Type
Component	FC<Omit<CrumbComponentProps, "textGenerator">>

Returns

FC<CrumbComponentProps>

Testing

yarn install-peers
yarn vitest

TODOs

• add support for query params to be items of breadcrumbs
• add all required tests