HighRise
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 ​

Vue
html
<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 ​

Vue
html
<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',
    },
  ]
</script>

Custom Separator ​

Vue
html
<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',
    },
  ]
</script>

Using the onClick Handler ​

Use onClick handlers for custom navigation logic instead of href when you need programmatic control over navigation.

Vue
html
<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: item => console.log('Navigate to Dashboard:', item.label),
    },
    {
      label: 'Users',
      onClick: item => console.log('Navigate to Users:', item.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.

html
<template>
  <HLBreadcrumb :breadcrumbs="longBreadcrumbs" id="example-breadcrumb-overflow"> </HLBreadcrumb>
</template>
<script setup>
  import { HLBreadcrumb } from '@platform-ui/highrise'
</script>
ts
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 home icon (receives label string)
breadcrumbsBreadcrumbItem[] | nullnullArray of breadcrumb items with label and href
ts
interface BreadcrumbItem {
  label: string
  href?: string
  clickable?: boolean
  onClick?: (label: string) => void
}