skills.rest
Legal-and-General
Legal-and-GeneralOFFICIAL
Explore all skills by this author →
Website𝕏@landg_groupGitHub

canopy-breadcrumb

Implement Canopy lg-breadcrumb navigation in Angular projects.

23|46|Updated Sep 7, 2020
Search Tags:#angular#navigation#best-practices#breadcrumb#ui-components#canopy
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-breadcrumb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canopy-breadcrumb
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/breadcrumb
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-breadcrumb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide provides best practices, usage guidance, and input references for implementing the Canopy lg-breadcrumb component in Angular projects, helping teams create accessible and consistent breadcrumb navigation.

Core Features & Use Cases

  • Guidance on using the lg-breadcrumb component with proper structure of breadcrumbs, including making the current page plain text and the first item a link.
  • Instructions for collapsing long trails using manual ellipsis markers and responsive considerations.
  • Input reference for LgBreadcrumbComponent, including variant input and its defaults.

Quick Start

Follow the Canopy Breadcrumb best practices by replacing your current breadcrumb usage with the lg-breadcrumb component and reference examples.

Frequently Asked Questions about canopy-breadcrumb

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

FAQPage Schema
How do I implement accessible breadcrumb navigation in Angular?▼

Accessible breadcrumb navigation in Angular is implemented using the lg-breadcrumb component, which ensures consistent structure by making the current page plain text and the first item a link.

What is the best way to structure breadcrumbs for consistent UI in Angular projects?▼

The best way to structure breadcrumbs in Angular projects is to apply Canopy best practices using the lg-breadcrumb component, replacing current usage with the provided reference examples for accessibility and consistency.

Can I collapse long breadcrumb trails in Angular using manual ellipsis markers?▼

Yes, you can collapse long breadcrumb trails in Angular by using manual ellipsis markers within the lg-breadcrumb component, applying responsive considerations to handle navigation overflow effectively.

Does the lg-breadcrumb component support variant inputs with default values?▼

Yes, the lg-breadcrumb component supports a variant input with default values, referenced through the LgBreadcrumbComponent input reference to customize breadcrumb navigation appearance in Angular projects.

What are the limitations of manual ellipsis markers for breadcrumb navigation?▼

Manual ellipsis markers for breadcrumb navigation require responsive considerations to handle long trails properly, meaning developers must manually implement the collapsing logic rather than relying on automatic truncation behavior.

Related Skills

Explore More Software Engineering Skills→
Legal-and-GeneralLegal-and-General
23

canopy-link-menu

Guide Angular developers in implementing accessible Canopy Link Menu components.

Official
Intermediate
kshehadehkshehadeh

breadcrumb-routes

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

Community
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-forms-filter-buttons

Document Canopy filter button patterns for Angular single and multi-select controls.

Official
Intermediate
joaopelegrinojoaopelegrino

breadcrumb-impl

Implement hierarchical breadcrumbs with semantic HTML5, ARIA attributes, and React Router integration.

Community
Intermediate