feat: added breadcrumb component #58
Conversation
|
@KavanBhavsar35 is attempting to deploy a commit to the Retro UI Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughA new Breadcrumb navigation component suite was introduced, including its core implementation, documentation, navigation entry, and preview examples. The Breadcrumb component and its subcomponents are now exported and registered in the project configuration, with corresponding documentation and example usages. A new dependency, Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Breadcrumb
participant Breadcrumb.List
participant Breadcrumb.Item
participant Breadcrumb.Link
participant Breadcrumb.Separator
participant Breadcrumb.Page
participant Breadcrumb.Ellipsis
User->>Breadcrumb: Render BreadcrumbRoot (nav)
Breadcrumb->>Breadcrumb.List: Render List (ol)
loop For each breadcrumb item
Breadcrumb.List->>Breadcrumb.Item: Render Item (li)
alt Is link
Breadcrumb.Item->>Breadcrumb.Link: Render Link (a or custom)
else Is ellipsis
Breadcrumb.Item->>Breadcrumb.Ellipsis: Render Ellipsis
else Is current page
Breadcrumb.Item->>Breadcrumb.Page: Render Page (span)
end
opt Not last item
Breadcrumb.List->>Breadcrumb.Separator: Render Separator (icon/custom)
end
end
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (3)
config/components.ts (1)
111-114: Consider adding missing dependenciesThe breadcrumb component likely uses
@radix-ui/react-slotfor theasChildprop functionality, but this dependency isn't listed in the component configuration.breadcrumb: { name: "breadcrumb", + dependencies: ["@radix-ui/react-slot"], filePath: "components/retroui/Breadcrumb.tsx", }components/retroui/Breadcrumb.tsx (2)
6-11: Use a more specific ref type for<nav>.
Instead ofHTMLElement, considerHTMLNavElementto improve type safety.-React.forwardRef<HTMLElement, +React.forwardRef<HTMLNavElement,
21-33: Consider removing default list markers.
By default<ol>renders numbers; since you’re using flex layout for breadcrumbs, you might want to suppress native markers with Tailwind’slist-noneclass. Example:- className={cn( - "flex flex-wrap items-center gap-1.5 sm:gap-2.5 text-muted-foreground", + className={cn( + "flex flex-wrap items-center gap-1.5 sm:gap-2.5 text-muted-foreground list-none", className )}This ensures no unexpected numbering appears.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
components/retroui/Breadcrumb.tsx(1 hunks)components/retroui/index.ts(1 hunks)config/components.ts(2 hunks)config/navigation.ts(1 hunks)content/docs/components/breadcrumb.mdx(1 hunks)package.json(1 hunks)preview/components/breadcrumb-custom-separator.tsx(1 hunks)preview/components/breadcrumb-link-component.tsx(1 hunks)preview/components/breadcrumb-style-collapsed.tsx(1 hunks)preview/components/breadcrumb-style-default.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
components/retroui/Breadcrumb.tsx (1)
lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (17)
package.json (1)
25-25: Approve addition of Radix UI slot dependency.
The new@radix-ui/react-slotdependency at version^1.2.2is correctly specified and necessary for the compoundBreadcrumbimplementation.config/navigation.ts (1)
31-31: Approve navigation entry for Breadcrumb component.
The new sidebar entry{ title: "Breadcrumb", href: \${componentsRoute}/breadcrumb` }` follows the existing structure and alphabetical ordering, enabling users to access the Breadcrumb docs.components/retroui/index.ts (1)
25-25: Approve export of Breadcrumb component.
Re-exporting./Breadcrumbintegrates the new component into the public API, making it available alongside the other UI modules.preview/components/breadcrumb-style-default.tsx (1)
1-22: Approve default breadcrumb example.
BreadcrumbStyleDefaultproperly imports and composes theBreadcrumbAPI—using<Breadcrumb.List>,<Breadcrumb.Item>,<Breadcrumb.Link>,<Breadcrumb.Separator>, and<Breadcrumb.Page>—to illustrate a basic, accessible breadcrumb.preview/components/breadcrumb-custom-separator.tsx (1)
1-27: Approve custom-separator breadcrumb example.
BreadcrumbCustomSeparatorcorrectly demonstrates overriding the default separator by rendering a<Slash />icon inside<Breadcrumb.Separator>, showcasing the component’s flexibility.preview/components/breadcrumb-style-collapsed.tsx (1)
1-30: Implementation looks good!This component properly implements a collapsed breadcrumb pattern with an ellipsis to indicate hidden intermediate breadcrumb items. The code correctly uses the Breadcrumb compound component, including proper usage of Next.js Link integration with the
asChildprop.preview/components/breadcrumb-link-component.tsx (1)
1-27: LGTM - Good implementation of link component exampleThis example correctly demonstrates how to integrate Next.js Link components with the Breadcrumb component using the
asChildprop, providing a clean and accessible navigation pattern.content/docs/components/breadcrumb.mdx (2)
1-5: Verify the last updated dateThe last updated date shows May 12, 2025, which is a future date. Consider updating it to the actual current date.
6-68: Documentation structure looks goodThe documentation is well-structured with a clear component showcase, installation instructions, and multiple examples demonstrating different breadcrumb variants.
config/components.ts (2)
111-114: Component registration looks good!The breadcrumb component is properly registered in the core components configuration.
476-503: Example registrations look good!All four breadcrumb example components are properly registered with appropriate file paths and lazy-loaded imports.
components/retroui/Breadcrumb.tsx (6)
1-4: Imports look good.
The component correctly pulls in React, theSlotutility, icons fromlucide-react, and thecnhelper from@/lib/utils. It aligns with the new dependency added (@radix-ui/react-slot).
36-43:BreadcrumbItemis straightforward and correct.
Theinline-flexstyling and ref forwarding are appropriate for each<li>in the breadcrumb.
44-61:BreadcrumbLinkimplementation is solid.
Leveraging Radix’sSlotforasChildsupport, plus the focus/hover styles, gives good flexibility and accessibility.
77-91:BreadcrumbSeparatoris well implemented.
Usingrole="presentation"andaria-hidden="true"on the<li>makes the separator decorative, which is correct.
109-117: Composite assignment is correct.
UsingObject.assignto bundle all subcomponents ontoBreadcrumbis a common and effective pattern.
118-118: Export statement is straightforward.
Named export ofBreadcrumbaligns with the rest of the codebase.
| const BreadcrumbEllipsis = ({ | ||
| className, | ||
| ...props | ||
| }: React.ComponentProps<"span">) => ( | ||
| <span | ||
| role="presentation" | ||
| aria-hidden="true" | ||
| className={cn("flex h-9 w-9 items-center justify-center", className)} | ||
| {...props} | ||
| > | ||
| <MoreHorizontal className="h-4 w-4" /> | ||
| <span className="sr-only">More</span> | ||
| </span> | ||
| ) |
There was a problem hiding this comment.
Fix aria-hidden placement in the ellipsis.
By marking the outer <span> as aria-hidden, you hide the screen-reader-only text too. Instead, move aria-hidden to the icon itself so the “More” text remains accessible:
-<span
- role="presentation"
- aria-hidden="true"
+<span
+ role="presentation"
className={cn("flex h-9 w-9 items-center justify-center", className)}
{...props}
>
- <MoreHorizontal className="h-4 w-4" />
+ <MoreHorizontal aria-hidden="true" className="h-4 w-4" />
<span className="sr-only">More</span>
</span>This ensures screen readers announce “More” for the collapsed breadcrumb indicator.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const BreadcrumbEllipsis = ({ | |
| className, | |
| ...props | |
| }: React.ComponentProps<"span">) => ( | |
| <span | |
| role="presentation" | |
| aria-hidden="true" | |
| className={cn("flex h-9 w-9 items-center justify-center", className)} | |
| {...props} | |
| > | |
| <MoreHorizontal className="h-4 w-4" /> | |
| <span className="sr-only">More</span> | |
| </span> | |
| ) | |
| const BreadcrumbEllipsis = ({ | |
| className, | |
| ...props | |
| }: React.ComponentProps<"span">) => ( | |
| <span | |
| role="presentation" | |
| className={cn("flex h-9 w-9 items-center justify-center", className)} | |
| {...props} | |
| > | |
| <MoreHorizontal aria-hidden="true" className="h-4 w-4" /> | |
| <span className="sr-only">More</span> | |
| </span> | |
| ) |
…tation and fix aria bugs and props issues.
|
thank you for the contribution 🙏 |
Add Breadcrumb component and related documentation/examples
Summary by CodeRabbit