n-breadcrumb

name	n-breadcrumb
description	Breadcrumb component for navigation path display. Invoke when user needs to implement breadcrumb navigation, show current location, or navigation hierarchy in Naive UI.
metadata	{"author":"jiaiyan","version":"1.0.0"}

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

Name	Type	Default	Description
separator	string	'/'	Breadcrumb separator.

BreadcrumbItem Props

Name	Type	Default	Description	Version
clickable	boolean	true	Whether it's clickable.	2.30.0
href	string	undefined	BreadcrumbItem link.
separator	string	undefined	BreadcrumbItem separator.
show-separator	boolean	true	Whether to show the separator.	2.44.0

Breadcrumb Slots

Name	Parameters	Description
default	()	Breadcrumb default slot.

BreadcrumbItem Slots

Name	Parameters	Description
default	()	BreadcrumbItem default slot.
separator	()	BreadcrumbItem separator slot.

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