Overview

The nextjs-breadcrumbs is a dynamic and highly customizable breadcrumbs component designed for use specifically within Next.js applications. It offers features such as custom label transformations, omission of root labels, and the ability to style each HTML element of the component individually.

Features

• Dynamic Breadcrumb Navigation: Generates a breadcrumb navigation based on the current path of the Next router.
• Custom List of Characters: Allows for the customization of characters to be replaced in each label.
• Custom Label Transformation: Provides the option to pass a label transformation function to customize the labels.
• Omit Root/Home Label: Ability to omit the root level label entirely.
• Omit Specific Path Indexes: Users can choose to omit certain path indexes from the breadcrumb navigation.
• Custom Styling (CSS): Enable users to style each HTML element of the component separately.

Installation

Prerequisites

• To use the default styling, import the CSS file from the package by adding import 'nextjs-breadcrumbs/dist/index.css'; at the top of your _app.js.

Usage

1. Custom Styling: Use inline styles or assign your classes for styling.
2. Breadcumb Navigation: Utilize the dynamic breadcrumb navigation based on the Next router’s current path.
3. Customization Options: Take advantage of features like custom label transformations and the ability to omit root labels or specific path indexes.

Summary

The nextjs-breadcrumbs component offers a dynamic and customizable solution for breadcrumb navigation in Next.js applications. With features like custom label transformations, omitting root labels, and styling flexibility, it provides users with the tools to enhance their navigation experience.