Shoelace: Can you add the possibility for regular links on tabs-nav?

[oliveratgithub]

Hi there,
I (mis-)use a tabs-nav on my site as a horizontal navigation - because it suits this case quite well :)

However, it by default prevents opening a new page on click on a tab element. Would it be possible to add such functionality oob as compared to the current behaviour, where it is designed to only show/hide certain tab content containers?

Thanks,
Oliver

[claviska]

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

[oliveratgithub]

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>

[claviska]

Fixed in beta24.

[oliveratgithub]

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;
})

[claviska]

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

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>