Breadcrumb

1.0.2

Presents the path to the current route through a hierarchy of links. The last element is not clickable and therefore has a slightly opaque style compared to the others.

About

This component is a version of the Breadcrumb component developed by Shadcn (opens in a new tab).

Installation

pnpm add @inpulse-ds/breadcrumb

Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from '@inpulse-ds/breadcrumb';

return (
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="/">Início</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbEllipsis />
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="/categoria">Categoria</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Página</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  );

Examples

Up to 3 levels

Above 3 levels

We recommend inserting the BreadcrumbEllipsis subcomponent (which displays the ellipsis icon) to indicate that there are more elements contained in this hierarchy - when it exceeds 3 levels.

Avatar Button