# 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) ```typescript export type TabsVariant = 'default' | 'underline' | 'pills' defineProps({ variant: { type: String as PropType, default: '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 ```typescript export type TabsVariant = 'default' | 'underline' | 'pills' defineProps({ directive: { type: String as PropType<'if' | 'show'>, default: 'if', }, }) ``` ## Tab pane interaction You can add `@click:pane` to Tabs component to intercept click on tab pane. ```vue ```