zynactradocs

Breadcrumb

Where the current page sits in the hierarchy, with a link back to each level.

Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@zynactra/ui/breadcrumb"
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Workspace</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Settings</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

To use your router's link, pass it through render: <BreadcrumbLink render={<Link href="/" />}>Workspace</BreadcrumbLink>.

Guidelines

  • The last item is the current page, as BreadcrumbPage, not a link.
  • Past four levels, collapse the middle into BreadcrumbEllipsis with a dropdown.
  • Breadcrumbs supplement the sidebar; they never replace it.
Edit on GitHub

Badge

Short status and metadata labels, set in mono capitals.

Bubble

The text container of a chat message, in seven variants, with optional reactions.

On this page

UsageGuidelines