t-crumbs

This component is a navigational helper. It provides a way to create links and texts to based on the current navigation. It also accepts separator, prepend and append slots.

Basic usage

<TCrumbs
  items={[
    { label: "Home", to: { name: "home" } },
    { label: "Cars", to: { name: "cars" } },
    { label: "Ford" }, //
  ]}
/>

Icon

Cars

Ford

<TCrumbs
  items={[
    { icon: "mdi:home", label: "Home", to: { name: "home" } },
    { label: "Cars", to: { name: "cars" } },
    { label: "Ford" }, //
  ]}
/>

Prepend and Append Slots

<TCrumbs
  color="surface"
  link-color="surface"
  weight="normal"
  prepend={() => (
    <TLink color="surface" to="/" me="sm">
      <TIcon size="20" icon="mdi:account-circle" />
    </TLink>
  )}
  append={() => (
    <TLink color="surface" to="/" ms="sm">
      <TIcon size="20" icon="mdi:close" />
    </TLink>
  )}
  items={[]}
/>

Separator, Size and Align

<TCrumbs
  size="sm"
  align="center"
  link-color="danger"
  separator={() => <TIcon size="18" icon="mdi:menu-right" />}
  items={[]}
/>

API

No options available