← Frontic UI
breadcrumb

Breadcrumb

Shows where the current page sits, such as Home / Jackets / Rain jackets, with links up the trail and an ellipsis for steps it hides.

States: Default, Hover

Parts

PartFileDoes
BreadcrumbBreadcrumb.vueGroups all parts of the breadcrumb, which shows where the current page sits.
BreadcrumbEllipsisBreadcrumbEllipsis.vueStands in for breadcrumb steps that are hidden to save space.
BreadcrumbItemBreadcrumbItem.vueGroups one step of the breadcrumb trail.
BreadcrumbLinkBreadcrumbLink.vueLinks to a higher level of the breadcrumb trail.
BreadcrumbListBreadcrumbList.vueLists the steps of the breadcrumb in order.
BreadcrumbPageBreadcrumbPage.vueMarks the current page as the last step of the breadcrumb.
BreadcrumbSeparatorBreadcrumbSeparator.vueSeparates two steps of the breadcrumb.

Anatomy

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink />
      <BreadcrumbEllipsis />
      <BreadcrumbPage />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
  </BreadcrumbList>
</Breadcrumb>

Styling

PartRecipe
BreadcrumbEllipsisbreadcrumb-ellipsis
BreadcrumbItembreadcrumb-item
BreadcrumbLinkbreadcrumb-link
BreadcrumbListbreadcrumb-list
BreadcrumbPagebreadcrumb-page
BreadcrumbSeparatorbreadcrumb-separator

Install

Writes 8 files into components/ui/breadcrumb/. For agents, npx @frontic/ui docs breadcrumb prints this reference as markdown; the MCP server serves the same.

npm packages
@lucide/vue
reka-ui

API reference

Example
State