Ember UI LogoEmber UI
Components

Breadcrumb

A breadcrumb component

Preview

Loading...
import Link from "next/link";import {  Breadcrumb,  BreadcrumbEllipsis,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbList,  BreadcrumbPage,  BreadcrumbSeparator,} from "@/registry/axon/ui/breadcrumb";import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuItem,  DropdownMenuTrigger,} from "@/registry/axon/ui/dropdown-menu";export default function BreadcrumbDemo() {  return (    <Breadcrumb>      <BreadcrumbList>        <BreadcrumbItem>          <BreadcrumbLink asChild>            <Link href="/">Home</Link>          </BreadcrumbLink>        </BreadcrumbItem>        <BreadcrumbSeparator />        <BreadcrumbItem>          <DropdownMenu>            <DropdownMenuTrigger className="flex items-center gap-1">              <BreadcrumbEllipsis className="size-4" />              <span className="sr-only">Toggle menu</span>            </DropdownMenuTrigger>            <DropdownMenuContent align="start">              <DropdownMenuItem>Documentation</DropdownMenuItem>              <DropdownMenuItem>Themes</DropdownMenuItem>              <DropdownMenuItem>GitHub</DropdownMenuItem>            </DropdownMenuContent>          </DropdownMenu>        </BreadcrumbItem>        <BreadcrumbSeparator />        <BreadcrumbItem>          <BreadcrumbLink asChild>            <Link href="/docs/components">Components</Link>          </BreadcrumbLink>        </BreadcrumbItem>        <BreadcrumbSeparator />        <BreadcrumbItem>          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>        </BreadcrumbItem>      </BreadcrumbList>    </Breadcrumb>  );}

Installation

CLI

npx shadcn@latest add @emberui/breadcrumb
yarn shadcn@latest add @emberui/breadcrumb
pnpm dlx shadcn@latest add @emberui/breadcrumb
bunx --bun shadcn@latest add @emberui/breadcrumb

Reference

This component is based on the shadcn/ui Breadcrumb component.

On this page