5 Pure CSS1 with JSPublished 2026-10-03Free · no sign-up
Navigation components built to be found and used by everyone: a responsive navbar with a proper menu button, tabs that work without JavaScript, an FAQ accordion on native details, breadcrumbs, pagination and an app sidebar. Each one handles keyboard focus and tells screen readers where the visitor is.
A header with a logo, links and a call-to-action that turns into a menu button on small screens. The button is a real button with aria-expanded and aria-controls, so screen readers announce whether the menu is open, and Escape closes it. Resize the editor preview below 600px to see the mobile menu.
var toggle = document.querySelector('.ttn-toggle');
var menu = document.getElementById('ttn-menu');
function setOpen(open) {
menu.classList.toggle('is-open', open);
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
toggle.textContent = open ? 'Close' : 'Menu';
}
toggle.addEventListener('click', function () { setOpen(!menu.classList.contains('is-open')); });
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { setOpen(false); toggle.focus(); } });
02. Tabs (No JavaScript)
Pure CSS
Three tabs switched with hidden radio buttons and the :checked selector, so they work without JavaScript and arrow keys move between them. The active tab gets an underline and stronger text. For complex apps, add the full ARIA tabs pattern with JavaScript; for simple content panels this is enough.
View code
<div class="ttn-tabs">
<input type="radio" name="ttn-tab" id="ttn-t1" checked>
<label for="ttn-t1">Details</label>
<input type="radio" name="ttn-tab" id="ttn-t2">
<label for="ttn-t2">Shipping</label>
<input type="radio" name="ttn-tab" id="ttn-t3">
<label for="ttn-t3">Returns</label>
<div class="ttn-panel" id="ttn-p1">Solid oak, oiled finish. 40 × 30 × 12 cm.</div>
<div class="ttn-panel" id="ttn-p2">Ships in 2 working days. Free over $80.</div>
<div class="ttn-panel" id="ttn-p3">Return within 30 days for a full refund.</div>
</div>
An FAQ accordion built on the native details and summary elements, which are keyboard accessible and announced correctly by screen readers with no JavaScript. The plus sign rotates into a cross when a panel opens. Adding the same name attribute to each details element makes only one open at a time in current browsers.
View code
<div class="ttn-acc">
<details name="ttn-faq" open>
<summary>How long does delivery take?</summary>
<p>Most orders arrive in two to four working days.</p>
</details>
<details name="ttn-faq">
<summary>Can I return an item?</summary>
<p>Yes, within 30 days, as long as it is unused.</p>
</details>
<details name="ttn-faq">
<summary>Do you ship abroad?</summary>
<p>We ship to most countries. Costs are shown at checkout.</p>
</details>
</div>
A breadcrumb trail inside a nav element with an ordered list, the structure search engines and screen readers expect. Separators are drawn with CSS so they are not read aloud, the current page is marked with aria-current, and long trails wrap onto two lines instead of overflowing.
Page links with previous and next controls, a current page marker and an ellipsis for skipped pages. Every control is at least 40px square for touch, the current page uses aria-current so it is announced, and disabled controls are real disabled states rather than just greyed-out text.
An app or docs sidebar with grouped links, icons drawn in CSS, a count badge and a clear active state. Section headings are real headings so screen-reader users can jump between groups, and the active link uses aria-current plus a visible bar, not colour alone.
Navigation is how people move through a site, so a broken menu breaks the whole visit. Use real links and buttons, mark the current page with aria-current="page", give the navigation a label such as aria-label="Main", and make sure every control is reachable with the Tab key and shows a visible focus ring.
Mobile menus need a real button
The menu toggle in the navbar demo is a <button> with aria-expanded and aria-controls, so assistive technology announces whether the menu is open. The Escape key closes it and returns focus to the button, which is what keyboard users expect from any pop-up.
Use native elements where they exist
The accordion uses <details> and <summary>, which browsers already make keyboard accessible and announce correctly, with no JavaScript. Native elements are less code to maintain and often more robust than custom widgets.
Breadcrumbs and pagination help search engines too
Breadcrumbs inside a nav with an ordered list, and pagination with real links, give search engines a clear map of your site's structure. Pair breadcrumbs with BreadcrumbList structured data for the best chance of rich results.
Frequently asked questions
Are the CSS-only tabs accessible?
They work with the keyboard and are fine for simple content panels. For complex applications, add the full ARIA tabs pattern with JavaScript so screen readers announce tab and panel roles.
How do I make only one accordion item open?
Give every details element the same name attribute. Current browsers then close the others when one opens, with no script.
Do these work on mobile?
Yes. Every control has a touch target of at least 40px, and the navbar collapses into a menu below 600px.