Breadcrumbs

Use breadcrumbsto display the current navigation path.

Items and separators can be customized via slots.

<script setup lang="ts">
import { NNBreadcrumbs } from "@fronntui/vue";
</script>

<template>
  <NNBreadcrumbs :crumbs="crumbs" />

  <NNBreadcrumbs :crumbs="crumbs">
    <template #crumb="{ crumb }">
      <a :href="crumb.link">
        <template v-if="crumb.link === '/'">🏠</template>
        <template v-else>{{ crumb.label }}</template>
      </a>
    </template>
    <template #separator> &raquo; </template>
  </NNBreadcrumbs>
</template>

Props

Name

Type

crumbs

Array<{ label: string; link: string }>

The list of crumbs

Slots

Name

Binding

crumb

{ crumb: { label: string; link: string; } }

Overwrite the default rendering of a crumb label

separator

{ idx: number }

Overwrite the default rendering of a separator. idx is the index of the crumb after which the separator is displayed.

Badge Button