Breadcrumbs

Shows the path to the current page; the last item is the current location. Use size (xs, sm, md, lg, xl) to change density.

Jump to API reference

Import

Vue

import { UiBreadcrumbs } from '@ziyarago/ui/vue'

Default

Vue

<UiBreadcrumbs
  :items="[{ label: 'Home', href: '#' }, { label: 'Hotels', href: '#' }, { label: 'Makkah', href: '#' }, { label: 'Hilton Suites' }]"
 />

Short

Vue

<UiBreadcrumbs
  :items="[{ label: 'Tours', href: '#' }, { label: 'Umrah 14 days' }]"
 />

Sizes

Vue

<UiBreadcrumbs
  :items="[{ label: 'Home', href: '#' }, { label: 'Hotels', href: '#' }, { label: 'Hilton Suites' }]"
  size="xs"
 />

<UiBreadcrumbs
  :items="[{ label: 'Home', href: '#' }, { label: 'Hotels', href: '#' }, { label: 'Hilton Suites' }]"
  size="sm"
 />

<UiBreadcrumbs
  :items="[{ label: 'Home', href: '#' }, { label: 'Hotels', href: '#' }, { label: 'Hilton Suites' }]"
  size="md"
 />

<UiBreadcrumbs
  :items="[{ label: 'Home', href: '#' }, { label: 'Hotels', href: '#' }, { label: 'Hilton Suites' }]"
  size="lg"
 />

<UiBreadcrumbs
  :items="[{ label: 'Home', href: '#' }, { label: 'Hotels', href: '#' }, { label: 'Hilton Suites' }]"
  size="xl"
 />

API reference

Path trail with chevron separators; the last item is the current page.

Props

PropType and valuesDefaultDescription

items{ label: string; href?: string }[]'[]'Trail from root to current. All but the last render as links (href defaults to "#"); the last is bold with aria-current="page".

sizexssmmdlgxl'md'Scale of text and separator size.

separatorchevronslashdot'chevron'Glyph between items.