Overview

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.

Preview

1. Home
3. Components
5. Breadcrumb

Code

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

export function Demo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Início</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/categoria">Categoria</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Página</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

About

This component is our take on the Breadcrumb developed and maintained by Shadcn.

Installation

pnpm

pnpm add @inpulse-ui/breadcrumb

bun

bun add @inpulse-ui/breadcrumb

yarn

yarn add @inpulse-ui/breadcrumb

npm

npm install @inpulse-ui/breadcrumb

API Reference

Link

Defines a link that can be clicked to navigate to a different page.

Prop	Type	Default Value	Required
asChild	boolean	false	No
href	string	-	No

Usage

Wrap the component with the Breadcrumb component and use the BreadcrumbList to define the hierarchy of links. Each link is defined using the BreadcrumbItem and BreadcrumbLink components. The last item in the hierarchy should use BreadcrumbPage to indicate that it is not a link.

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/categoria">Category</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Examples

Up to 3 levels

Preview

1. Home
3. Components
5. Breadcrumb

Code

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

export function Demo() {
  return (
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="/">Início</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="/categoria">Categoria</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Página</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  );
}

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.

Preview

1. Home
3. More
5. Components
7. Breadcrumb

Code

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

export function Demo() {
  return (
    <Breadcrumb>
      <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>
    </Breadcrumb>
  );
}