Components

Breadcrumb

Shows the user's location in a navigational hierarchy.

example.tsx

Import

tsx

import { AppBreadcrumb, AppBreadcrumbList, AppBreadcrumbItem, AppBreadcrumbLink, AppBreadcrumbPage, AppBreadcrumbSeparator, AppBreadcrumbEllipsis } from "@/components/primitives/AppBreadcrumb"

Examples

Custom separator

Pass any icon or element as children of AppBreadcrumbSeparator to replace the default slash.

example.tsx

Dropdown

Combine AppBreadcrumbEllipsis with AppDropdownMenu to expose hidden segments on click.

example.tsx

Collapsed

Use AppBreadcrumbEllipsis as a static placeholder when a trail is too long to display in full.

example.tsx

Link component

Use asChild on AppBreadcrumbLink to delegate rendering to your router's link component (e.g. Next.js <Link>).

example.tsx

API Reference

AppBreadcrumb extends all native <nav> HTML attributes.

Component	Prop	Type	Description
AppBreadcrumbSeparator	children	ReactNode	Custom separator content. Defaults to a slash icon.
AppBreadcrumbLink	asChild	boolean	Delegates rendering to the child element — use with Next.js Link or other router links.
AppBreadcrumbLink	href	string	The URL the link navigates to.

Source

src/components/primitives/AppBreadcrumb.tsx

"use client"

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "../ui/breadcrumb"

function AppBreadcrumb(props: React.ComponentProps<typeof Breadcrumb>) {
  return <Breadcrumb {...props} />
}

function AppBreadcrumbList(props: React.ComponentProps<typeof BreadcrumbList>) {
  return <BreadcrumbList {...props} />
}

function AppBreadcrumbItem(props: React.ComponentProps<typeof BreadcrumbItem>) {
  return <BreadcrumbItem {...props} />
}

function AppBreadcrumbLink(props: React.ComponentProps<typeof BreadcrumbLink> & { asChild?: boolean }) {
  return <BreadcrumbLink {...props} />
}

function AppBreadcrumbPage(props: React.ComponentProps<typeof BreadcrumbPage>) {
  return <BreadcrumbPage {...props} />
}

function AppBreadcrumbSeparator(props: React.ComponentProps<typeof BreadcrumbSeparator>) {
  return <BreadcrumbSeparator {...props} />
}

function AppBreadcrumbEllipsis(props: React.ComponentProps<typeof BreadcrumbEllipsis>) {
  return <BreadcrumbEllipsis {...props} />
}

export {
  AppBreadcrumb,
  AppBreadcrumbList,
  AppBreadcrumbItem,
  AppBreadcrumbLink,
  AppBreadcrumbPage,
  AppBreadcrumbSeparator,
  AppBreadcrumbEllipsis,
}