Tastival UI Design

Import

import {
  BreadcrumbComponent,
  BreadcrumbListComponent,
  BreadcrumbItemComponent,
  BreadcrumbLinkComponent,
  BreadcrumbPageComponent,
  BreadcrumbSeparatorComponent,
  BreadcrumbEllipsisComponent,
} from '@tastival.net/ui';

@Component({
  imports: [
    BreadcrumbComponent,
    BreadcrumbListComponent,
    BreadcrumbItemComponent,
    BreadcrumbLinkComponent,
    BreadcrumbPageComponent,
    BreadcrumbSeparatorComponent,
    BreadcrumbEllipsisComponent,
  ],
})
export class ExampleComponent {}

Usage

<breadcrumb ariaLabel="breadcrumb" className="w-full">
  <breadcrumb-list className="gap-2">
    <breadcrumb-item className="">
      <breadcrumb-link href="/" className="hover:underline">Home</breadcrumb-link>
    </breadcrumb-item>
    <breadcrumb-separator className=""></breadcrumb-separator>
    <breadcrumb-item className="">
      <breadcrumb-page className="font-medium">Documents</breadcrumb-page>
    </breadcrumb-item>
  </breadcrumb-list>
</breadcrumb>
<breadcrumb ariaLabel="Docs" className="">
  <breadcrumb-list className="">
    <breadcrumb-item className="">
      <breadcrumb-link href="/docs" className="">Docs</breadcrumb-link>
    </breadcrumb-item>
    <breadcrumb-separator className="">/</breadcrumb-separator>
    <breadcrumb-item className="">
      <breadcrumb-ellipsis label="More" className=""></breadcrumb-ellipsis>
    </breadcrumb-item>
    <breadcrumb-separator className="">/</breadcrumb-separator>
    <breadcrumb-item className="">
      <breadcrumb-page className="">Breadcrumb</breadcrumb-page>
    </breadcrumb-item>
  </breadcrumb-list>
</breadcrumb>