@hanzo/ui
GitHubnpm
AccordionAlert DialogAspect RatioAvatarBadgeButtonCardCheckboxCollapsibleCommandContext MenuDialogDropdown MenuGlassHover CardInputLabelPopoverProgressRadio GroupResizableLayoutScroll AreaSelectBandScreenSliderSpinnerSwitchTabsTextareaToasterToggle GroupTooltipFormProseLinkVideoCarouselSheetSkeletonMedia StackNav ItemsBreadcrumbStep IndicatorInput OtpNavigation MenuDrawer

Breadcrumb

import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@hanzo/ui'

Default

A nav around an ordered list: linked steps, a slash between them, and the current page last with `aria-current`.

export function Default() {

  return (

    <Breadcrumb>

      <BreadcrumbList>

        <BreadcrumbItem>

          <BreadcrumbLink href="/">Home</BreadcrumbLink>

        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>

          <BreadcrumbLink href="/catalog">Catalog</BreadcrumbLink>

        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>

          <BreadcrumbLink href="/catalog/bags">Bags</BreadcrumbLink>

        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>

          <BreadcrumbPage>Weekender</BreadcrumbPage>

        </BreadcrumbItem>

      </BreadcrumbList>

    </Breadcrumb>

  )

}

Without href

A `BreadcrumbLink` with no `href` renders as plain text, for a group like Settings that has no page of its own.

export function WithoutHref() {

  return (

    <Breadcrumb>

      <BreadcrumbList>

        <BreadcrumbItem>

          <BreadcrumbLink href="/">Home</BreadcrumbLink>

        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>

          <BreadcrumbLink>Settings</BreadcrumbLink>

        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>

          <BreadcrumbPage>Billing</BreadcrumbPage>

        </BreadcrumbItem>

      </BreadcrumbList>

    </Breadcrumb>

  )

}

Separator

Children of `BreadcrumbSeparator` replace the default slash, here with a chevron.

export function Separator() {

  return (

    <Breadcrumb>

      <BreadcrumbList>

        <BreadcrumbItem>

          <BreadcrumbLink href="/">Home</BreadcrumbLink>

        </BreadcrumbItem>

        <BreadcrumbSeparator>

          <ChevronRight size={14} />

        </BreadcrumbSeparator>

        <BreadcrumbItem>

          <BreadcrumbLink href="/projects">Projects</BreadcrumbLink>

        </BreadcrumbItem>

        <BreadcrumbSeparator>

          <ChevronRight size={14} />

        </BreadcrumbSeparator>

        <BreadcrumbItem>

          <BreadcrumbLink href="/projects/ui">ui</BreadcrumbLink>

        </BreadcrumbItem>

        <BreadcrumbSeparator>

          <ChevronRight size={14} />

        </BreadcrumbSeparator>

        <BreadcrumbItem>

          <BreadcrumbPage>Pull requests</BreadcrumbPage>

        </BreadcrumbItem>

      </BreadcrumbList>

    </Breadcrumb>

  )

}

Collapsed

`BreadcrumbEllipsis` stands in for the middle of a trail too long to show whole, keeping the first step and the last two.

export function Collapsed() {

  return (

    <Breadcrumb>

      <BreadcrumbList>

        <BreadcrumbItem>

          <BreadcrumbLink href="/ui">ui</BreadcrumbLink>

        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>

          <BreadcrumbEllipsis />

        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>

          <BreadcrumbLink href="/ui/pkg/ui/src/backends">

            backends

          </BreadcrumbLink>

        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>

          <BreadcrumbLink href="/ui/pkg/ui/src/backends/gui">

            gui

          </BreadcrumbLink>

        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>

          <BreadcrumbPage>breadcrumb.tsx</BreadcrumbPage>

        </BreadcrumbItem>

      </BreadcrumbList>

    </Breadcrumb>

  )

}

With menu

The ellipsis sits in a dropdown trigger, so the collapsed steps stay one click away.

export function WithMenu() {

  return (

    <Breadcrumb>

      <BreadcrumbList>

        <BreadcrumbItem>

          <BreadcrumbLink href="/">Home</BreadcrumbLink>

        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>

          <DropdownMenu>

            <DropdownMenuTrigger asChild>

              <Button
                variant="ghost"
                size="icon-sm"
                aria-label="Show hidden steps"
              >

                <BreadcrumbEllipsis />

              </Button>

            </DropdownMenuTrigger>

            <DropdownMenuContent align="start">

              <DropdownMenuItem>Settings</DropdownMenuItem>

              <DropdownMenuItem>Organization</DropdownMenuItem>

            </DropdownMenuContent>

          </DropdownMenu>

        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>

          <BreadcrumbLink href="/settings/organization/billing">

            Billing

          </BreadcrumbLink>

        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>

          <BreadcrumbPage>Invoice 4821</BreadcrumbPage>

        </BreadcrumbItem>

      </BreadcrumbList>

    </Breadcrumb>

  )

}

Types

This module declares no types of its own.

Exports

BreadcrumbBreadcrumbEllipsisBreadcrumbItemBreadcrumbLinkBreadcrumbListBreadcrumbPageBreadcrumbSeparator