ui-components feat(#2478): add work side menu component

This PR adds the work side menu component.

How to test

Use the v2 experimental design tokens branch for proper colours and border values: https://github.com/GovAlta/design-tokens/tree/v2-2998-coded-component-updates

Add this example menu to your playground:

<goa-work-side-menu
  url="/"
  heading="Income and Employment Support (IES)"
  user-name="Edna Mode"
  user-secondary-text="[email protected]"
>
  <div slot="primary">
    <goa-work-side-menu-item
      icon="search"
      label="Search"
      badge="21"
      url="/search"
    />

    <goa-work-side-menu-item
      icon="list"
      label="Clients"
      type="success"
      badge="New"
      current="true"
      url="/clients"
    />

    <goa-work-side-menu-item
      icon="calendar"
      label="Schedule"
      type="emergency"
      badge="Urgent"
      url="/schedule"
    />
  </div>

  <div slot="secondary">
    <goa-work-side-menu-item
      icon="notifications"
      label="Notifications"
      type="success"
      badge="1"
      url="/notifications"
    />

    <goa-work-side-menu-item
      icon="help-circle"
      label="Support"
      url="/support"
    />

    <goa-work-side-menu-item icon="settings" label="Settings" url="/settings" />
  </div>

  <div slot="account">
    <goa-work-side-menu-item
      icon="person"
      label="Account management"
      url="/account"
    />

    <goa-work-side-menu-item icon="log-out" label="Log out" url="/logout" />
  </div>
</goa-work-side-menu>

Jul 31 '25 17:07 bdfranck

@chrisolsen I addressed all your comments and pushed an amended commit. I've also added browser tests for testing events in the menu and menu item. Does the location of the Angular experimental folder make sense? Any further questions or concerns? Thanks!

Sep 24 '25 22:09 bdfranck

@chrisolsen I addressed all your comments and pushed an amended commit. I've also added browser tests for testing events in the menu and menu item. Does the location of the Angular experimental folder make sense? Any further questions or concerns? Thanks!

Sep 25 '25 14:09 bdfranck

I also noticed some formatting issues. I fixed them and pushed an amended commit.

Sep 25 '25 15:09 bdfranck

I also rebased from the latest alpha.

Sep 25 '25 15:09 bdfranck

I've pushed my amended commit that addresses all of @chrisolsen's comments.

Oct 02 '25 20:10 bdfranck

@chrisolsen I've pushed an amended commit with userName and userSecondaryText in camel case in all relevant locations.

Oct 03 '25 19:10 bdfranck

@twjeffery Thanks for the review! Here's my thoughts on your suggestions:

1. Back button

I had the back button in an earlier version but I removed it due to outstanding questions about behaviour and implementation. I think it's a good candiate for a future enhancment.

2. Submenu items

Yes, the current implementation is awkaward because it's attempting to be a nav item and a header for a nav group. Maybe we just make it a group with a header similar to SideMenuGroup.svelte

Here's my plan:

Remove the subnav variant in work-side-menu-item
Test the initial nav without groupings
Create a new issue: work side nav group
Later: Build the new work side nav group component

Any concerns with this approach?

3. Menu state persistence

This may not be an issue for teams who builder their app as a Single Page Application. It's another things to explore in a future enhancement.

4. Keyboard navigation for the account menu

I'll see how difficult this is to implement. I wish I could just use our popover component but it doesn't work as expected within our scrollable component.

Oct 06 '25 17:10 bdfranck

@bdfranck

1. Back button Sounds good

2. Submenu items Sounds good

3. Menu state persistence For sure, it might be a playground issue that wouldn't be an issue for teams. I am using multiple pages in my playground.

4. Keyboard navigation for the account menu For sure. Maybe this should be pulled out to a separate issue for the popover?

Oct 06 '25 20:10 twjeffery

Thanks, @vanessatran-ddi! I've amended the commit and switched to using skewer case on those properties.

Oct 10 '25 16:10 bdfranck

@vanessatran-ddi I've amended my commit with the following changes:

Added experimental to the Angular imports
Added aria-expaned to the account menu
Improved keyboard navigation
- Works on entire menu
- Loops when reaching the bottom or top
- Opens the account menu when navigating to it
- Closes the account menu when navigating from it
Fixed the border between the header and main menu when scrolling (an issue that @Spark450 noted)

keyboard-nav

Oct 20 '25 15:10 bdfranck

@vanessatran-ddi I've amended my commit with the following changes:

Added experimental to the Angular imports

Added aria-expaned to the account menu

Improved keyboard navigation

Works on entire menu

Loops when reaching the bottom or top

Opens the account menu when navigating to it

Closes the account menu when navigating from it

Fixed the border between the header and main menu when scrolling (an issue that @Spark450 noted)

Hi @bdfranck , I have this comment to follow up vs you:

Current behavior: Arrow Down from "Edna Mode" automatically expands the submenu and focuses on "Account management" → "Log out" before continuing to "Collapse Menu".

Expected behavior: Arrow Down from "Edna Mode" should go directly to "Collapse Menu" without auto-expanding the submenu. The user should need to press Enter/Space on "Edna Mode" to expand and access the submenu items.

Oct 20 '25 22:10 vanessatran-ddi

@vanessatran-ddi I've amended my commit with the following changes:

Added experimental to the Angular imports
Added aria-expaned to the account menu
Improved keyboard navigation
- Works on entire menu
- Loops when reaching the bottom or top
- Opens the account menu when navigating to it
- Closes the account menu when navigating from it
Fixed the border between the header and main menu when scrolling (an issue that @Spark450 noted)

keyboard-nav

    [
      
        ![keyboard-nav](https://private-user-images.githubusercontent.com/1479091/503270418-5a2ece2b-2d6c-4ebf-82c4-f75c2d3273ee.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjA5OTg0NjcsIm5iZiI6MTc2MDk5ODE2NywicGF0aCI6Ii8xNDc5MDkxLzUwMzI3MDQxOC01YTJlY2UyYi0yZDZjLTRlYmYtODJjNC1mNzVjMmQzMjczZWUuZ2lmP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MTAyMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTEwMjBUMjIwOTI3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTFiOGNmMjRkYjg4NGEwMWM0MDA3ZTQxMjE0ZDg4N2FkMzcwOGFmMzU5MTg1MThkNzI4Y2NjNDhhZGNiYjlkYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ._h200WseDoA41pZZaxuXclIKaUgVFnnz2isrQN7igVk)
      
    ](https://private-user-images.githubusercontent.com/1479091/503270418-5a2ece2b-2d6c-4ebf-82c4-f75c2d3273ee.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjA5OTg0NjcsIm5iZiI6MTc2MDk5ODE2NywicGF0aCI6Ii8xNDc5MDkxLzUwMzI3MDQxOC01YTJlY2UyYi0yZDZjLTRlYmYtODJjNC1mNzVjMmQzMjczZWUuZ2lmP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MTAyMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTEwMjBUMjIwOTI3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTFiOGNmMjRkYjg4NGEwMWM0MDA3ZTQxMjE0ZDg4N2FkMzcwOGFmMzU5MTg1MThkNzI4Y2NjNDhhZGNiYjlkYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ._h200WseDoA41pZZaxuXclIKaUgVFnnz2isrQN7igVk)
    
    
      
        
          
        
        
          
          
        
      
      [
        
          
        
      ](https://private-user-images.githubusercontent.com/1479091/503270418-5a2ece2b-2d6c-4ebf-82c4-f75c2d3273ee.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjA5OTg0NjcsIm5iZiI6MTc2MDk5ODE2NywicGF0aCI6Ii8xNDc5MDkxLzUwMzI3MDQxOC01YTJlY2UyYi0yZDZjLTRlYmYtODJjNC1mNzVjMmQzMjczZWUuZ2lmP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MTAyMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTEwMjBUMjIwOTI3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTFiOGNmMjRkYjg4NGEwMWM0MDA3ZTQxMjE0ZDg4N2FkMzcwOGFmMzU5MTg1MThkNzI4Y2NjNDhhZGNiYjlkYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ._h200WseDoA41pZZaxuXclIKaUgVFnnz2isrQN7igVk)
    
   [ ![keyboard-nav](https://private-user-images.githubusercontent.com/1479091/503270418-5a2ece2b-2d6c-4ebf-82c4-f75c2d3273ee.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjA5OTg0NjcsIm5iZiI6MTc2MDk5ODE2NywicGF0aCI6Ii8xNDc5MDkxLzUwMzI3MDQxOC01YTJlY2UyYi0yZDZjLTRlYmYtODJjNC1mNzVjMmQzMjczZWUuZ2lmP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MTAyMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTEwMjBUMjIwOTI3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTFiOGNmMjRkYjg4NGEwMWM0MDA3ZTQxMjE0ZDg4N2FkMzcwOGFmMzU5MTg1MThkNzI4Y2NjNDhhZGNiYjlkYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ._h200WseDoA41pZZaxuXclIKaUgVFnnz2isrQN7igVk) ](https://private-user-images.githubusercontent.com/1479091/503270418-5a2ece2b-2d6c-4ebf-82c4-f75c2d3273ee.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjA5OTg0NjcsIm5iZiI6MTc2MDk5ODE2NywicGF0aCI6Ii8xNDc5MDkxLzUwMzI3MDQxOC01YTJlY2UyYi0yZDZjLTRlYmYtODJjNC1mNzVjMmQzMjczZWUuZ2lmP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MTAyMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTEwMjBUMjIwOTI3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTFiOGNmMjRkYjg4NGEwMWM0MDA3ZTQxMjE0ZDg4N2FkMzcwOGFmMzU5MTg1MThkNzI4Y2NjNDhhZGNiYjlkYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ._h200WseDoA41pZZaxuXclIKaUgVFnnz2isrQN7igVk)
  
    [
      
        ![keyboard-nav](https://private-user-images.githubusercontent.com/1479091/503270418-5a2ece2b-2d6c-4ebf-82c4-f75c2d3273ee.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjA5OTg0NjcsIm5iZiI6MTc2MDk5ODE2NywicGF0aCI6Ii8xNDc5MDkxLzUwMzI3MDQxOC01YTJlY2UyYi0yZDZjLTRlYmYtODJjNC1mNzVjMmQzMjczZWUuZ2lmP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MTAyMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTEwMjBUMjIwOTI3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTFiOGNmMjRkYjg4NGEwMWM0MDA3ZTQxMjE0ZDg4N2FkMzcwOGFmMzU5MTg1MThkNzI4Y2NjNDhhZGNiYjlkYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ._h200WseDoA41pZZaxuXclIKaUgVFnnz2isrQN7igVk)
      
    ](https://private-user-images.githubusercontent.com/1479091/503270418-5a2ece2b-2d6c-4ebf-82c4-f75c2d3273ee.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjA5OTg0NjcsIm5iZiI6MTc2MDk5ODE2NywicGF0aCI6Ii8xNDc5MDkxLzUwMzI3MDQxOC01YTJlY2UyYi0yZDZjLTRlYmYtODJjNC1mNzVjMmQzMjczZWUuZ2lmP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MTAyMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTEwMjBUMjIwOTI3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTFiOGNmMjRkYjg4NGEwMWM0MDA3ZTQxMjE0ZDg4N2FkMzcwOGFmMzU5MTg1MThkNzI4Y2NjNDhhZGNiYjlkYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ._h200WseDoA41pZZaxuXclIKaUgVFnnz2isrQN7igVk)
    
    
      
        
          
        
        
          
          
        
      
      [
        
          
        
      ](https://private-user-images.githubusercontent.com/1479091/503270418-5a2ece2b-2d6c-4ebf-82c4-f75c2d3273ee.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjA5OTg0NjcsIm5iZiI6MTc2MDk5ODE2NywicGF0aCI6Ii8xNDc5MDkxLzUwMzI3MDQxOC01YTJlY2UyYi0yZDZjLTRlYmYtODJjNC1mNzVjMmQzMjczZWUuZ2lmP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MTAyMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTEwMjBUMjIwOTI3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTFiOGNmMjRkYjg4NGEwMWM0MDA3ZTQxMjE0ZDg4N2FkMzcwOGFmMzU5MTg1MThkNzI4Y2NjNDhhZGNiYjlkYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ._h200WseDoA41pZZaxuXclIKaUgVFnnz2isrQN7igVk)
    
   [ ](https://private-user-images.githubusercontent.com/1479091/503270418-5a2ece2b-2d6c-4ebf-82c4-f75c2d3273ee.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjA5OTg0NjcsIm5iZiI6MTc2MDk5ODE2NywicGF0aCI6Ii8xNDc5MDkxLzUwMzI3MDQxOC01YTJlY2UyYi0yZDZjLTRlYmYtODJjNC1mNzVjMmQzMjczZWUuZ2lmP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MTAyMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTEwMjBUMjIwOTI3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTFiOGNmMjRkYjg4NGEwMWM0MDA3ZTQxMjE0ZDg4N2FkMzcwOGFmMzU5MTg1MThkNzI4Y2NjNDhhZGNiYjlkYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ._h200WseDoA41pZZaxuXclIKaUgVFnnz2isrQN7igVk)

Hi @bdfranck , I have this comment to follow up vs you:

Current behavior: Arrow Down from "Edna Mode" automatically expands the submenu and focuses on "Account management" → "Log out" before continuing to "Collapse Menu".

Expected behavior: Arrow Down from "Edna Mode" should go directly to "Collapse Menu" without auto-expanding the submenu. The user should need to press Enter/Space on "Edna Mode" to expand and access the submenu items.

@vanessatran-ddi I've amended my commit so using the arrow keys doesn't open the toggle.

Oct 22 '25 15:10 bdfranck

Here's a summary of some decisions I made for this component:

I chatted with Tom about the issue where the tooltip and popover menu don't appear aligned if the menu is placed in an unconventional position. The only valid use of the component is if it's placed in the top left. We couldn't come up with a valid scenario of using it in an unconventional position. We decided to leave the issue and return to it later if a scenario arises.
I removed the submenu items and created a separate ticket for a side menu group. I decided this because the existing submenu had accessibility and interaction issues. It was attempting to do the job of both a single menu item and a menu group at the same time. A dedicated menu group component felt like a better approach.

Oct 23 '25 14:10 bdfranck

@chrisolsen I've amended my commit with the following changes:

Changed all instances of goax to goabx
Removed all the unneeded waitFors in the browser test
Rebased from alpha

Oct 23 '25 21:10 bdfranck

I also amended my commit to fix the errors on the Angular tests.

Oct 24 '25 15:10 bdfranck

@vanessatran-ddi I've amended my commit with the following changes:

Added CommonModule to the Angular components
New feature: Focus on first item when opening account menu
Fixed two issues that prevented the menu from working with Angular work menu items
Tested keyboards navigation on Angular

Here's how an Angular menu now looks in my test environment:

angular-keyboard-nav

Nov 17 '25 22:11 bdfranck

:tada: This PR is included in version 1.40.0-dev.10 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

Nov 28 '25 17:11 tzuge

:tada: This PR is included in version 1.10.0-dev.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

Nov 28 '25 17:11 tzuge

:tada: This PR is included in version 4.10.0-dev.2 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

Nov 28 '25 17:11 tzuge

:tada: This PR is included in version 6.10.0-dev.4 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

Nov 28 '25 17:11 tzuge