feat(breadcrumb): add breadcrumb component

[its-monotype]

https://user-images.githubusercontent.com/79363260/226710676-90e8963f-1dd1-4987-a358-a07bc58d1d7b.mp4

[vercel[bot]]

@its-monotype is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-template	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 7, 2024 6:41pm
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 7, 2024 6:41pm

[its-monotype]

@shadcn ready for review

[tonyxiao]

@its-monotype Can we use asChild rather than as? This way we can do things like passing in a next.js Link component with typed hrefs for example.

[its-monotype]

@its-monotype Can we use asChild rather than as? This way we can do things like passing in a next.js Link component with typed hrefs for example.

great idea, will look into it

[its-monotype]

@tonyxiao Inside BreadcrumbLink, we currently replace the current element with a <span> if it represents the current page. While the "asChild" approach you mentioned has its merits, it poses a challenge when it comes to replacing or modifying the slotted child or removing the href attribute from it. I don't have any ideas on how to solve this so far, and would greatly appreciate any help in finding a solution.

[focux]

I found this PR when looking for a Breadcrumb component for shadcn/ui. Awesome work @its-monotype!

This would be a great addition to the library, I hope this PR doesn't get stale.

[Zac-Zajdel]

This repo has made me SOOOOO productive on my side projects and I was reaching for a breadcrumb component but saw it wasn't done yet.

This is working fantastic in my application right now. Thank you @its-monotype for implementing this.

+1 to getting this in as an oficially supported component!

Appreciate all you have done for the community so far @shadcn

[mmestiyak]

anyone working on it!

[karam-khanna]

Looks really good visually! Would +1 a previous request to support using Next Links if this PR gets picked back up again. Makes a pretty big speed difference and is a bit jarring to the user if the rest of the app is using Next Links but these aren't.

[karam-khanna]

In response to my prev comment, if anyone else is looking for a next link breadcrumb, can use the breadcrumb in this PR with the following updated BreadcrumbLink:

export const BreadcrumbLink = React.forwardRef<
        HTMLAnchorElement,
        BreadcrumbLinkProps
>(
        ({className, as: asComp, isCurrentPage, ...props}, forwardedRef) => {
            if (isCurrentPage) {
                return (
                        <span
                                className={cn(
                                        "text-sm font-medium underline-offset-4 aria-[current]:opacity-60",
                                        className
                                )}
                                aria-current="page"
                                {...props}
                                ref={forwardedRef}
                        />
                );
            }

            return (
                    <Link href={props.href as string} passHref {...props}
                          className={cn(
                                  "text-sm font-medium underline-offset-4 [&:not([aria-current])]:hover:underline",
                                  className
                          )}
                          ref={forwardedRef}>
                    </Link>
            );
        }
)

[Talent30]

@shadcn Could review this pr if you have time please, much appreciated :)

[shadcn]

@its-monotype I know this is a big ask (since this was blocked by me) but any chance you can reroll this against main? If not, I'll take a stab at it during the week. Thank you.

[matbrgz]

@its-monotype this feature could be awesome, is there possible to do what @shadcn said.

[Balance8]

bumping this!

[shadcn]

@Balance8 I'll make some updates to the component API and merge. Thank you.

[shakedlokits]

We're excited and waiting for it! thank you!

[SirawichDev]

any updates?.it quite good to have this component in Shadcn :3

[birobirobiro]

I need this component!

[JonasDoesThings]

Ofc I am also looking forward to an official integration, but to everyone waiting impatiently: just copy the component manually into your project for now 🤷

[birobirobiro]

Ofc I am also looking forward to an official integration, but to everyone waiting impatiently: just copy the component manually into your project for now 🤷

That's exactly what I did, I'll update later when they merge

[mohab-sameh]

Awesome work @its-monotype. Will be super helpful when it gets merged.

[NicolasStuff]

Awesome! I also need this component, hope it will be merge soon ⚡️

[rickylabs]

Any status why it's still not meged ?

[premiare]

Any status why it's still not meged ?

It's currently in the milestones https://github.com/shadcn-ui/ui/milestone/1

[shadcn]

Hi everyone, I've made some updates to the breadcrumb component. Let me know if you have any feedback.

1. Reworked the component a bit so that they are more composable.
2. Added a <BreadcrumbEllipsis /> component to display collapsed state.
3. Refactored to use asChild prop for custom router <Link />.
4. Added examples for custom separator, dropdown and responsive with drawer.

👉 Demo: https://ui-git-fork-its-monotype-feat-breadcrumb-shadcn-pro.vercel.app/docs/components/breadcrumb

[lr0pb]

Drawer example have no code for it, and probably all other examples work not as expected - code is below the preview, not in the Code section

[premiare]

Drawer example have no code for it, and probably all other examples work not as expected - code is below the preview, not in the Code section

Custom separator as an example:

Preview shows the code in context (related to that example)

Code shows all the code for that example

Drawer and Dialog have very simple implementations:

Drawer

export const BreadcrumbDrawer = () => {
  return (
    <Drawer>
      <DrawerTrigger>Drawer</DrawerTrigger>
      <DrawerContent className="h-[400px]">
        <DrawerHeader>
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink href="/">Home</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbLink href="/">Dashboard</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />

              <BreadcrumbItem>
                <BreadcrumbLink href="/">Users</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />

              <BreadcrumbItem>
                <BreadcrumbLink href="/">John Doe</BreadcrumbLink>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </DrawerHeader>
      </DrawerContent>
    </Drawer>
  );
};

Dialog

export const BreadcrumbDialog = () => {
  return (
    <Dialog>
      <DialogTrigger>Breadcrumb</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink href="/">Home</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbLink href="/">Dashboard</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />

              <BreadcrumbItem>
                <BreadcrumbLink href="/">Users</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />

              <BreadcrumbItem>
                <BreadcrumbLink href="/">John Doe</BreadcrumbLink>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </DialogHeader>
        Dialog content
      </DialogContent>
    </Dialog>
  );
};

[flixlix]

Drawer example have no code for it, and probably all other examples work not as expected - code is below the preview, not in the Code section

Created a PR that fixes this issue #2946