nextjs-breadcrumbs
nextjs-breadcrumbs copied to clipboard
Adding an 'additionalItems' prop
Hi,
Great module, thank you for your work. Here is a suggestion to make it fit with even more contexts, I hope this make sense.
Issue : sometimes we might have breadcrumb items that do not match any part from the current route, it is therefore impossible to make them appear in the breadcrumbs.
Proposed solution : add a props to supply "extra items".
Proposed implementation (not tested yet) :
export interface BreadcrumbsProps {
/** ... */
/** Additional breadcrumb items */
additionalItems?: Array<{
position: number,
items: Breadcrumb[],
}>
}
/** ... */
const defaultProps: BreadcrumbsProps = {
/** ... */
additionalItems: [],
};
/** ... */
const Breadcrumbs = ({ /** ... */ additionalItems }: BreadcrumbsProps) => {
/** ... */
useEffect(() => {
if (router) {
/** ... */
(additionalItems || [])
.sort(({ position: a }, { position: b }) => b - a)
.forEach(({ position, items }) => {
const insertPos = Math.min(pathArray.length, Math.max(0, position));
pathArray.splice(insertPos, 0, ...items);
});
setBreadcrumbs(pathArray);
}
}, [router]);
Hope this helps. You might think this is dirty or breaks your logic, otherwiser let me know if you'd like me to submit a pull request.
Instead of / while supplying this additionalItems
prop we might add a `breadCrumbItems' props that would allow to bypass the logic around router to force breadcrumb items to be shown.
Any update on @NicolasPineau's suggestion ? sometimes we could want to link up a category url instead of the route
@NicolasPineau did you forked the project and add the feature ? It seems that this is no more maintenance activity in here