HighRise
RTL Support: Full
Accessibility: Full
Translations: Not Needed
Migration Guide: Full

Breadcrumb ​

Navigation component that helps users keep track of their location within a website or application.

Basic Usage ​

Render a breadcrumb trail by passing an array of items to the breadcrumbs prop.

vue
<template>
  <HLBreadcrumb :breadcrumbs="breadcrumbs" id="example-breadcrumb-basic"> </HLBreadcrumb>
</template>
<script setup>
  import { HLBreadcrumb } from '@platform-ui/highrise'

  const breadcrumbs = [
    {
      label: 'Home',
      href: 'https://google.com',
    },
    {
      label: 'Electronics',
      href: 'https://google.com',
    },
    {
      label: 'Mobiles',
      href: 'https://google.com',
    },
  ]
</script>

Without Home Icon ​

Set the home prop to false to hide the leading home icon.

vue
<template>
  <HLBreadcrumb :breadcrumbs="breadcrumbs" id="example-breadcrumb-basic" :home="false"> </HLBreadcrumb>
</template>
<script setup>
  import { HLBreadcrumb } from '@platform-ui/highrise'

  const breadcrumbs = [
    {
      label: 'Home',
      href: 'https://google.com',
    },
    {
      label: 'Electronics',
      href: 'https://google.com',
    },
    {
      label: 'Mobiles',
      href: 'https://google.com',
    },
  ]
</script>

Custom Separator ​

Pass the separator prop to replace the default slash between items.

vue
<template>
  <HLBreadcrumb :breadcrumbs="breadcrumbs" id="example-breadcrumb-basic" separator=">"> </HLBreadcrumb>
</template>
<script setup>
  import { HLBreadcrumb } from '@platform-ui/highrise'

  const breadcrumbs = [
    {
      label: 'Home',
      href: 'https://google.com',
    },
    {
      label: 'Electronics',
      href: 'https://google.com',
    },
    {
      label: 'Mobiles',
      href: 'https://google.com',
    },
  ]
</script>

Handling Navigation ​

Use onClick handlers for custom navigation logic instead of href when you need programmatic control over navigation. The handler receives the item's label string as its only argument.

Each item's navigation behavior follows these rules:

  • onClick takes precedence over href. When an item defines onClick, its href is ignored — the handler runs and default browser navigation is prevented. Provide either onClick (for programmatic navigation) or href (for standard link navigation), not both.
  • clickable: false makes an item inert. It renders as plain, non-interactive text — no link is produced and any onClick is skipped.
  • The current (last) item is never a link. The final crumb is treated as the current page: it is not linked and does not fire onClick.

The home icon follows the same pattern through its own pair of props: onHomeClick for programmatic navigation, homeHref for a standard link. Setting onHomeClick drops the href and prevents default navigation, so use one or the other. The handler always receives the literal string 'Home' rather than a breadcrumb label.

vue
<template>
  <HLBreadcrumb :breadcrumbs="clickableBreadcrumbs" id="example-breadcrumb-onclick" :onHomeClick="handleHomeClick"> </HLBreadcrumb>
</template>
<script setup>
  import { HLBreadcrumb } from '@platform-ui/highrise'

  const handleHomeClick = () => {
    console.log('Navigate to Home')
    // Your custom navigation logic here
  }

  const clickableBreadcrumbs = [
    {
      label: 'Dashboard',
      onClick: label => console.log('Navigate to Dashboard:', label),
    },
    {
      label: 'Users',
      onClick: label => console.log('Navigate to Users:', label),
    },
    {
      label: 'Profile', // Current page - no onClick
    },
  ]
</script>

With Overflow ​

Overflow will comes into play when the breadcrumb items are more than or equal to 4.

vue
<template>
  <HLBreadcrumb :breadcrumbs="longBreadcrumbs" home id="example-breadcrumb-overflow"> </HLBreadcrumb>
</template>
<script setup>
  import { HLBreadcrumb } from '@platform-ui/highrise'
  import { longBreadcrumbs } from './breadcrumbs'
</script>
ts
export const longBreadcrumbs = [
  {
    label: 'Breadcrumb1',
    href: 'https://google.com',
  },
  {
    label: 'Breadcrumb2',
    href: 'https://google.com',
  },
  {
    label: 'Breadcrumb3',
    href: 'https://google.com',
  },
  {
    label: 'Breadcrumb4',
    href: 'https://google.com',
  },
  {
    label: 'Breadcrumb5',
    href: 'https://google.com',
  },
  {
    label: 'Breadcrumb6',
    href: 'https://google.com',
  },
  {
    label: 'Breadcrumb7',
  },
]

Accessibility ​

  • Set aria-current="page" on the final crumb and avoid linking it to prevent redundant focus stops.
  • Use aria-label on truncated crumbs so the full destination is announced.

Imports ​

ts
import { HLBreadcrumb } from '@platform-ui/highrise'

Props ​

HLBreadcrumb Props ​

NameTypeDefaultDescription
id *string | undefinedundefinedUnique identifier for the breadcrumb
separatorstring/Custom separator between breadcrumb items
size'sm' | 'md' | 'lg'lgSize of the breadcrumb
homebooleantrueWhether to show home icon
homeHrefstring/URL for home icon navigation (used when no onHomeClick)
onHomeClick(label: string) => voidundefinedClick handler for the home icon, always called with 'Home'. Takes precedence over homeHref
breadcrumbsBreadcrumbItem[] | nullnullArray of breadcrumb items with label and href
ts
interface BreadcrumbItem {
  label: string
  href?: string
  clickable?: boolean
  onClick?: (label: string) => void
}
NameTypeDefaultDescription
label *string-Text shown for the crumb
hrefstringundefinedURL for standard link navigation. Ignored when onClick is set, when clickable is false, or on the current (last) item
clickablebooleantrueSet to false to render the item as plain, non-interactive text — no link is produced and onClick is skipped
onClick(label: string) => voidundefinedHandler for programmatic navigation, called with the item's label. Takes precedence over href