Breadcrumb

Show the current page's location within a navigational hierarchy.
alphaView source
vue
<script setup lang="ts">
import { Breadcrumb, BreadcrumbItem } from '@typlog/ui'
</script>

<template>
  <Breadcrumb>
    <BreadcrumbItem href="#">Dashboard</BreadcrumbItem>
    <BreadcrumbItem href="#">Analytics</BreadcrumbItem>
    <BreadcrumbItem>Traffic</BreadcrumbItem>
  </Breadcrumb>
</template>

Breadcrumb renders a named navigation landmark and leaves routing to the application. BreadcrumbItem renders a link when href, as, or as-child is provided. Without one of those link targets, it renders the current page. Use as or as-child to compose a router link.

API Reference ​

PropDefaultType
label"Breadcrumb"
string

The accessible name for the navigation landmark.

size"2"
"1""2""3"

Controls the breadcrumb typography and spacing.

PropDefaultType
as
–
AsTagComponent

The element or component used for the item's content.

asChild
–
boolean

Uses the slotted child as the item's link or current-page element.

current
–
boolean

Marks the item as the current page. Defaults to true when no link target or custom component is provided.

href
–
string

Link destination. Omit for the current page.

Last updated Sep 15, 2026
Icon ButtonCard