Breadcrumb

Hierarchical path navigation built on native nav + ol semantics. The current page is marked with aria-current="page" and rendered as plain text; separators and collapsing are customizable.

Basic Usage

Basic Usage

1. Home
2. Components
3. Breadcrumb

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem>Home</LhBreadcrumbItem>
    <LhBreadcrumbItem>Components</LhBreadcrumbItem>
    <LhBreadcrumbItem>Breadcrumb</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem>Home</LhBreadcrumbItem>
    <LhBreadcrumbItem>Components</LhBreadcrumbItem>
    <LhBreadcrumbItem>Breadcrumb</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

Link Navigation

Link Navigation

1. Home
2. Guide
3. Current Page

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/">Home</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/en/guide">Guide</LhBreadcrumbItem>
    <LhBreadcrumbItem>Current Page</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/">Home</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/en/guide">Guide</LhBreadcrumbItem>
    <LhBreadcrumbItem>Current Page</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

Replace mode

1. Replace history
2. Current page

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/" replace>Replace history</LhBreadcrumbItem>
    <LhBreadcrumbItem>Current page</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/" replace>Replace history</LhBreadcrumbItem>
    <LhBreadcrumbItem>Current page</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

Items with to render as <a>; when vue-router is detected the navigation goes through the router (replace controls history replacement), otherwise it stays native. The last item always renders as the current-page text.

Custom Separator

Custom Separator

1. Home
2. Components
3. Own Separator

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb separator="·">
    <LhBreadcrumbItem to="/">Home</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/en/components">Components</LhBreadcrumbItem>
    <LhBreadcrumbItem>
      <template #separator>➜</template>
      Own Separator
    </LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb separator="·">
    <LhBreadcrumbItem to="/">Home</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/en/components">Components</LhBreadcrumbItem>
    <LhBreadcrumbItem>
      <template #separator>➜</template>
      Own Separator
    </LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

Collapsing

Collapsing

1. Home
2. Level A
3. Level B
4. Level C
5. Current Page

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb :max-items="3">
    <LhBreadcrumbItem to="/">Home</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a">Level A</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b">Level B</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b/c">Level C</LhBreadcrumbItem>
    <LhBreadcrumbItem>Current Page</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb :max-items="3">
    <LhBreadcrumbItem to="/">Home</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a">Level A</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b">Level B</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b/c">Level C</LhBreadcrumbItem>
    <LhBreadcrumbItem>Current Page</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

Beyond maxItems, the first item plus an ellipsis plus the trailing items stay visible; clicking the ellipsis expands everything.

Breadcrumb API

Props

Prop	Description	Type	Default
separator	Separator character	string	'/'
maxItems	Max visible items (first + ellipsis + trailing items); collapses beyond it	number	0
sx	sx quick-layout props	LhSxProps	—

LhBreadcrumbItem Props

Prop	Description	Type	Default
to	Link target; renders as a link when set on non-last items	string	—
replace	Use router replace when navigating via vue-router	boolean	false

Slots

Slot	Description	Component
default	Breadcrumb items	LhBreadcrumb
default	Item content	LhBreadcrumbItem
separator	Custom separator (overrides the global separator)	LhBreadcrumbItem

Accessibility

• The root is <nav aria-label> (from the breadcrumb.label locale message) wrapping an <ol>; semantic order matches document order
• The last item renders as text with aria-current="page" and stays unclickable even when to is set
• Separators are aria-hidden="true" and excluded from the accessibility tree
• The collapsed ellipsis is a real <button> whose aria-label comes from the breadcrumb.more locale message; clicking expands all items

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/breadcrumb/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhBreadcrumbProps

export interface LhBreadcrumbProps {
  separator?: string
  maxItems?: number
  sx?: LhSxProps
}

LhBreadcrumbItemProps

export interface LhBreadcrumbItemProps {
  to?: string
  replace?: boolean
}