Breadcrumb

Navigation trail showing the current page location within a hierarchy. Marks the last item with aria-current="page".

Import

tsx

import { Breadcrumb } from '@velocityuikit/velocityui'

Preview

Basic

Custom separator

Single level

Props

Prop	Type	Default	Description
items	`{ label: string; href?: string }[]`	—	Array of breadcrumb entries. The last item is rendered as static text (current page).
separator	`ReactNode`	—	Custom separator element. Defaults to a chevron-right icon.

Examples

Basic

tsx

import { Breadcrumb } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <Breadcrumb
      items={[
        { label: 'Home', href: '/' },
        { label: 'Products', href: '/products' },
        { label: 'Running Shoes' },
      ]}
    />
  )
}

Custom separator

tsx

import { Breadcrumb } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <Breadcrumb
      separator={<span style={{ color: '#94a3b8' }}>/</span>}
      items={[
        { label: 'Dashboard', href: '/dashboard' },
        { label: 'Settings', href: '/settings' },
        { label: 'Profile' },
      ]}
    />
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */