I'm using sveltekit goto function to navigate to a page using on:click on a div.

clickHandler: (id: string) => goto(`/app/profile/${id}/settings/general-info`)

How can I specify to open page in a new tab just like using CTRL + Click?

I'm using sveltekit goto function to navigate to a page using on:click on a div.

clickHandler: (id: string) => goto(`/app/profile/${id}/settings/general-info`)

How can I specify to open page in a new tab just like using CTRL + Click?

• javascript
• html
• svelte
• sveltekit

• 1 "on:click on a div" is bad. For accessibility, click events should only be attached on interactive elements that are supposed to be clicked, e.g. button. – brunnerh Commented Oct 25, 2022 at 9:49
• 1 Does this answer your question? Open a URL in a new tab (and not a new window) – brunnerh Commented Oct 25, 2022 at 9:52
• 2 If an element is supposed to be a link, it should use an a tag, that way the user simply can use Ctrl-Click or the right click menu to open the link elsewhere. If you want the link to open in a new tab by default, just specify target="_blank". – brunnerh Commented Oct 25, 2022 at 10:01

2 Answers 2

If you want to manage this from a ts/js file and the code is running client side then you can use window.open instead of goto -

window.open(`/app/profile/${id}/settings/general-info`, "_blank");

you can use a regular <a> element to create a link and specify target="_blank" to open it in a new tab.

here is an example of the the code.

<a href="https://svelte.dev" target="_blank">Svelte</a>

a live web environment showing that how it works.