Breadcrumb

The Breadcrumb component displays the path to the current resource using a hierarchy of links.

Preview

Usage

import { Breadcrumb } from 'components/lib';

function MyComponent({ ...props }){

  const items = [
    { name: 'Home', url: '/' },
    { name: 'Dashboard', url: '/dashboard' },
    { name: 'Settings', url: '/dashboard/settings' }
  ];

  return (
    <div>
      <Breadcrumb items={ items } />
    </div>
  );
}

Props

Prop	Description	Required	Value
items	array of breadcrumb items	required	array of objects ({ name: string, url: string })

Notes

• The Breadcrumb component uses the BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, and BreadcrumbEllipsis sub-components.

• The items prop specifies the list of breadcrumb items, each containing a name and url.

• The BreadcrumbSeparator component provides a separator between breadcrumb items, defaulting to a right chevron icon.

• The BreadcrumbEllipsis component can be used to indicate more items in the breadcrumb path.

• For more details, refer to the Shadcn Breadcrumb documentation.