hiya! welcome to the playground!
 this is a space for me to fuck around with web stuff without worrying about it being at all usable or even functional. it's still heavily under construction, but i'm planning on having pages showing off lil snippets maybe with a bit of description.

 Anyone is welcome to use anything i've made in the playground for whatever purpose, like the rest of my site the playground is licensed under the CC0 license. Attribution isn't necessary but is appreciated. If you've got any questions, or want some help, feel free to get in contact with me! (contact info is in About > Contact)

> BACK TO HOME <

 To start, i'll talk about how i made the header for the playground, particularly the tabs!

 The header has a similar structure to the header of the main site, with a main flexbox containing a 'home' section with the site icon and name, then the navbar over on the right (with margin-left: auto;) which is where the real magic happens!

<header>
    <a href="..." id="home">
        <img src="..." alt="...">
        <span class="pixel">the playground</span>
    </a>
    <nav>
        <!-- where the magic happens! -->
    </nav>
    ...
</header>

 So, inside that nav section i've got a <ul>, which has each nav button inside its own <li>.

 Each nav button is made up of a pair of elements, a <details> first, and then a nested <div>. Each of the details share a name, and their <summary> has the name of the nav item. Sharing a name makes it so only one of them can be open at once, which is great for a navbar, and because they're details elements all of them can be closed at once, unlike a radio button group.

 Because the divs are inside the details, they aren't displayed by default and are only displayed when their paired <details> is open. They are also given position: absolute;, so they don't mess with their containing elements and can be put in the right spot.

header > nav div {
    position: absolute;
    right: 0; /* can also do `left: 0;` if you prefer them on the left, or mix n match, if they're going *all* the way left try making the <ul> `position: relative;` */
    transform: translateY(...); /* Use if your divs are too high/low, often due to padding */
    /* ... */
}

header > nav > ul > li details[open] + div {
    display: block;
}

 And that's really it for the tabs! It's a fairly simple system, which works great for it's purpose. You can put whatever you like in those divs, i'm using just a <ul> at the moment, and i might often nest some more <details> for nested lists, but it'll work with whatever.

 This method does have a few limitations. While this method can be used to make tabs generally, the details and divs have to be next to each other (as far as i'm aware, please show me how if not!). This makes positioning a real hassle if you don't want them visually next to each other. The possibility of all of them being closed also may be a downside for your use, in a navbar it's great but for regular tabs on a webpage it might not be so good. If you want some NoJS tabs that are better for that, i'd recommend another method i've found from Bytemoth, my implementation of which can be found here.

 Now, there is one bit of my header i've yet to talk about which you might have noticed (probably not). It's mobile responsive! When the viewport is too narrow to display the full navbar, it collapses down into a lil hamburger menu. This is also all NoJS! It's actually done in a similar way to the tabs, I've just got a <details> with the summary containing a unicode symbol that looks a lot like a hamburger menu (≡, U+2261) and it's contents are a position: absolute; div with some more dropdowns (named) containing lists for each nav category. The menu is displayed/hidden based on breakpoints, which i just got from when the full nav overflows on my screen (not necessarily on everyone's screen). The dropdowns are pretty much just mirrored from the main nav. It's really quite simple, the hardest part was just finding the right unicode symbol lol.