Can you add the possibility for regular links on tabs-nav? about shoelace HOT 5 CLOSED

Fixed in beta24.

from shoelace.

Sorry, I totally misread that before and thought you were referring to dropdowns which was a similar issue solved in def471e.

I'm glad you found a solution. I'm not too keen on tabs having different behaviors for UX reasons, but it could probably work if you made it visually obvious. In that case, the snippet you provided is pretty much what I'd recommend. Maybe target it with rel="external" though so it's more generic and reusable:

$('#tab-nav a[rel="external"]').on('click', function(event) {
  event.preventDefault();
  location.href = this.href;
});

Then apply rel="external" to the appropriate tab(s):

<nav class="tabs-nav">
  <a href="#tab-1" class="active">Tab 1</a>
  <a href="#tab-2">Tab 2</a>
  <a href="https://example.com/" rel="external">External Link</a>
</nav>

from shoelace.

Are you using the latest version? I believe this was resolved in def471e.

from shoelace.

Tested with beta23, but it still doesn't work in my opinion. Here's my code, in case I did something wrong:

	<header id="header" class="text-center fixed-header">
		<h1>Test page</h1>
		<div class="tabs">
			<nav class="tabs-nav">
				<a href="index.php" class="active">Home</a>
				<a href="blog.php">Blog</a>
				<a href="contact.php">Contact</a>
			</nav>
		</div>
		<hr>
	</header>

from shoelace.

beta24 didn't fix this for me. But I achieved the desired behaviour with one of the following 2 approaches:

A – worse: by modifying shoelace's core shoelace.js and removing this part of the code:
https://github.com/claviska/shoelace-css/blob/62b23735dcfcadf27a019c322030009805e61435/source/js/tabs.js#L88

B – better: Another working approach is using a jQuery function
(tab-nav is the id="tab-nav" of my Tabs element)

$('#tab-nav a:not(".active")').on('click', function(event) {
    var url = $(this).attr('href');
    window.location = url;
})

from shoelace.