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

canopy-side-nav

Guide Angular developers in applying Canopy Side Nav best practices.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides guidance for implementing Canopy Side Nav navigation in Angular projects, helping teams build accessible, responsive side navigation with consistent behavior.

Core Features & Use Cases

  • Clear import and usage guidance for Canopy Side Nav components such as LgSideNavComponent and LgSideNavBar, to create structured navigation regions.
  • Design constraints and accessibility considerations, including labeling the navigation region and ensuring the side content area contains a router outlet for route-based content.
  • Real-world use cases across account navigation, multi-page panels, and dashboards that require consistent, predictable side navigation behavior.

Quick Start

Follow the Canopy Side Nav best practices when implementing the side navigation in your Angular project to ensure accessibility and responsive behavior.

Frequently Asked Questions about canopy-side-nav

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

FAQPage Schema
How do I implement accessible side navigation in an Angular project?▼

Accessible side navigation in Angular requires labeling the navigation region and placing a router outlet in the side content area for route-based content. Following Canopy side nav best practices ensures consistent, responsive behavior across account and multi-page panels.

What is the best way to structure a multi-page navigation panel using Angular?▼

The best way to structure a multi-page navigation panel is using Canopy side nav components like LgSideNavComponent and LgSideNavBar. These create structured navigation regions while enforcing design constraints and predictable sidebar behavior for dashboards.

Does Canopy side nav require a specific router outlet placement for route-based content?▼

Yes, Canopy side nav requires a router outlet in the side content area to display route-based content. Correct router outlet placement ensures the navigation panel functions predictably and maintains accessibility standards across embedded sidebars.

Can I use Canopy side nav components for account navigation and embedded sidebars?▼

Yes, Canopy side nav components support account navigation, multi-page navigation panels, and embedded sidebars. Applying the required usage patterns and accessibility labels ensures consistent implementation across these various Angular navigation use cases.

What are the limitations when implementing responsive side navigation with Canopy?▼

Limitations include adhering to strict design constraints and required usage patterns for Canopy side nav components. You must apply proper accessibility labels and ensure the side content area contains a router outlet to avoid inconsistent navigation behavior.

Related Skills

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

canopy-forms-checkbox

Implement Canopy checkbox components in Angular forms with best practices.

Official
Intermediate
binary16labsbinary16labs
5

Modules And Routing

Place first-party modules into hash-routed app shell locations.

Community
Intermediate
e-xodee-xode
3

vuetify-layout

Implement Vuetify 4 app shells with navigation, grids, and tabs for Vue SSR pages.

Official
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-link-menu

Guide Angular developers in implementing accessible Canopy Link Menu components.

Official
Intermediate