diff --git a/packages/side-nav/src/vaadin-side-nav-item.d.ts b/packages/side-nav/src/vaadin-side-nav-item.d.ts index d9f7b7f512..b92e493055 100644 --- a/packages/side-nav/src/vaadin-side-nav-item.d.ts +++ b/packages/side-nav/src/vaadin-side-nav-item.d.ts @@ -100,6 +100,11 @@ declare class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixi */ readonly current: boolean; + /** + * The target of the link. Works only when `path` is set. + */ + target: string | null | undefined; + addEventListener( type: K, listener: (this: SideNavItem, ev: SideNavItemEventMap[K]) => void, diff --git a/packages/side-nav/src/vaadin-side-nav-item.js b/packages/side-nav/src/vaadin-side-nav-item.js index b275cf5f83..e5cd08a9d9 100644 --- a/packages/side-nav/src/vaadin-side-nav-item.js +++ b/packages/side-nav/src/vaadin-side-nav-item.js @@ -127,6 +127,11 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab readOnly: true, reflectToAttribute: true, }, + + /** + * The target of the link. Works only when `path` is set. + */ + target: String, }; } @@ -201,6 +206,7 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab ?disabled="${this.disabled}" tabindex="${this.disabled || this.path == null ? '-1' : '0'}" href="${ifDefined(this.disabled ? null : this.path)}" + target="${ifDefined(this.target)}" part="link" aria-current="${this.current ? 'page' : 'false'}" > diff --git a/packages/side-nav/test/side-nav-item.test.js b/packages/side-nav/test/side-nav-item.test.js index a2093b34e9..5d802352eb 100644 --- a/packages/side-nav/test/side-nav-item.test.js +++ b/packages/side-nav/test/side-nav-item.test.js @@ -292,5 +292,21 @@ describe('side-nav-item', () => { toggle.click(); expect(spy.called).to.be.false; }); + + describe('target property', () => { + it('should set target attribute to the anchor when target is set', async () => { + item.target = '_blank'; + await nextRender(); + expect(anchor.getAttribute('target')).to.be.equal('_blank'); + }); + + it('should remove target attribute from the anchor when target is removed', async () => { + item.target = '_blank'; + await nextRender(); + item.target = null; + await nextRender(); + expect(anchor.hasAttribute('target')).to.be.not.ok; + }); + }); }); });