--- title: Tabs Blade component --- ## Overview The tabs component allows you to render a set of tabs, which can be used to toggle between multiple sections of content: ```blade Tab 1 Tab 2 Tab 3 ``` ## Triggering the active state of the tab By default, tabs do not appear "active". To make a tab appear active, you can use the `active` attribute: ```blade Tab 1 {{-- Other tabs --}} ``` You can also use the `active` attribute to make a tab appear active conditionally: ```blade Tab 1 {{-- Other tabs --}} ``` Or you can use the `alpine-active` attribute to make a tab appear active conditionally using Alpine.js: ```blade Tab 1 {{-- Other tabs --}} ``` ## Setting a tab icon Tabs may have an [icon](https://blade-ui-kit.com/blade-icons?set=1#search), which you can set using the `icon` attribute: ```blade Notifications {{-- Other tabs --}} ``` ### Setting the tab icon position The icon of the tab may be positioned before or after the label using the `icon-position` attribute: ```blade Notifications {{-- Other tabs --}} ``` ## Setting a tab badge Tabs may have a [badge](badge), which you can set using the `badge` slot: ```blade Notifications 5 {{-- Other tabs --}} ``` ## Using a tab as an anchor link By default, a tab's underlying HTML tag is `