BreadcrumbsNew

A horizontal trail of links that auto-collapses into an ellipsis button when the trail exceeds maxItems.

Dependencies

class-variance-authority

Interaction Type

Navigate through breadcrumb links. When the trail is long, collapsed items appear in an ellipsis dropdown menu.

Props

Options you can pass to customize this component.

Prop

Type

Description

items*

{ label: ReactNode; href?: string; icon?: ReactNode; title?: string }[]

The breadcrumb items. Last item without href is the current page.

maxItems

number

Maximum items to show before collapsing. Defaults to 4.

siteUrl

string

Enables JSON-LD BreadcrumbList emission for SEO.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/breadcrumbs.json

How to use

<Breadcrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Components', href: '/components' },
    { label: 'Breadcrumbs' },
  ]}
  maxItems={4}
  siteUrl="https://ui.nexvyn.dev"
/>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

•Free for personal and commercial use
•No attribution required
•Cannot be resold as a standalone product
•Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use

// No code loaded.

npx shadcn@latest addhttps://ui.nexvyn.dev/r/breadcrumbs.json