diff --git a/libs/web-components/src/common/urls.spec.ts b/libs/web-components/src/common/urls.spec.ts
index f7a4919bd..0c9058dc9 100644
--- a/libs/web-components/src/common/urls.spec.ts
+++ b/libs/web-components/src/common/urls.spec.ts
@@ -44,13 +44,13 @@ it("should match urls", async () => {
       desc: "empty test url",
       windowUrl: new URL("http://localhost/foo"),
       testUrl: "",
-      weight: 0,
+      weight: -1,
     },
     {
       desc: "root path only match",
       windowUrl: new URL("http://localhost"),
       testUrl: "/",
-      weight: 0,
+      weight: 1,
     },
     {
       desc: "path match",
@@ -121,25 +121,37 @@ it("should match urls", async () => {
   ];
 
   for (const spec of specs) {
-    expect(isUrlMatch(spec.windowUrl, spec.testUrl)).toEqual(spec.weight);
+    try {
+      expect(isUrlMatch(spec.windowUrl, spec.testUrl)).toEqual(spec.weight);
+    } catch (error) {
+      throw new Error(spec.desc);
+    }
+
   }
 });
 
-describe("should getMatchedLink", () => {
+interface MenuTest {
+  desc: string;
+  windowUrl: URL;
+  activeMenuHref: string|undefined;
+}
+
+it("should fix bug/1368 getMatchedLink", () => {
   // eslint-disable-next-line  @typescript-eslint/no-explicit-any
   const links: any[] = [
     {
-      getAttribute: (attr: string) => attr === 'href' ? "#/" : null,
+      getAttribute: (attr: string) => attr === 'href' ? "/" : null,
     },
     {
-      getAttribute: (attr: string) => attr === 'href' ? "#/get-started" : null,
+      getAttribute: (attr: string) => attr === 'href' ? "/get-started" : null,
     },
     {
-      getAttribute: (attr: string) => attr === 'href' ? "#/tabs" : null,
+      getAttribute: (attr: string) => attr === 'href' ? "/accordion" : null,
     },
     {
       getAttribute: (attr: string) => attr === 'href' ? "/patterns" : null,
     },
+    // Make sure external link won't be able to highlighted in any case, even it matched
     {
       getAttribute: (attr: string) => {
         if (attr === 'href') return "https://google.com/choose";
@@ -149,54 +161,45 @@ describe("should getMatchedLink", () => {
     }
   ];
 
+  const specs: MenuTest[] = [
+    {
+      desc: "return home menu / if we navigate to /",
+      windowUrl: new URL("http://localhost/"),
+      activeMenuHref: "/"
+    },
+    {
+      desc: "return Get started menu if we navigate to /get-started",
+      windowUrl: new URL("http://localhost/get-started"),
+      activeMenuHref: "/get-started"
+    },
+    {
+      desc: "return Get started menu if we navigate to /get-started/developers",
+      windowUrl: new URL("http://localhost/get-started/developers"),
+      activeMenuHref: "/get-started"
+    },
+    {
+      desc: "return Accordion if we navigate to /accordion#tab-0",
+      windowUrl: new URL("http://localhost/accordion#tab-0"),
+      activeMenuHref: "/accordion"
+    },
+    {
+      desc: "return patterns menu if we navigate to /patterns#tab-1",
+      windowUrl: new URL("http://localhost/patterns#tab-1"),
+      activeMenuHref: "/patterns"
+    },
+    {
+      desc: "return no menu if we navigate to /profile",
+      windowUrl: new URL("http://localhost/profile"),
+      activeMenuHref: undefined
+    }
+  ];
 
-  it("should return null if we navigate to a home root / (React app)", () => {
-    const windowUrl = "/";
-    const result = getMatchedLink(links, windowUrl);
-    expect(result).toBeNull();
-  })
-
-  it("should return Home menu if we navigate to a root #/ (Angular app)", () => {
-    const windowUrl = "/ui-components/#/";
-    const result = getMatchedLink(links, windowUrl);
-    expect(result?.getAttribute("href")).toEqual("#/");
-  });
-
-  it("should return get-started if we navigate to /get-started", () => {
-    const windowUrl = "/ui-components/#/get-started";
-    const result = getMatchedLink(links, windowUrl);
-    expect(result?.getAttribute("href")).toEqual("#/get-started");
-  });
-
-  it("should return get-started if we navigate to /get-started/developers", () => {
-    const windowUrl = "/ui-components/#/get-started/developers";
-    const result = getMatchedLink(links, windowUrl)
-    expect(result?.getAttribute("href")).toEqual("#/get-started");
-  });
-
-  it("should return tabs if we navigate to /tabs#tab-0", () => {
-    const windowUrl = "/ui-components/#/tabs#tab-0";
-    const result = getMatchedLink(links, windowUrl);
-    expect(result?.getAttribute("href")).toEqual("#/tabs");
-  });
-
-  it("should return null if we navigate to /accordion", () => {
-    const windowUrl = "/ui-components/#/accordion";
-    const result = getMatchedLink(links, windowUrl);
-    console.log(result?.getAttribute("href"));
-    expect(result).toBeNull();
-  });
-
-  it("should return patterns menu if we navigate to /patterns", () => {
-    const windowUrl = "/patterns#tab-0";
-    const result = getMatchedLink(links, windowUrl);
-    expect(result?.getAttribute("href")).toEqual("/patterns");
-  });
-
-  it("should return patterns menu if we navigate to /patterns/complex-form", () => {
-    const windowUrl = "/patterns/complex-form";
-    const result = getMatchedLink(links, windowUrl);
-    expect(result?.getAttribute("href")).toEqual("/patterns");
-  });
-
+  for (const spec of specs) {
+    const matchedLink = getMatchedLink(links, spec.windowUrl);
+    try {
+      expect(matchedLink?.getAttribute("href")).toEqual(spec.activeMenuHref);
+    } catch (error) {
+      throw new Error(spec.desc);
+    }
+  }
 })
diff --git a/libs/web-components/src/common/urls.ts b/libs/web-components/src/common/urls.ts
index 2bde32db0..6a412adb9 100644
--- a/libs/web-components/src/common/urls.ts
+++ b/libs/web-components/src/common/urls.ts
@@ -14,17 +14,14 @@ export function isUrlMatch(windowUrl: URL | Location, testUrl: string): number {
     return 1;
   }
 
-  // root url
-  if (urlParts.length === 1 && urlParts[0] === "") {
-    return 0;
-  }
-
   let weight = -1;
   let index = 0;
 
-  for (const part of windowUrlParts) {
-    if (urlParts[index] !== part) {
-      break;
+  for (const part of urlParts) {
+    if (windowUrlParts[index] !== part) {
+      // Ex: windowURl: /get-started/designers should match to a menu "/#/get-started, but not match to "/get-started/developers
+      // So if we check by menu (linkParts) and have anything not matched, it should return -1 (not matched), otherwise menu /get-started/developers & menu /get-started/ will have the same weight
+      return -1;
     }
     weight += 1;
     index++;
@@ -34,54 +31,12 @@ export function isUrlMatch(windowUrl: URL | Location, testUrl: string): number {
   return weight >= 0 ? weight + 1 : weight;
 }
 
-function findMaxIndexMatchedToWindowUrlParts(windowUrlParts: string[], urlParts: string[]) {
-
-  for (let urlPartsIndex = 0; urlPartsIndex < urlParts.length; urlPartsIndex++) {
-    for (let windowUrlPartsIndex = 0; windowUrlPartsIndex < windowUrlParts.length; windowUrlPartsIndex++) {
-      const cleanedWindowUrlPart = windowUrlParts[windowUrlPartsIndex].split("#")[0];
-      const cleanedUrlPart = urlParts[urlPartsIndex].split("#")[0];
-      if (cleanedUrlPart === cleanedWindowUrlPart) {
-        return windowUrlPartsIndex;
-      }
-    }
-  }
-  return -1;
-}
-
-function getUrlWeight(windowUrl: string, linkHref: string) {
-  const windowParts = decodeURIComponent(windowUrl).replace(/^\/#?/, "").split("/");
-  const linkParts = decodeURIComponent(linkHref).replace(/^\//, "").split("/");
-
-
-
-  let startIndex = findMaxIndexMatchedToWindowUrlParts(windowParts, linkParts);
-  if (startIndex === -1) {
-    return -1;
-  }
-  // Weight should start with matched index on windowUrl. Ex: window.pathname="/ui-components/#/", linkHref="#/", Home menu should have higher weight than the rest
-  let weight = startIndex;
-
-  for (let i = 0; i < linkParts.length && startIndex < windowParts.length; i++) {
-    const cleanedWindowPartStr = windowParts[startIndex].split("#")[0];
-    const cleanedLinkPartStr = linkParts[i].split("#")[0];
-    if (cleanedWindowPartStr === cleanedLinkPartStr) {
-      // Increase weight for each matching segment
-      weight += 1;
-    } else {
-      // Break loop on first non-match
-      break;
-    }
-    startIndex++;
-  }
-
-  return weight;
-}
 
-export function getMatchedLink(links: Element[], windowUrl: string) {
+export function getMatchedLink(links: Element[], windowUrl: URL | Location) {
   const weights = links.map((link) => {
     if (link.getAttribute("target")) return -1;
-    return getUrlWeight(
-        windowUrl,
+    return isUrlMatch(
+      windowUrl,
         (link as HTMLLinkElement).getAttribute("href") || "",
       )
   }
diff --git a/libs/web-components/src/components/app-header-menu/AppHeaderMenu.svelte b/libs/web-components/src/components/app-header-menu/AppHeaderMenu.svelte
index 34a7d3e54..8813f994c 100644
--- a/libs/web-components/src/components/app-header-menu/AppHeaderMenu.svelte
+++ b/libs/web-components/src/components/app-header-menu/AppHeaderMenu.svelte
@@ -1,14 +1,14 @@
 <svelte:options customElement="goa-app-header-menu" />
 <script lang="ts" context="module">
-  export type GoAAppHeaderMenuProps = {
+  export type AppHeaderMenuProps = {
     el: HTMLElement,
     links: Element[],
     currentHref?: string,
   };
 </script>
 <script lang="ts">
-  import { onDestroy, onMount, tick } from "svelte";
-  import { validateRequired } from "../../common/utils";
+  import { onMount, tick } from "svelte";
+  import {getSlottedChildren, validateRequired} from "../../common/utils";
   import type { GoAIconType } from "../icon/Icon.svelte";
   import { TABLET_BP } from "../../common/breakpoints";
 
@@ -54,12 +54,11 @@
 
   function dispatchInit() {
     if (!_slotParentEl) return;
+    const slottedChildren = getSlottedChildren(_slotParentEl);
 
-    const slot = _slotParentEl.querySelector("slot") as HTMLSlotElement;
-    if (!slot) return;
+    if (slottedChildren.length === 0) return;
 
-    const links = slot
-      .assignedElements()
+    const links = slottedChildren
       .filter((el) => el.tagName === "A")
       .map((el) => {
         el.classList.remove("current");
@@ -67,7 +66,7 @@
       });
 
     setTimeout(() => {
-      _rootEl?.dispatchEvent(new CustomEvent<GoAAppHeaderMenuProps>("appheadermenu:mounted", {
+      _rootEl?.dispatchEvent(new CustomEvent<AppHeaderMenuProps>("appheadermenu:mounted", {
         detail: {
           el: _rootEl,
           links: links
@@ -88,11 +87,10 @@
   function setCurrentLink(href: string) {
     if (!_slotParentEl) return;
 
-    const slot = _slotParentEl.querySelector("slot") as HTMLSlotElement;
-    if (!slot) return;
+    const slotChildren = getSlottedChildren(_slotParentEl);
+    if (slotChildren.length === 0) return;
 
-    const links = slot
-      .assignedElements()
+    const links = slotChildren
       .filter((el) => el.tagName === "A")
       .map((el) => {
         el.classList.remove("current");
@@ -148,7 +146,9 @@
 
 <svelte:window bind:innerWidth={_innerWidth} />
 
-<div bind:this={_rootEl}>
+<div
+  bind:this={_rootEl}
+  data-testid="rootEl">
   {#if _desktop}
     <goa-popover
       bind:this={_popoverEl}
diff --git a/libs/web-components/src/components/app-header-menu/app-header-menu.spec.ts b/libs/web-components/src/components/app-header-menu/app-header-menu.spec.ts
index 8c7962ce2..784669b92 100644
--- a/libs/web-components/src/components/app-header-menu/app-header-menu.spec.ts
+++ b/libs/web-components/src/components/app-header-menu/app-header-menu.spec.ts
@@ -59,6 +59,43 @@ describe("Desktop", () => {
     })
   });
 
+  it("listen to appheader:current:change event and set link to be active", async () => {
+    const rootEl = screen.queryByTestId("rootEl");
+
+    // Listen to parent GoAAppHeader to dispatch event current:change
+    rootEl?.dispatchEvent(new CustomEvent("appheader:current:change", {
+      detail: "#seniors"
+    }));
+
+    await waitFor(() => {
+      const currentLink = $("a.current");
+      expect(currentLink?.getAttribute("href")).toBe("#seniors");
+      // We should make sure when router link is changed, the app-header-menu is closed
+      const popover = $("goa-popover");
+      expect( popover.getAttribute("open")).toBe("false");
+    })
+
+    // When parent dispatch event with empty link, means no link should be highlighted, we should remove the current class
+    rootEl?.dispatchEvent(new CustomEvent("appheader:current:change", {
+      detail: ""
+    }));
+
+    await waitFor(() => {
+      const currentLink = $("a.current");
+      expect(currentLink).toBeNull();
+    });
+
+    // When parent dispatch an event with parent's link, means no link under app-header-menu should be highlighted
+    rootEl?.dispatchEvent(new CustomEvent("appheader:current:change", {
+      detail: "parent-link"
+    }));
+
+    await waitFor(() => {
+      const currentLink = $("a.current");
+      expect(currentLink).toBeNull();
+    });
+  });
+
   it("close the menu if the link handles other function beside navigate to new page", async () => {
     const specialLink = $("a[href='#special']");
     await user.click(specialLink);
diff --git a/libs/web-components/src/components/app-header/AppHeader.spec.ts b/libs/web-components/src/components/app-header/AppHeader.spec.ts
index a1066cfef..120b18605 100644
--- a/libs/web-components/src/components/app-header/AppHeader.spec.ts
+++ b/libs/web-components/src/components/app-header/AppHeader.spec.ts
@@ -3,6 +3,7 @@ import userEvent from "@testing-library/user-event"
 import type { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
 import AppHeaderWrapper from './AppHeaderWrapper.test.svelte'
 import { it, describe } from "vitest";
+import {tick} from "svelte";
 
 type QueryAll = (q: string) => NodeListOf<HTMLElement>;
 
@@ -253,3 +254,56 @@ describe('AppHeader Tablet', () => {
     })
   })
 })
+describe.skip('AppHeader with correct highlighted link', () => {
+  const heading = "Test heading";
+  const url = "http://localhost/foo";
+
+  beforeEach(() => {
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      value: 1200,
+    });
+
+    // Mock window.location
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    delete window.location;
+  });
+
+  it('should set #learnmore to be highlighted when navigating to /foo#learnmore', async () => {
+    // Bug 1772
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    window.location = new URL('http://localhost/foo#learnmore');
+    const { container } = render(AppHeaderWrapper, { heading, url, haschildren: true });
+
+    // Simulate route change
+    const event = new PopStateEvent('popstate', { state: {} });
+    window.dispatchEvent(event);
+
+
+    // Check if the correct link has the "current" class
+    const currentLink = container.querySelector('a.current');
+    expect(currentLink).toBeTruthy();
+    expect(currentLink?.getAttribute('href')).toBe('#aboutus');
+  });
+
+  it('should set #seniors under app-header-menu to be highlighted when navigating to /foo#seniors', async () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    window.location = new URL('http://localhost/foo#seniors');
+    const { container } = render(AppHeaderWrapper, { heading, url, haschildren: true });
+
+    // Simulate route change
+    const event = new PopStateEvent('popstate', { state: {} });
+    window.dispatchEvent(event);
+
+    await tick();
+    await waitFor(() => {
+      // Check if the correct link has the "current" class
+      const currentLink = container.querySelector('a.current');
+      expect(currentLink).toBeTruthy();
+      expect(currentLink?.getAttribute('href')).toBe('#seniors');
+    });
+  });
+});
diff --git a/libs/web-components/src/components/app-header/AppHeader.svelte b/libs/web-components/src/components/app-header/AppHeader.svelte
index d77e00338..20f968e17 100644
--- a/libs/web-components/src/components/app-header/AppHeader.svelte
+++ b/libs/web-components/src/components/app-header/AppHeader.svelte
@@ -5,8 +5,10 @@
 <script lang="ts">
   import { onDestroy, onMount, tick } from "svelte";
   import { MOBILE_BP, TABLET_BP } from "../../common/breakpoints";
+  import { getSlottedChildren } from "../../common/utils";
   import { isUrlMatch, getMatchedLink } from "../../common/urls";
-  import { GoAAppHeaderMenuProps} from "../app-header-menu/AppHeaderMenu.svelte";
+  import { AppHeaderMenuProps } from "../app-header-menu/AppHeaderMenu.svelte";
+
 
   // optional
   export let heading: string = "";
@@ -29,7 +31,7 @@
   let _showMenu = false;
 
   let _appHeaderLinks: Element[] = [];
-  let _appHeaderMenuItems: GoAAppHeaderMenuProps[] = [];
+  let _appHeaderMenuItems: AppHeaderMenuProps[] = [];
 
   // Reactive
 
@@ -62,26 +64,26 @@
   function getChildren() {
     if (!_slotParentEl) return;
 
-    const slot = _slotParentEl.querySelector("slot") as HTMLSlotElement;
-    if (!slot) return;
+    const slotChildren = getSlottedChildren(_slotParentEl);
+    if (slotChildren.length  === 0) return;
 
-    _appHeaderLinks = slot
-      .assignedElements()
+    _appHeaderLinks = slotChildren
       .filter((el) => el.tagName === "A")
       .map((el) => {
         el.classList.remove("current");
         return el;
       });
-  }
 
-  function addEventListeners() {
+    if (!_rootEl) return;
 
     _rootEl.addEventListener("appheadermenu:mounted", (e: Event) => {
-      const appHeaderMenuProps = (e as CustomEvent<GoAAppHeaderMenuProps>).detail;
+      const appHeaderMenuProps = (e as CustomEvent<AppHeaderMenuProps>).detail;
       _appHeaderMenuItems = [..._appHeaderMenuItems, appHeaderMenuProps];
       setCurrentLink();
     });
+  }
 
+  function addEventListeners() {
     // watch path changes
     let currentLocation = document.location.href;
     const observer = new MutationObserver((_mutationList) => {
@@ -112,11 +114,12 @@
 
     links.forEach(link => link.classList.remove("current"));
 
-    const matchedLink = getMatchedLink(links, url);
+    const matchedLink = getMatchedLink(links, window.location);
     if (matchedLink) {
       matchedLink.classList.add("current");
-      dispatchCurrentLink(matchedLink.getAttribute("href") || "");
     }
+
+    dispatchCurrentLink(matchedLink?.getAttribute("href") || "");
   }
 
   function dispatchCurrentLink(href: string) {
diff --git a/libs/web-components/src/components/side-menu-group/SideMenuGroup.svelte b/libs/web-components/src/components/side-menu-group/SideMenuGroup.svelte
index 8174ad374..63bbc25cc 100644
--- a/libs/web-components/src/components/side-menu-group/SideMenuGroup.svelte
+++ b/libs/web-components/src/components/side-menu-group/SideMenuGroup.svelte
@@ -1,104 +1,83 @@
 <svelte:options customElement="goa-side-menu-group" />
-
+<script lang="ts" context="module">
+  export type SideMenuGroupProps = {
+    el: HTMLElement,
+    links: Element[],
+    currentHref?: string,
+  };
+</script>
 <script lang="ts">
-  import { onDestroy, onMount, tick } from "svelte";
-  import { isUrlMatch } from "../../common/urls";
-
-  type SideMenuGroupElement = HTMLElement & { heading?: string };
+  import { onMount, tick } from "svelte";
+  import { getSlottedChildren } from "../../common/utils";
 
   export let heading: string;
 
   let _open = false;
   let _current = false;
   let _rootEl: HTMLElement;
-
+  // allow for finding of link elements within slot
+  let _slotParentEl: HTMLElement;
   $: _slug = toSlug(heading);
 
   onMount(async () => {
-    await tick(); // needed to allow for window location to be read
-    checkUrlMatches();
-    setCurrent();
+    await tick();
+    dispatchInit();
     addEventListeners();
   });
 
-  onDestroy(() => {
-    removeEventListeners();
-  });
-
-  function checkUrlMatches() {
-    _open = matchesMenu() || matchesChild(_rootEl);
-    if (_open) {
-      notifyParent(true);
-    }
+  function dispatchInit() {
+    if (!_slotParentEl) return;
+
+    const slottedChildren = getSlottedChildren(_slotParentEl);
+    if (slottedChildren.length === 0) return;
+
+    const links = slottedChildren
+      .filter((el) => el.tagName === "A")
+      .map((el) => {
+        el.classList.remove("current");
+        return el;
+      });
+
+    setTimeout(() => {
+      _rootEl.dispatchEvent(new CustomEvent<SideMenuGroupProps>("sidemenugroup:mounted", {
+        detail: {
+          el: _rootEl,
+          links: links
+        },
+        composed: true,
+        bubbles: true
+      }))
+    }, 1);
   }
 
   function addEventListeners() {
-    // listen to events by children (if child is open the parent also has to be open)
-    _rootEl.addEventListener("_open", () => {
-      _open = true;
-      _current = true;
+    // listen to events by parent sidemenu (if parent has a final link current)
+    _rootEl.addEventListener("sidemenu:current:change", (e: Event) => {
+      const href = (e as CustomEvent).detail;
+      setCurrent(href);
     });
 
-    // watch path changes
-    let currentLocation = document.location.href;
-    const observer = new MutationObserver((_mutationList) => {
-      // if path change occurs
-      if (currentLocation !== document.location.href) {
-        currentLocation = document.location.href;
-        setCurrent();
-      }
+    // listen to events by children (if child is open the parent also has to be open)
+    _rootEl.addEventListener("_open", (e: Event) => {
+      _open = _current = (e as CustomEvent).detail.current;
     });
-    observer.observe(document.body, { childList: true, subtree: true });
-
-    // watch hash / browser history changes
-    window.addEventListener("popstate", setCurrent);
-  }
-
-  function removeEventListeners() {
-    window.removeEventListener("popstate", setCurrent);
   }
 
   function toSlug(path: string): string {
     return path?.toLowerCase().replace(/ /g, "-");
   }
 
-  function matchesMenu(): boolean {
-    return isUrlMatch(document.location, _slug) >= 0;
-  }
-
-  function matchesChild(el: SideMenuGroupElement): boolean {
-    if (isUrlMatch(document.location, toSlug(el.heading)) >= 0) {
-      return true;
-    }
-
-    const slot = el.querySelector("slot") as HTMLSlotElement;
-    if (!slot) {
-      return false;
-    }
-    const children = slot.assignedElements();
-    return !!children.find((child: Element) => {
-      return isUrlMatch(document.location, child.getAttribute("href")) >= 0;
-    });
-  }
-
-  function setCurrent() {
-    const slot = _rootEl.querySelector("slot") as HTMLSlotElement;
-    if (!slot) {
-      return false;
-    }
+  function setCurrent(matchedHref: string) {
+    const children = getSlottedChildren(_rootEl);
+    if (children.length === 0) return;
 
-    const children = slot.assignedElements();
-    let maxMatchWeight = -1;
     let matchedChild = null;
 
     _current = false;
     children.forEach((child: Element) => {
       const url = child.getAttribute("href");
-      const weight = isUrlMatch(document.location, url);
-      if (weight > maxMatchWeight) {
-        maxMatchWeight = weight;
-        matchedChild = child;
-      }
+      if (url === matchedHref) matchedChild = child;
+
       child.classList.remove("current");
 
       // get side-menu-group (level >= 2) marked as children
@@ -108,10 +87,10 @@
     });
 
     if (matchedChild) {
-      _current = true;
-      matchedChild.classList.add("current");
-      notifyParent(true);
+      (matchedChild as Element).classList.add("current");
     }
+    _current = _open = !!matchedChild;
+    notifyParent(_open);
   }
 
   function handleClick(e: Event) {
@@ -139,7 +118,7 @@
       <goa-icon type="chevron-forward" />
     {/if}
   </a>
-  <div class:hidden={!_open} class="group" data-testid="group">
+  <div class:hidden={!_open} class="group" data-testid="group" bind:this={_slotParentEl}>
     <slot />
   </div>
 </div>
diff --git a/libs/web-components/src/components/side-menu/SideMenu.svelte b/libs/web-components/src/components/side-menu/SideMenu.svelte
index e9a784a0c..71ee2efde 100644
--- a/libs/web-components/src/components/side-menu/SideMenu.svelte
+++ b/libs/web-components/src/components/side-menu/SideMenu.svelte
@@ -2,13 +2,17 @@
 
 <script lang="ts">
   import { onDestroy, onMount, tick } from "svelte";
-  import { isUrlMatch } from "../../common/urls";
+  import { getSlottedChildren } from "../../common/utils";
+  import { isUrlMatch, getMatchedLink } from "../../common/urls";
+  import { SideMenuGroupProps } from "../side-menu-group/SideMenuGroup.svelte";
 
   let _rootEl: HTMLElement;
+  let _sideMenuLinks: Element[] = [];
+  let _sideMenuGroupItems: SideMenuGroupProps[] = [];
 
   onMount(async () => {
     await tick();
-    setCurrentUrl();
+    getChildren();
     addEventListeners();
   });
 
@@ -16,35 +20,54 @@
     removeEventListeners();
   });
 
+  function getChildren() {
+    if (!_rootEl) return;
+
+    const slotChildren = getSlottedChildren(_rootEl);
+
+    if (slotChildren.length === 0) return;
+
+    _sideMenuLinks = slotChildren
+      .filter((el) => el.tagName === "A")
+      .map((el) => {
+        el.classList.remove("current");
+        return el;
+      });
+
+    _rootEl.addEventListener("sidemenugroup:mounted", (e: Event) => {
+      const sideMenuGroupProps = (e as CustomEvent<SideMenuGroupProps>).detail;
+      _sideMenuGroupItems = [..._sideMenuGroupItems, sideMenuGroupProps];
+      setCurrentUrl();
+    });
+  }
+
   function setCurrentUrl() {
-    const slot = _rootEl.querySelector("slot") as HTMLSlotElement;
-    if (!slot) {
-      return;
-    }
+    const url = `${window.location.pathname}${window.location.search}${window.location.hash}`;
 
-    const links = slot
-      .assignedElements()
-      .filter((el: Element) => el.tagName === "A");
-
-    let currentEl: Element | undefined = undefined;
-    let maxWeight = 0;
-    links.forEach((child: Element) => {
-      const weight = isUrlMatch(
-        document.location,
-        child.getAttribute("href") || "",
-      );
-
-      if (weight > maxWeight) {
-        maxWeight = weight;
-        currentEl = child;
-      }
-      child.classList.remove("current");
+    // check all links under SideMenu and SideMenuGroups
+    let links = [..._sideMenuLinks];
+    _sideMenuGroupItems.forEach((el) => {
+      links = [...links, ...el.links];
     });
 
+    links.forEach(link => link.classList.remove("current"));
+
+    const currentEl = getMatchedLink(links, window.location);
+
     if (!!currentEl) {
-      // @ts-expect-error
       currentEl?.classList.add("current");
     }
+    // even nothing is matched, we should inform side menu group to close and remove current
+    dispatchCurrentUrl(currentEl?.getAttribute("href") || "");
+  }
+
+  function dispatchCurrentUrl(href: string) {
+    _sideMenuGroupItems.forEach((item) => {
+      item.el.dispatchEvent(new CustomEvent("sidemenu:current:change", {
+        composed: true,
+        detail: href
+      }));
+    });
   }
 
   function addEventListeners() {
diff --git a/libs/web-components/src/components/side-menu/SideMenuWrapper.test.svelte b/libs/web-components/src/components/side-menu/SideMenuWrapper.test.svelte
new file mode 100644
index 000000000..b774308f1
--- /dev/null
+++ b/libs/web-components/src/components/side-menu/SideMenuWrapper.test.svelte
@@ -0,0 +1,15 @@
+<svelte:options customElement="test-side-menu-wrapper" />
+
+<script lang="ts">
+  import GoASideMenu from "./SideMenu.svelte";
+</script>
+
+<GoASideMenu>
+  <goa-side-menu-heading>Get started</goa-side-menu-heading>
+  <a href="get-started">Overview</a>
+  <a href="get-started/designers">UX designers</a>
+  <goa-side-menu-group heading="Developers">
+    <a href="get-started/developers">Overview</a>
+    <a href="get-started/developers/setup">Setup</a>
+  </goa-side-menu-group>
+</GoASideMenu>
diff --git a/libs/web-components/src/components/side-menu/side-menu.spec.ts b/libs/web-components/src/components/side-menu/side-menu.spec.ts
index 2a6389383..b4aafafbc 100644
--- a/libs/web-components/src/components/side-menu/side-menu.spec.ts
+++ b/libs/web-components/src/components/side-menu/side-menu.spec.ts
@@ -1,5 +1,22 @@
-// import SideMenu from "./SideMenu.svelte";
-// import { render } from "@testing-library/svelte";
 import { it } from "vitest";
+import { render } from "@testing-library/svelte";
+import SideMenuWrapper from './SideMenuWrapper.test.svelte';
 
-it.skip("test", async () => { /* do nothing */ });
+describe.skip("SideMenu should render with children and set highlighted menu item correctly", () => {
+  it("should render", async() => {
+    // Mock window.location
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    delete window.location;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    window.location = new URL('http://localhost/get-started');
+    const {container} = render(SideMenuWrapper);
+
+    const links = container.querySelectorAll("a");
+    expect(links.length).toBe(4);
+    const currentLink = container.querySelector("a.current");
+    expect(currentLink).toBeTruthy();
+    expect(currentLink?.getAttribute("href")).toBe("get-started");
+  })
+})
diff --git a/libs/web-components/src/components/tabs/Tabs.svelte b/libs/web-components/src/components/tabs/Tabs.svelte
index 89c8046f9..55c57377c 100644
--- a/libs/web-components/src/components/tabs/Tabs.svelte
+++ b/libs/web-components/src/components/tabs/Tabs.svelte
@@ -50,7 +50,7 @@
   }
 
   function bindChildren() {
-    const path = window.location.href;
+    const path = window.location.pathname;
 
     // create buttons (tabs) for each of the tab contents elements
     _tabProps.forEach((tabProps, index) => {