원클릭으로 Manus에서 모든 스킬 실행

n-breadcrumb

스타39

포크7

업데이트2026년 7월 13일 06:14

Breadcrumb component for navigation path display. Invoke when user needs to implement breadcrumb navigation, show current location, or navigation hierarchy in Naive UI.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

Big0range

Big0range/vane

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

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

Show full path: Display the complete navigation path from home to current page
Make parent items clickable: Allow users to navigate to parent pages easily
Current page not clickable: The last item (current page) should not be a link
Use icons sparingly: Icons can help but don't overuse them
Consistent separators: Use consistent separators throughout the application
Dropdown for alternatives: Use dropdowns when there are sibling pages to navigate to

이 저장소의 다른 Skills

같은 저장소

formcreate

Big0range/vane

FormCreate（运行态渲染器）使用与扩展助手：围绕 rule/option/api 的编写、调试与迁移，覆盖 v-model:api / create 获取实例、字段联动（control/computed）、校验（validate）、远程 fetch、事件注入（inject/formCreateInject）、序列化保存回显（parseJson/toJson）以及多 UI 栈（Antd/Naive/Vant/Arco/TDesign/Element）props/on 差异。权威口径以 `AGENTS.md` 与 `references/types.md` 为准；涉及设计器 ref/config 请用 **FcDesigner使用助手**，涉及安装与包名请选择 **FormCreate安装助手**。

2026-07-1339

naive-ui-skills

Big0range/vane

Naive UI Skills Library - A comprehensive skill library for AI agents to understand and utilize Naive UI components. Invoke when user needs to work with Naive UI components, theming, i18n, dark mode, or design specifications.

2026-07-1339

server

Big0range/vane

Work on the Vane server app in apps/server. Use when adding, modifying, reviewing, or debugging server routes, serve-layer data access, middlewares, auth, logging, uploads, database-backed features, or Express response behavior in this repository.

2026-07-1339

n-affix

Big0range/vane

Affix component that makes content stick to fixed places when scrolling. Invoke when user needs to implement sticky positioning or fixed elements in Naive UI.

2026-07-1339

n-alert

Big0range/vane

Alert component for displaying important messages and notifications. Invoke when user needs to show contextual feedback messages with different types and styles in Naive UI.

2026-07-1339

n-anchor

Big0range/vane

Anchor component for navigation and table of contents. Invoke when user needs to implement anchor navigation, table of contents, or scroll-based navigation highlighting in Naive UI.

2026-07-1339

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

Show full path: Display the complete navigation path from home to current page
Make parent items clickable: Allow users to navigate to parent pages easily
Current page not clickable: The last item (current page) should not be a link
Use icons sparingly: Icons can help but don't overuse them
Consistent separators: Use consistent separators throughout the application
Dropdown for alternatives: Use dropdowns when there are sibling pages to navigate to