N Breadcrumb

Naive UI Breadcrumb Component

Breadcrumb component for displaying navigation paths and current location within an application.

When to Use

Use this component when:

• Page hierarchy: Show the path from home to current page
• Navigation context: Help users understand their location
• Quick navigation: Allow users to jump to parent pages
• E-commerce: Display category paths for products

When to Invoke

Invoke this skill when:

• User needs to implement breadcrumb navigation
• User wants to display navigation hierarchy
• User needs custom separators between items
• User wants to integrate dropdown menus in breadcrumbs
• User asks about navigation path display

Features

• Custom Separators: Configure separator text or use slots
• Dropdown Integration: Support for dropdown menus in items
• Icon Support: Add icons to breadcrumb items
• Link Support: Items can be clickable links
• Per-Item Separators: Customize separator for each item

API Reference

Breadcrumb Props

BreadcrumbItem Props

Breadcrumb Slots

BreadcrumbItem Slots

Basic Usage

Basic Breadcrumb

<template>
  <n-breadcrumb>
    <n-breadcrumb-item>
      <n-icon :component="HomeIcon" /> Home
    </n-breadcrumb-item>
    <n-breadcrumb-item>
      <n-icon :component="AccountIcon" /> Account
    </n-breadcrumb-item>
    <n-breadcrumb-item>
      <n-icon :component="CategoryIcon" /> Category
    </n-breadcrumb-item>
  </n-breadcrumb>
</template>

Custom Separator

<template>
  <n-breadcrumb separator=">">
    <n-breadcrumb-item>
      <n-icon><HomeIcon /></n-icon> Home
    </n-breadcrumb-item>
    <n-breadcrumb-item>
      <n-icon><AccountIcon /></n-icon> Account
    </n-breadcrumb-item>
    <n-breadcrumb-item>
      <n-icon><CategoryIcon /></n-icon> Category
    </n-breadcrumb-item>
  </n-breadcrumb>
</template>

Custom Separator by Item

<template>
  <n-breadcrumb>
    <n-breadcrumb-item separator=">">
      <n-icon><HomeIcon /></n-icon> Home
    </n-breadcrumb-item>
    <n-breadcrumb-item>
      <n-icon><AccountIcon /></n-icon> Account
      <template #separator>
        ~
      </template>
    </n-breadcrumb-item>
    <n-breadcrumb-item>
      <n-icon><CategoryIcon /></n-icon> Category
    </n-breadcrumb-item>
  </n-breadcrumb>
</template>

Common Patterns

Breadcrumb with Dropdown

<template>
  <n-breadcrumb>
    <n-breadcrumb-item>
      <n-dropdown :options="options1">
        <div class="trigger">
          Home
        </div>
      </n-dropdown>
    </n-breadcrumb-item>
    <n-breadcrumb-item>
      <n-dropdown :options="options2">
        <div class="trigger">
          Category
        </div>
      </n-dropdown>
    </n-breadcrumb-item>
  </n-breadcrumb>
</template>

<style scoped>
.trigger::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: inherit;
}
</style>

Breadcrumb with Router

<template>
  <n-breadcrumb>
    <n-breadcrumb-item href="/">
      Home
    </n-breadcrumb-item>
    <n-breadcrumb-item href="/products">
      Products
    </n-breadcrumb-item>
    <n-breadcrumb-item>
      {{ currentProduct }}
    </n-breadcrumb-item>
  </n-breadcrumb>
</template>

<script setup>
import { ref } from 'vue'

const currentProduct = ref('Product Name')
</script>

Non-clickable Breadcrumb

<template>
  <n-breadcrumb>
    <n-breadcrumb-item :clickable="false">
      Home
    </n-breadcrumb-item>
    <n-breadcrumb-item :clickable="false">
      Category
    </n-breadcrumb-item>
    <n-breadcrumb-item :clickable="false">
      Current Page
    </n-breadcrumb-item>
  </n-breadcrumb>
</template>

Hide Last Separator

<template>
  <n-breadcrumb>
    <n-breadcrumb-item>Home</n-breadcrumb-item>
    <n-breadcrumb-item>Category</n-breadcrumb-item>
    <n-breadcrumb-item :show-separator="false">
      Current Page
    </n-breadcrumb-item>
  </n-breadcrumb>
</template>

Best Practices

1. Show full path: Display the complete navigation path from home to current page

2. Make parent items clickable: Allow users to navigate to parent pages easily

3. Current page not clickable: The last item (current page) should not be a link

4. Use icons sparingly: Icons can help but don't overuse them

5. Consistent separators: Use consistent separators throughout the application

6. Dropdown for alternatives: Use dropdowns when there are sibling pages to navigate to