@Component.layout.latte

<div n:class="tab-pane, $tab == 'content' ? active" id="component-{$id}-{$tab}">
	{snippet tab}
	{include #content}
	{/snippet}
</div>

Component.content.latte

{extends @Component.layout.latte}

{block #content}
<h2>Component {$id} - content</h2>
<p>Lorem ipsum dolor sit amet</p>

Component.layout.latte

<div class="tab-pane active" id="component-{$id}-tab">
	{snippet tab}
	{include #content}
	{/snippet}
</div>

Component.tabs.latte

<ul class="nav nav-tabs" id="myTab">
	<li n:class="$tab == 'content' ? active"><a n:href="change! content" data-target="#component-{$id}-tab" data-toggle="tab">content</a></li>
	<li n:class="$tab == 'settings' ? active"><a n:href="change! settings" data-target="#component-{$id}-tab" data-toggle="tab">settings</a></li>
	<li n:class="$tab == 'history' ? active"><a n:href="change! history" data-target="#component-{$id}-tab" data-toggle="tab">history</a></li>
</ul>

ComponentControl.php

<?php

class ComponentControl extends \Nette\Application\UI\Control
{
	/** @var int */
	private $id;

	/**
	 * @persistent
	 * @var string
	 */
	public $tab = 'content';

	/**
	 * @param int
	 */
	public function __construct($id)
	{
		parent::__construct();

		$this->id = $id;
	}

	public function render()
	{
		$this->template->id = $this->id;
		$this->template->tab = $this->tab;
		if (!$this->presenter->isAjax()) {
			$this->template->setFile(__DIR__ . '/templates/Component.tabs.latte');
		}
		$this->template->render();
	}

	public function renderTab()
	{
		$this->template->id = $this->id;
		$this->template->tab = $this->tab;
		$this->template->setFile(__DIR__ . '/templates/Component.' . $this->tab . '.latte');
		$this->template->render();
	}

	public function handleChange($tab)
	{
		if (!$this->presenter->isAjax()) {
			$this->redirect('this');
		}
		$this->invalidateControl('tab');
		$this->template->id = $this->id;
		$this->template->tab = $tab;
		$this->template->setFile(__DIR__ . "/templates/Component.$tab.latte");
	}
}

init.js

(function ($, undefined) {

$.nette.ext('tabs', {
	load: function () {
		$('[data-toggle="tab"]').off('show.nette');
		$('[data-toggle="tab"][href]').on('show.nette', function () {
			var $header = $(this);
			$.nette.ajax({
				url: $header.attr('href')
			}).done(function (payload) {
				$header.off('show.nette');
				$header.removeAttr('href');
			});
		});
	}
});

$(function() {
	$.nette.init();
});

})(jQuery);

Section.latte

{foreach $components as $component}
<div id="component-{$component}">
	{control component-$component}

	<div class="tab-content">
		{control "component-$component":tab}
	</div>
</div>
{/foreach}