cpn-basic-nav

Configure UDesign Nav component usage with props and demos from SKILL.md.

1|Updated Apr 14, 2026

Search Tags:#frontend #react #navigation #design-system #ui-component #nav

Ready to run

npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-nav

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: cpn-basic-nav
Source: https://github.com/UCloud-FE/udesign-cli/tree/main/skills/cpn-basic-nav
Command: npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-nav

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Nav 基础导航集成在 UDesign 设计体系中，帮助 AI 正确使用 Nav 组件，降低集成错误和 UI 不一致性。

Core Features & Use Cases

提供将 Nav 组件从 UDesign 设计体系中引入的清晰指南。
记录核心用法、API 属性以及示例 Demo，帮助开发提速。
覆盖常见场景，如基础用法、受控模式、垂直布局以及嵌套项等。

Quick Start

引入 Nav 组件并创建一个包含若干项的简单导航示例来快速上手

Frequently Asked Questions about cpn-basic-nav

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

FAQPage Schema

How do I implement a basic navigation component with React for a design system?▼

To implement basic navigation with React, use the UDesign Nav component to ensure UI consistency, utilizing provided API definitions for labeled items, icons, and submenus to speed up frontend development.

How does vertical layout navigation work in a frontend UI component?▼

Vertical layout navigation works by configuring the Nav component's prop definitions to render items vertically, supporting nested submenus and labeled items within a controlled mode for structured UI design.

Can I use a controlled mode for navigation menus in my React application?▼

Yes, you can use a controlled mode for navigation menus by applying the UDesign Nav component's extracted usage patterns, allowing your React application to manage state for basic navigational UI.

What is the best way to reduce integration errors when adding navigation UI?▼

The best way to reduce integration errors is by following UDesign Nav component guidelines, which enforce safety and formatting constraints to maintain UI consistency across your design system.

How do I set up a simple navigation example with submenus and icons?▼

Set up a simple navigation example by importing the Nav component and configuring its props for icons and nested submenus, leveraging the provided example demos to quickly build the UI.