# Vue Tabs Components > The CoreUI Vue Tabs component provides a flexible and accessible way to create tabbed navigation in your application. It supports various styles and configurations to meet different design requirements. ## Example The basic Vue tabs example uses the `variant="tabs"` props to generate a tabbed interface. ```html ``` ## Available styles Change the style of ``'s component with modifiers and utilities. Mix and match as needed, or build your own. ### Unstyled If you don’t provide the `variant` prop, the component will default to a basic style. ```html ``` ### Pills Take that same code, but use `variant="pills"` instead: ```html ``` ### Underline Take that same code, but use `variant="underline"` instead: ```html ``` ### Underline border Take that same code, but use `variant="underline-border"` instead: ```html ``` ### Enclosed Use the `variant="enclosed"` class to give your tab items a subtle border and rounded styling. ```html ``` ### Enclosed pills Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each tab item, using pill-shaped borders and smoother outlines. ```html ``` ### Fill and justify Force your ``'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width. ```html ``` For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the `layout="fill"` above, every nav item will be the same width. ```html ``` ## Accessibility Dynamic tabbed interfaces, as described in the [WAI ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). ### WAI-ARIA Roles - The element that serves as the container for the set of tabs has the role `tablist`. - Each element that serves as a tab has the role `tab` and is contained within the element with the role `tablist`. - Each element that contains the content panel for a tab has the role `tabpanel`. - If the tab list has a visible label, the element with the role `tablist` has `aria-labelledby` set to a value that refers to the labeling element. Otherwise, the `tablist` element has a label provided by `aria-label`. - Each element with the role `tab` has the property `aria-controls` referring to its associated `tabpanel` element. - The active tab element has the state `aria-selected` set to `true`, and all other tab elements have it set to `false`. - Each element with the role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element. Our Vue Tabs component automatically manages all `role="..."` and `aria-` attributes for accessibility. It also handles the selected state by adding `aria-selected="true"` to the active tab. Additionally, you have the flexibility to manually set these attributes, as shown in the example below: ```vue Home Profile Contact Disabled Home tab content Profile tab content Contact tab content Disabled tab content ``` This example demonstrates how to manually set `aria-selected`, `aria-controls`, and `aria-labelledby` attributes on your ``'s and ``'s. ### Keyboard Interaction **When focus enters the tab list:** Tab: It places focus on the active `tab` element. **When focus is on a tab element:** Tab: Moves focus to the next element in the tab sequence, typically the tabpanel unless the first focusable element inside the tabpanel is found earlier. Left Arrow: Moves focus to the previous tab. If on the first tab, it wraps around to the last tab. Right Arrow: Moves focus to the next tab. If on the last tab, it wraps around to the first tab. Home: Moves focus to the first tab. End: Moves focus to the last tab. ## API Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here. - [<CTab />](./api/#ctab) - [<CTabContent />](./api/#ctabcontent) - [<CTabList />](./api/#ctablist) - [<CTabPanel />](./api/#ctabpanel) - [<CTabs />](./api/#ctabs)