Breadcrumb

Navigation hierarchy that helps users understand their current location.

Installation

# Install @opencosmos/ui to use Breadcrumb
pnpm add @opencosmos/ui

Preview

Loading preview...

Usage

Import

import { Breadcrumb } from '@opencosmos/ui';

Example

<Breadcrumb>
  Content
</Breadcrumb>

Eject

Copy this component into your project for full customization

Code Examples

Basic Usage

Navigation breadcrumb trail

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@opencosmos/ui"

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>