Tabs

This tabs component works without JavaScript by using a combination of anchors, which point to the tabpanels, and CSS, that shows the correct tabpanel using :target. If JavaScript is enabled, the behavior will be enhanced and the anchors will be replaced using buttons. The implementation is roughly based on this Example of Tabs with Automative Activation on w3.org.

Information

Folder: src/components/patterns/tabs

Files

Schema

Mocks

Template

// src/components/patterns/tabs/tabs.twig

{{ attach_library("circle_dot/pattern-tabs") }}

<cd-tabs class="Tabs">
	{% if heading %}
		<div class="Tabs-heading">
			{{ heading }}
		</div>
	{% endif %}

	{% include "@patterns/tabs/tabs-list/tabs-list.twig" with {
		is_interactive: is_interactive,
		tabs: tabs,
	} only %}

	<div class="Tabs-tabpanels">
		{% for item in content %}
			<div
				class="Tabs-tabpanel"
				role="tabpanel"
				tabindex="0"
				id="{{ item.id }}"
				aria-labelledby="{{ item.id }}"
				{% if not item.is_selected %}hidden{% endif %}
			>
				{{ item.content }}
			</div>
		{% endfor %}
	</div>
</cd-tabs>

Variants

default

Open

With heading

Open