npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nextjs-breadcrumbs2

v2.0.4

Published

A dynamic, highly customizable breadcrumbs component for Next.js

Downloads

2,958

Readme

nextjs-breadcrumbs2

A dynamic, highly customizable breadcrumbs component for Next.js

NPM JavaScript Style Guide

Fork of nextjs-breadcrumbs

I forked this package as the original package wasn't compatible with the new Next.js 13. All you have to do is replace your imports with:

import Breadcrumbs from 'nextjs-breadcrumbs2';

Next.js 13 App directory structure

Make sure that you add 'use client' on top of the file which imports nextjs-breadcrumbs2 as client side rendering is required.

Installation

yarn add nextjs-breadcrumbs2

Prerequisites

This component is highly customizable. You can provide your own CSS via classes or via inline styles. If you want to use the default styling however, you need to make sure to import the CSS file provided by this package. Inside your _app.js paste import 'nextjs-breadcrumbs2/dist/index.css'; at the top. This is not needed, if you just want to use your custom styles.

Usage

The component needs to be used within Next.js and won't work in plain React. It will always display a dynamic Breadcrumb navigation, based on the current path of the Next router.

import React from 'react';
import Breadcrumbs from 'nextjs-breadcrumbs2';

const Example = () => {
  return <Breadcrumbs useDefaultStyle rootLabel="Home" />;
};

Pass custom list of characters that should be replaced in each label

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.

import React from 'react';
import Breadcrumbs from 'nextjs-breadcrumbs2';

// Before: title.to.be.transformed  After: title to be transformed
const Example = () => {
  return (
    <Breadcrumbs
      useDefaultStyle={true}
      replaceCharacterList={[{ from: '.', to: ' ' }]}
    />
  );
};

Custom label transformation

It's possible to pass a label transformation function to customize the labels.

import React from 'react';
import Breadcrumbs from 'nextjs-breadcrumbs2';

const Example = () => {
  return (
    <Breadcrumbs
      useDefaultStyle
      transformLabel={(title) => title + ' Custom Label'}
    />
  );
};

Omit the root / home label

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.

import React from 'react';
import Breadcrumbs from 'nextjs-breadcrumbs2';

const Example = () => {
  return <Breadcrumbs omitRootLabel />;
};

Omit certain path indexes from breadcrumb navigation

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.

import React from 'react';
import Breadcrumbs from 'nextjs-breadcrumbs2';

// path: /nested/this-is-ommited will omit the this-is-ommited breadcrumb
const Example = () => {
  return <Breadcrumbs useDefaultStyle={true} omitIndexList={[1]} />;
};

Custom styling (CSS)

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.

Overview of props

| Prop name | Description | Data type | Default | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | ------------------------ | | useDefaultStyle | If true, the default styles are used. Make sure to import the CSS in _app.js. | boolean | false | | rootLabel | The title for the very first breadcrumb pointing to the root directory. | string | 'HOME' | | omitRootLabel | Boolean indicator whether the root label should be omitted. | boolean | false | | labelsToUppercase | Boolean indicator if the labels should be displayed as uppercase. | boolean | false | | 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: '-', to: ' ' }] | | 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 | null | | 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 | null | | containerStyle | An inline style object for the outer container | Object | null | | containerClassName | Classes to be used for the outer container. Won't be used if useDefaultStyle is true | string | null | | listStyle | An inline style object for the breadcrumb list | Object | null | | listClassName | Classes to be used for the breadcrumb list | string | null | | inactiveItemStyle | An inline style object for the inactive breadcrumb list item | Object | null | | inactiveItemClassName | Classes to be used for the inactive breadcrumb list item | string | null | | activeItemStyle | An inline style object for the active breadcrumb list item | Object | null | | activeItemClassName | Classes to be used for the active breadcrumb list item | string | null |

License

MIT © Simon Hausdorf