| name | canopy-header |
| description | Best practices for the Canopy Header component. Trigger when adding a site header, primary navigation, account menu, notification badge, or logo in an Angular project using Canopy. |
| license | MIT |
| metadata | {"source":"https://github.com/Legal-and-General/canopy/tree/master/projects/canopy/src/lib/header/docs/guide.mdx"} |
Canopy Header — Best Practices
This skill provides usage guidance and input reference for the Canopy header components from @legal-and-general/canopy.
Apply this skill whenever you use the lg-header attribute selector or LgHeaderComponent.
Import
import {
LgHeaderComponent,
LgHeaderLogoComponent,
LgPrimaryNavComponent,
LgPrimaryNavListItemComponent,
LgPrimaryNavItemDirective,
LgPrimaryNavMobileItemDirective,
LgAccountMenuComponent,
LgAccountMenuListItemComponent,
LgAccountMenuItemDirective,
LgAccountMenuItemLabelComponent,
LgAccountMenuMobileItemDirective,
LgNotificationBadgeComponent,
LgLinkMenuItemComponent,
LgLinkMenuItemTextComponent,
} from '@legal-and-general/canopy';
Basic Usage
The header uses an attribute selector — apply lg-header to a native <header> element.
<header lg-header>
<lg-header-logo src="/assets/logo.svg" alt="Company name" href="/"></lg-header-logo>
</header>
Co-branding
Use two lg-header-logo components side by side for a co-branded header:
<header lg-header>
<lg-header-logo src="/assets/lg-logo.svg" alt="Legal & General" href="/"></lg-header-logo>
<lg-header-logo src="/assets/partner-logo.svg" alt="Partner name" href="/"></lg-header-logo>
</header>
With Primary Navigation and Account Menu
The navigation has two separate sets of items — one for desktop (lg breakpoint and above) and one for mobile (below lg). Both must be explicitly provided.
- Desktop items: use
lg-primary-nav-list-item + lgPrimaryNavItem
- Mobile primary nav items: use
lgPrimaryNavMobileItem + lg-link-menu-item structure, projected inside lg-primary-nav
- Mobile account menu items: use
lgAccountMenuMobileItem + lg-link-menu-item structure, also projected inside lg-primary-nav
- Desktop account menu items: use
lg-account-menu + lg-account-menu-list-item + lgAccountMenuItem — these are always visible in the header bar
<header lg-header>
<lg-header-logo [src]="logo" [alt]="logoAlt" [href]="logoHref"></lg-header-logo>
<lg-notification-badge lgMenuBadge variant="dot" accessText="You have unread messages"></lg-notification-badge>
<lg-primary-nav>
<lg-primary-nav-list-item>
<a href="/" [isActive]="true" lgPrimaryNavItem>Link 1</a>
</lg-primary-nav-list-item>
<lg-primary-nav-list-item>
<a href="/products" lgPrimaryNavItem>
Link 2
<lg-notification-badge count="3" accessText="You have 3 unread messages"></lg-notification-badge>
</a>
</lg-primary-nav-list-item>
<a lgPrimaryNavMobileItem href="/">
<lg-link-menu-item>
<lg-link-menu-item-text>Link 1</lg-link-menu-item-text>
</lg-link-menu-item>
</a>
<a lgPrimaryNavMobileItem href="/products">
<lg-link-menu-item>
<lg-link-menu-item-text>Link 2</lg-link-menu-item-text>
<lg-notification-badge count="3" accessText="You have 3 unread messages"></lg-notification-badge>
</lg-link-menu-item>
</a>
<a lgAccountMenuMobileItem href="/account">
<lg-link-menu-item>
<lg-link-menu-item-text>Account</lg-link-menu-item-text>
</lg-link-menu-item>
</a>
<a lgAccountMenuMobileItem href="/sign-out">
<lg-link-menu-item>
<lg-link-menu-item-text>Sign out</lg-link-menu-item-text>
</lg-link-menu-item>
</a>
</lg-primary-nav>
<lg-account-menu>
<lg-account-menu-list-item>
<a href="/account" lgAccountMenuItem>
<lg-account-menu-item-label>Account</lg-account-menu-item-label>
<lg-icon name="profile"></lg-icon>
</a>
</lg-account-menu-list-item>
<lg-account-menu-list-item>
<a href="/sign-out" lgAccountMenuItem>
<lg-account-menu-item-label>Sign out</lg-account-menu-item-label>
<lg-icon name="sign-in"></lg-icon>
</a>
</lg-account-menu-list-item>
</lg-account-menu>
</header>
Co-branded with Navigation
Combine two lg-header-logo elements with the full navigation structure:
<header lg-header>
<lg-header-logo [src]="logo" [alt]="logoAlt" [href]="logoHref"></lg-header-logo>
<lg-header-logo [src]="secondaryLogo" [alt]="secondaryLogoAlt" [href]="secondaryLogoHref"></lg-header-logo>
<lg-notification-badge lgMenuBadge variant="dot" accessText="You have unread messages"></lg-notification-badge>
<lg-primary-nav>
<lg-primary-nav-list-item>
<a href="/" [isActive]="true" lgPrimaryNavItem>Link 1</a>
</lg-primary-nav-list-item>
<a lgPrimaryNavMobileItem href="/">
<lg-link-menu-item>
<lg-link-menu-item-text>Link 1</lg-link-menu-item-text>
</lg-link-menu-item>
</a>
<a lgAccountMenuMobileItem href="/account">
<lg-link-menu-item>
<lg-link-menu-item-text>Account</lg-link-menu-item-text>
</lg-link-menu-item>
</a>
</lg-primary-nav>
<lg-account-menu>
<lg-account-menu-list-item>
<a href="/account" lgAccountMenuItem>
<lg-account-menu-item-label>Account</lg-account-menu-item-label>
<lg-icon name="profile"></lg-icon>
</a>
</lg-account-menu-list-item>
</lg-account-menu>
</header>
Inputs & Outputs
LgHeaderComponent
| Output | Type | Description |
|---|
menuToggled | EventEmitter<boolean> | Emitted when the mobile menu toggle button is clicked. |
Content slots
| Selector | Description |
|---|
lg-header-logo | Projects one or more logo elements into the logos wrapper at the start of the header bar. |
[lgMenuBadge] | Projects content (typically lg-notification-badge) into the burger toggle button; hidden when the menu is open. |
| (default) | Projects all other content (e.g. lg-primary-nav, lg-account-menu) into the main header wrapper. |
LgHeaderLogoComponent
| Input | Type | Default | Required | Description |
|---|
src | string | — | Yes | Logo image URL. |
alt | string | '' | Yes | Alt text for the logo image. |
href | string | — | No | URL link if the logo is clickable. |
LgPrimaryNavComponent
| Input | Type | Default | Required | Description |
|---|
showResponsiveMenu | boolean | false | No | Shows or hides the responsive mobile menu. |
LgPrimaryNavListItemComponent
| Input | Type | Default | Required | Description |
|---|
alignRight | boolean | false | No | Aligns the item to the right-hand side at lg breakpoints. |
| Output | Type | Description |
|---|
tabbedOut | EventEmitter<KeyboardEvent> | Emitted when the tab key bubbles up to the list item. |
clicked | EventEmitter<Event> | Emitted when a click event bubbles up to the list item. |
LgPrimaryNavItemDirective
| Input | Type | Default | Required | Description |
|---|
isActive | boolean | false | No | Sets the active state of the navigation item. |
LgAccountMenuItemDirective
| Input | Type | Default | Required | Description |
|---|
isActive | boolean | false | No | Sets the active state of the account menu item. |
LgAccountMenuListItemComponent
| Output | Type | Description |
|---|
clicked | EventEmitter<Event> | Emitted when a click event bubbles up to the list item. |
tabbedOut | EventEmitter<KeyboardEvent> | Emitted when the tab key bubbles up to the list item. |
LgNotificationBadgeComponent
| Input | Type | Default | Required | Description |
|---|
count | number | undefined | No | The numeric value to display in the badge when variant is 'count'. |
accessText | string | undefined | No | Accessible text for assistive technologies. |
variant | 'count' | 'dot' | 'count' | No | Badge variant. Use 'dot' for an indeterminate indicator instead of a count. |
Apply lgMenuBadge to the lg-notification-badge element to display it on the mobile menu toggle button.
Dos and Don'ts
Do
- Do always provide both
lgPrimaryNavMobileItem and desktop lg-primary-nav-list-item entries — the navigation does not auto-derive mobile items from desktop items.
- Do project
lgAccountMenuMobileItem anchors inside lg-primary-nav — they appear in the mobile nav dropdown, not in lg-account-menu.
- Do use
lg-account-menu items for the header bar (visible on both mobile and desktop next to the burger menu).
- Do wrap mobile items in
lg-link-menu-item / lg-link-menu-item-text structure.
- Do keep navigation items to around six maximum to avoid overcrowding.
- Do use
lgMenuBadge on lg-notification-badge to show a badge on the mobile burger menu button.
Don't
- Don't apply
lg-header as a component tag — it is an attribute selector and must be applied to a native <header> element.
- Don't expect mobile navigation to be auto-generated — all mobile items must be explicitly authored.
- Don't place
lgAccountMenuMobileItem items inside lg-account-menu — they must be inside lg-primary-nav.
Migration from Previous Navigation
The navigation was rebuilt with explicit mobile/desktop slots. Key changes:
- Mobile items are no longer derived automatically — provide
lgPrimaryNavMobileItem and lgAccountMenuMobileItem explicitly.
- Import
LgPrimaryNavMobileItemDirective, LgAccountMenuMobileItemDirective, LgLinkMenuItemComponent, and LgLinkMenuItemTextComponent in your component's imports array.
