Tabs

Tabs with default configuration. They react on hash change, so there are no events attached to links. Also browser navigation works. If id's are no provided, tabs will get auto generated, sequential id's.

echo Tabs::widget([
	'items' => [
		[
			'label' => 'Item one',
			'content' => 'Content of one'
		],
		[
			'label' => 'Item two',
			'content' => 'Content of two'
		],
	]
]);

Tabs within tabs and custom id's

Nested tabs are supported, simply place output of tab widget as a content of another tab. Here custom id's are used. Notice that these id's are in links. For end-user visible and not too dynamic content this might be feasible, however keep in mind that id's must be unique. Using custom id's ensure that they will not change in future, and allows bookmarking of tabs.

echo Tabs::widget([
	'id' => 'one',
	'items' => [
		[
			'id' => 1,
			'label' => 'Item one',
			'content' => Tabs::widget([
				'id' => 'two',
				'items' => [
					[
						'id' => 1,
						'label' => 'Inner tab one',
						'content' => 'Inner tab one content'
					],
					[
						'id' => 2,
						'label' => 'Inner tab two',
						'content' => 'Inner tab two content'
					],
				]
			])
		],
		[
			'id' => 2,
			'label' => 'Item two',
			'content' => 'Content of two'
		],
	]
]);