Breadcrumb

Stable

A hierarchical path component engineered with cyberpunk neon lighting, terminal scope delimiters, and frosted glass navigation.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  Breadcrumb, 
  BreadcrumbList, 
  BreadcrumbItem, 
  BreadcrumbLink, 
  BreadcrumbPage, 
  BreadcrumbSeparator, 
  BreadcrumbEllipsis 
} from '@siberui/react';

Neon Cyberpunk Variant

The variant="neon" preset formats breadcrumb paths into futuristic terminal routes. Links feature glowing cyan hover states, and the active page node is highlighted in an illuminated status capsule.

tsx

<Breadcrumb variant="neon">
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">
        <Terminal className="h-3.5 w-3.5 text-cyan-400" />
        root
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#">clusters</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#">us-east-zone-01</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>
        <Cpu className="h-3.5 w-3.5 text-cyan-400" />
        neural-core.conf
      </BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Cyber Separators (Slash, Double Colon, Arrow)

Customize delimiters across the entire navigation hierarchy using the separator prop or inline on <BreadcrumbSeparator />.

Unix Path Format

Scope Namespace (::)

tsx

<div className="space-y-4">
  {/* Unix Slash separator */}
  <Breadcrumb variant="neon" separator={<span className="text-cyan-500/50">/</span>}>
    <BreadcrumbList>
      <BreadcrumbItem><BreadcrumbLink href="#">sys</BreadcrumbLink></BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem><BreadcrumbLink href="#">telemetry</BreadcrumbLink></BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem><BreadcrumbPage>live_stream.log</BreadcrumbPage></BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>

  {/* C++ / Rust Scope Operator (::) */}
  <Breadcrumb variant="neon" separator={<span className="text-cyan-400/60 font-mono font-bold">::</span>}>
    <BreadcrumbList>
      <BreadcrumbItem><BreadcrumbLink href="#">std</BreadcrumbLink></BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem><BreadcrumbLink href="#">crypto</BreadcrumbLink></BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem><BreadcrumbPage>QuantumCipher</BreadcrumbPage></BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</div>

Glass Variant

The variant="glass" style blends frosted translucent navigation links seamlessly across complex cyberpunk textures.

tsx

<div className="p-8 rounded-2xl border border-white/10 bg-[#060913] bg-[url('/textures/circuit-board.svg')] bg-repeat">
  <Breadcrumb variant="glass">
    <BreadcrumbList>
      <BreadcrumbItem><BreadcrumbLink href="#">Security Hub</BreadcrumbLink></BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem><BreadcrumbLink href="#">Access Control</BreadcrumbLink></BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem><BreadcrumbPage>Zero-Trust Policies</BreadcrumbPage></BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</div>

With System & Node Icons

Embed Lucide icons within links and pages to provide rich visual context for servers, databases, and microservices.

tsx

<Breadcrumb variant="neon">
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">
        <Server className="h-3.5 w-3.5 text-cyan-400" />
        Infrastructure
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#">
        <Database className="h-3.5 w-3.5 text-cyan-400" />
        PostgreSQL-Master
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>
        <FileCode className="h-3.5 w-3.5 text-cyan-400" />
        schema_v4.sql
      </BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Collapsed Paths (Ellipsis)

Use <BreadcrumbEllipsis /> to cleanly abbreviate deep hierarchy trees on mobile viewports or dense toolbars.

tsx

<Breadcrumb variant="neon">
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="#">~</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbLink href="#">deployments</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>edge_gateway.yaml</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

HUD Header Bar Composition

An example of how Neon breadcrumbs integrate into a production Cyberpunk command header alongside status badges and telemetry controls.

ONLINE

tsx

<div className="w-full p-4 rounded-xl bg-[#070b14] border border-cyan-500/30 flex items-center justify-between shadow-2xl">
  <Breadcrumb variant="neon">
    <BreadcrumbList>
      <BreadcrumbItem><BreadcrumbLink href="#">COMMAND</BreadcrumbLink></BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem><BreadcrumbLink href="#">SECTOR_07</BreadcrumbLink></BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem><BreadcrumbPage>GRID_ROUTER</BreadcrumbPage></BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>

  <Row gap="sm" align="center">
    <Badge variant="neon" dot dotColor="green">ONLINE</Badge>
    <Button size="sm" variant="outline">Telemetry</Button>
  </Row>
</div>

API Reference

PROPERTIES (2)← swipe to inspect →

Property	Description	Type	Default
variant	Visual preset theme styling applied across breadcrumb children.	"default" \| "neon" \| "glass" \| "ghost"	"default"
separator	Custom delimiter element rendered between breadcrumb items.	React.ReactNode	<ChevronRight />

Accessibility

Wraps elements in a semantic <nav aria-label="breadcrumb"> container.
The active page element automatically receives aria-current="page".
Separators are marked with aria-hidden="true" and role="presentation" so screen readers ignore decorative characters.

Best Practices

Terminal Paths: In developer or operations dashboards, pair variant="neon" with slash / or double colon :: separators for authentic system routing.
Mobile Collapsing: Collapse middle levels with <BreadcrumbEllipsis /> to prevent multi-line wrapping on narrow displays.