skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-breadcrumb

Display navigation paths with customizable separators, icons, and dropdowns in Naive UI.

8|3|Updated Mar 13, 2026
Search Tags:#frontend#navigation#vue3#breadcrumb#dropdown#ui-component#naive-ui
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-breadcrumb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: n-breadcrumb
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-breadcrumb
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-breadcrumb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Breadcrumbs help users understand their location within a hierarchical structure and provide quick navigation back to previous sections, reducing cognitive load and improving UX.

Core Features & Use Cases

  • Custom separators between items to align with design guidelines.
  • Icon support and linkable items for rich navigation trails.
  • Per-item separators and dropdown integrations to handle complex hierarchies in dashboards, product catalogs, and detail views.
  • Common use cases include breadcrumbs in admin panels, e-commerce category paths, and multi-level site navigation for improved orientation.

Quick Start

Create an n-breadcrumb trail to display the current path and allow navigation to parent pages.

Frequently Asked Questions about n-breadcrumb

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement breadcrumb navigation in Vue3 using Naive UI?▼

Breadcrumb navigation in Vue3 with Naive UI is implemented by rendering hierarchical path items, enabling users to understand their location and quickly navigate back to parent sections to improve dashboard UX.

Can I add custom separators and icons to breadcrumb trails in Naive UI?▼

Yes, breadcrumb trails in Naive UI support custom separators between items and icon integration. You can apply per-item separators and linkable items to align with specific design guidelines and create rich navigation trails.

How do I handle complex hierarchies with dropdown integration in breadcrumbs?▼

Dropdown integration in breadcrumbs handles complex hierarchies by attaching dropdown menus to individual breadcrumb items. This is useful for dashboards, product catalogs, and detail views where multiple sibling pages exist under a single parent path.

What are common use cases for breadcrumb trails in frontend applications?▼

Common use cases for breadcrumb trails include admin panels, e-commerce category paths, and multi-level site navigation. They provide orientation within hierarchical structures, satisfying API reference requirements and improving user navigation context across detail views.

Does Naive UI breadcrumb support per-item customization for navigation paths?▼

Yes, Naive UI breadcrumb supports per-item customization for navigation paths, allowing item-specific separators, icons, and links. This enables tailored navigation trails that match complex product catalog and dashboard structures.

Related Skills

Explore More Software Engineering Skills→
themadorgthemadorg
6

bedrud-fe-ui-foundation

Standardize React frontend UI with a reusable design system and shadcn/ui primitives.

Official
Intermediate
kshehadehkshehadeh

breadcrumb-routes

Synchronize breadcrumb navigation components with new Next.js page routes.

Community
Intermediate
syncfusionsyncfusion

syncfusion-aspnetcore-breadcrumb

Build and customize Syncfusion ASP.NET Core breadcrumb navigation with item binding and events.

Official
Intermediate
syncfusionsyncfusion

syncfusion-javascript-breadcrumb

Render Syncfusion EJ2 Breadcrumb navigation with overflow modes and event hooks.

Official
Intermediate