# Make
The Tabs component allows you to create tabs.
use MoonShine\Decorations\Tabs; use MoonShine\Decorations\Tab; use MoonShine\Fields\Text; //... public function components(): array{ return [ Tabs::make([ Tab::make('Seo', [ Text::make('Seo title') //... ]), Tab::make('Categories', [ //... ]) ]) ];} //...
![](https://moonshine-laravel.com/screenshots/tabs.png)
# Vertical display of the tabs.
The method vertical()
allows you to display tabs in vertical mode.
vertical(Closure|bool|null $condition = null)
use MoonShine\Decorations\Tabs;use MoonShine\Decorations\Tab; //... public function components(): array{ return [ Tabs::make([ Tab::make('Seo', [ //... ]), Tab::make('Categories', [ //... ]) ])->vertical() ];}//...
![](https://moonshine-laravel.com/screenshots/tabs_vertical.png)
By default, the minimum width of a tabbed block at which the inline display changes is 480px
. You can change the minimum width value via the method customAttributes()
:
Tabs::make([ //... ]) ->customAttributes([ 'data-tabs-vertical-min-width' => 600 ])
# Active tab
The method active()
allows you to specify which tab should be active by default.
use MoonShine\Decorations\Tabs;use MoonShine\Decorations\Tab; //... public function components(): array{ return [ Tabs::make([ Tab::make('Seo', [ //... ]), Tab::make('Categories', [ //... ]) ->active() ]) ];} //...
# Icon
use MoonShine\Decorations\Tabs;use MoonShine\Decorations\Tab; //... public function components(): array{ return [ Tabs::make([ Tab::make('Seo', [ //... ]), Tab::make('Categories', [ //... ]) ->icon('heroicons.outline.pencil') ]) ];} //...