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

• /
• Home/
• Electronics/
• Mobiles/

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

• Home/
• Electronics/
• Mobiles/

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

Custom Separator

• >
• Home>
• Electronics>
• Mobiles>

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

With Overflow

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

• /
• Breadcrumb1/
• .../
• Breadcrumb6/
• Breadcrumb7/

Vue

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

Breadcrumbs

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',
  },
]

Imports

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

Props

HLBreadcrumb Props

Name	Type	Default	Description
id *	string | undefined	undefined	Unique identifier for the breadcrumb
separator	string	/	Custom separator between breadcrumb items
size	'sm' | 'md' | 'lg'	lg	Size of the breadcrumb
home	boolean	true	Whether to show home icon
breadcrumbs	BreadcrumbItem[] | null	null	Array of breadcrumb items with label and href

Breadcrumb Item Type

interface BreadcrumbItem {
  label: string
  href?: string
  clickable?: boolean
}