Vertical

Vertical tabs example. To change where tabs will appear property $placement can be used with predefined constants:

• Tabs::PlacementTop - default
• Tabs::PlacementRight
• Tabs::PlacementLeft
• Tabs::PlacementBottom

When there are many tabs, vertical align might be good solution

Tabs on left

echo Tabs::widget([
	'placement' => Tabs::PlacementLeft,
	'items' => $items
]);

Tabs on right

echo Tabs::widget([
	'placement' => Tabs::PlacementRight,
	'items' => $items
]);

Tabs on bottom

echo Tabs::widget([
	'placement' => Tabs::PlacementBottom,
	'items' => $items
]);

Vertical Tabs in horizontal tabs

Nesting tabs allows You to fit a lot of user interface components with tree-like structure.

It is good to prepare items as separate variable on such nested structures for better understanding of code.

echo Tabs::widget([
	'items' => [
		[
			'label' => 'On left',
			'content' => Tabs::widget([
				'placement' => Tabs::PlacementLeft,
				'items' => $items
			])
		],
		[
			'label' => 'On Right',
			'content' => Tabs::widget([
				'placement' => Tabs::PlacementRight,
				'items' => $items
			])
		],
	]
]);