Skip to content
OrbitUI Logo OrbitUI Logo OrbitUI Component Library

Breadcrumb

The Breadcrumb component is a navigation aid that indicates the user’s current location within a hierarchical structure. It helps users understand where they are on a website or in an application and allows them to navigate back to parent pages.

Installation

Section titled “Installation”

Add the Breadcrumb component to your project using the OrbitUI CLI:

Terminal window
npx orbitkit@latest add breadcrumb

Usage

Section titled “Usage”

Import the Breadcrumb component and its sub-components (BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbEllipsis, BreadcrumbPage). Assemble the breadcrumb structure using these components.

Props

Section titled “Props”
Section titled “Breadcrumb”

The main Breadcrumb component primarily serves as a wrapper for the breadcrumb navigation structure. It accepts Accepts all standard HTML attributes for a <nav> element.

Section titled “BreadcrumbList”

The BreadcrumbList component acts as a container for the breadcrumb items and separators. It semantically represents an ordered list of breadcrumb items.

This component accepts all the standard HTML attributes that an <ol> element would.

Section titled “BreadcrumbLink”

The BreadcrumbLink component represents a clickable link within the breadcrumb trail, allowing users to navigate to a parent page.

This component accepts all the standard HTML attributes that an <a> element would.

Section titled “BreadcrumbPage”

The BreadcrumbPage component represents the final item in the breadcrumb trail, indicating the user’s current page. It is typically not a link.

This component accepts all the standard HTML attributes that a <span> element would.

Section titled “BreadcrumbSeparator”

The BreadcrumbSeparator component is used to visually separate breadcrumb items. By default, it renders a symbol like /.

This component accepts all the standard HTML attributes that a <li> element would.

You can customize the separator icon by replacing the default content inside the <BreadcrumbSeparator> tags with your desired icon (e.g., an SVG).

index.astro
---
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbSeparator,
  BreadcrumbLink,
  BreadcrumbItem,
} from "@/components/ui/breadcrumb";
---


<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>


    <BreadcrumbSeparator>
      {/* Custom separator icon (e.g., an SVG or component) */}
      >
    </BreadcrumbSeparator>


    <BreadcrumbItem>
      <BreadcrumbPage>Current</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
Section titled “BreadcrumbEllipsis”

The BreadcrumbEllipsis component is used to indicate that some breadcrumb items are hidden or condensed, often in responsive designs. It typically appears as ....

This component accepts all the standard HTML attributes that a <span> element would.

You can customize the ellipsis icon by replacing the default content inside the <BreadcrumbEllipsis> tags with your desired icon (e.g., an SVG).

index.astro
---
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbEllipsis,
  BreadcrumbSeparator,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
} from "@/components/ui/breadcrumb";
---


<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>


    <BreadcrumbSeparator />


    <BreadcrumbEllipsis>
      {/* Custom ellipsis icon (e.g., an SVG or component) */}
      ***
    </BreadcrumbEllipsis>


    <BreadcrumbSeparator />


    <BreadcrumbItem>
      <BreadcrumbLink href="/level-2">Level 2</BreadcrumbLink>
    </BreadcrumbItem>


    <BreadcrumbSeparator />


    <BreadcrumbItem>
      <BreadcrumbPage>Current</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>