Breadcrumb

A navigational landmark that shows the user's current location within a site hierarchy.

Installation

npx @obi/ui add breadcrumb

Preview

Usage

import Breadcrumb from '@/src/components/Breadcrumb/Breadcrumb';

export default function Example() {
  return (
    <Breadcrumb
      items={[
        { label: 'Home', href: '/' },
        { label: 'Components', href: '/components' },
        { label: 'Breadcrumb' },
      ]}
    />
  );
}

Props

Name	Type	Default	Description
items	Array<{ label: string; href?: string }>	—	Ordered list of crumbs. The last item is the current page and should have no href.
separator	ReactNode	"/"	Rendered between each item. Accepts strings or any React element.
className	string	""	Additional classes applied to the wrapping nav element.