# Vue Tabs - Flowbite #### Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container --- :::tip Original reference: [https://flowbite.com/docs/components/tabs/](https://flowbite.com/docs/components/tabs/) ::: The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite. ## Prop - variant (default) ```vue ``` ## Prop - variant (underline) ```vue ``` ## Prop - variant (pills) ```vue ``` ## Prop - directive Use this props if you want to control which directive to use for rendering every tab content ```vue ``` ## Tab pane interaction You can add `@click:pane` to Tabs component to intercept click on tab pane. ```vue ``` ## API ### Props | Name | Values | Default | |------------|--------------------------------|-----------| | directive | `if`, `show` | `if` | | modelValue | `string` | `''` | | variant | `default`, `underline`, `pill` | `default` |