feat: add router-ignore API to side nav item

packages/side-nav/src/vaadin-side-nav-item.d.ts

@@ -110,6 +110,16 @@ declare class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixi
    */
   target: string | null | undefined;
 
+  /**
+   * Whether to exclude the item from client-side routing. When enabled,
+   * this causes the item to behave like a regular anchor, causing a full
+   * page reload. This only works with supported routers, such as the one
+   * provided in Vaadin apps, or when using the side nav `onNavigate` hook.
+   *
+   * @attr {boolean} router-ignore
+   */
+  routerIgnore: boolean;
+
   addEventListener<K extends keyof SideNavItemEventMap>(
     type: K,
     listener: (this: SideNavItem, ev: SideNavItemEventMap[K]) => void,

packages/side-nav/src/vaadin-side-nav-item.js

@@ -137,6 +137,20 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
        * The target of the link. Works only when `path` is set.
        */
       target: String,
+
+      /**
+       * Whether to exclude the item from client-side routing. When enabled,
+       * this causes the item to behave like a regular anchor, causing a full
+       * page reload. This only works with supported routers, such as the one
+       * provided in Vaadin apps, or when using the side nav `onNavigate` hook.
+       *
+       * @type {boolean}
+       * @attr {boolean} router-ignore
+       */
+      routerIgnore: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
@@ -214,6 +228,7 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
           tabindex="${this.disabled || this.path == null ? '-1' : '0'}"
           href="${ifDefined(this.disabled ? null : this.path)}"
           target="${ifDefined(this.target)}"
+          ?router-ignore="${this.routerIgnore}"
           part="link"
           aria-current="${this.current ? 'page' : 'false'}"
         >

packages/side-nav/src/vaadin-side-nav.js

@@ -287,6 +287,11 @@ class SideNav extends SideNavChildrenMixin(FocusMixin(ElementMixin(ThemableMixin
       return;
     }
 
+    if (item.routerIgnore) {
+      // Allow default action when client-side routing is ignored
+      return;
+    }
+
     // Call the onNavigate callback
     const result = this.onNavigate({
       path: item.path,

packages/side-nav/test/navigation-callback.test.js

@@ -62,6 +62,13 @@ describe('navigation callback', () => {
     expect(clickEvent.defaultPrevented).to.be.false;
   });
 
+  it('should not cancel the click event when using router-ignore', async () => {
+    sideNavItem.routerIgnore = true;
+    await nextRender();
+    const clickEvent = clickItemLink(sideNavItem);
+    expect(clickEvent.defaultPrevented).to.be.false;
+  });
+
   it('should not cancel the click event if callback is not defined', () => {
     sideNav.onNavigate = undefined;
     const clickEvent = clickItemLink(sideNavItem);

packages/side-nav/test/side-nav-item.test.js

@@ -331,5 +331,25 @@ describe('side-nav-item', () => {
         expect(anchor.hasAttribute('target')).to.be.not.ok;
       });
     });
+
+    describe('router ignore property', () => {
+      it('should not set router-ignore attribute by default', () => {
+        expect(anchor.hasAttribute('router-ignore')).to.be.false;
+      });
+
+      it('should set router-ignore attribute to the anchor when router-ignore is enabled', async () => {
+        item.routerIgnore = true;
+        await nextRender();
+        expect(anchor.hasAttribute('router-ignore')).to.be.true;
+      });
+
+      it('should remove router-ignore attribute from the anchor when router-ignore is disabled', async () => {
+        item.routerIgnore = true;
+        await nextRender();
+        item.routerIgnore = false;
+        await nextRender();
+        expect(anchor.hasAttribute('router-ignore')).to.be.false;
+      });
+    });
   });
 });