syncfusion-react-breadcrumb — Claude Code skill for Syncfusion breadcrumbs
A skill that walks your coding agent through building and configuring the Syncfusion Breadcrumb component in React: routes, icons, overflow. Useful when you need a navigation trail without digging through docs.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-breadcrumb -a claude-codeWhat syncfusion-react-breadcrumb does
The skill covers BreadcrumbComponent from @syncfusion/ej2-react-navigations. Your agent gets an API reference, a quick-start example and ready patterns: turning navigation on with enableNavigation, generating items from a URL, six overflow modes (Menu, Collapsed, Scroll, Wrap, Hidden, None), item and separator templates, and icons from fonts, images or SVG.
Under the hood it is a set of reference files the agent reads on demand: references/api-properties-and-events.md, references/getting-started.md, references/navigation-and-routing.md, references/customization.md, references/icon-integration-data-binding.md, references/accessibility.md. Routing with React Router, the beforeItemRender, itemClick and created events, RTL and WCAG 2.2 keyboard access each get their own section.
The skill is tied to one library. Its examples import @syncfusion/ej2-react-navigations and a theme stylesheet such as @syncfusion/ej2-navigations/styles/tailwind3.css. On a different component set you would rewrite those examples yourself, and the agent offers little there.
What it helps with
- build a breadcrumb trail showing the current section path
- make items clickable and open links in a new tab
- pick an overflow strategy for long trails
- attach icons and custom templates to items and separators
- generate items from the URL and wire them to React Router
Example prompts for the agent
- Build a breadcrumb with
BreadcrumbComponentshowing Home, Components and Breadcrumb, with navigation enabled - Set the overflow mode to Collapsed and cap visible items with
maxItems - Generate breadcrumb items from the current URL and handle
itemClick
How to install syncfusion-react-breadcrumb
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-breadcrumb -a claude-code2Manually: put the files in place
~/.claude/skills/syncfusion-react-breadcrumb/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/syncfusion-react-breadcrumb/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-breadcrumb -a codex2Manually: put the files in place
.agents/skills/syncfusion-react-breadcrumb/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-breadcrumb -a cursor2Manually: put the files in place
.cursor/skills/syncfusion-react-breadcrumb/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-breadcrumb2Manually: put the files in place
.github/skills/syncfusion-react-breadcrumb/SKILL.md1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-breadcrumb -a gemini-cli2Platform CLI
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-breadcrumbManually: put the files in place
.devin/skills/syncfusion-react-breadcrumb/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-breadcrumb -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about syncfusion-react-breadcrumb
How do I install syncfusion-react-breadcrumb in Claude Code?
Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-breadcrumb -a claude-code, then check that the file landed at ~/.claude/skills/syncfusion-react-breadcrumb/SKILL.md.
What does syncfusion-react-breadcrumb do?
It hands your agent references and examples for the Syncfusion Breadcrumb component in React: props, events, overflow modes, templates, icons, routing and accessibility.
Which other tools can use this skill?
It installs into Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. The install command differs by the -a flag, and Copilot uses its own gh skill install command.
