# Tabs

Account

Make changes to your account here. Click save when you're done.

 ## Usage This component ships a `tabs()` macro for Jinja and Nunjucks. ```html ``` ```html

Account

Make changes to your account here. Click save when you're done.

``` ### HTML structure
<div class="tabs">
Root tabs container. It becomes horizontal or vertical based on the child tablist's aria-orientation.
<nav role="tablist" aria-orientation="horizontal">
Tablist containing tab buttons. Set aria-orientation="vertical" for vertical tabs and data-variant="line" for the line style.
<button role="tab" id="{ TAB_ID }" aria-controls="{ PANEL_ID }" aria-selected="true" tabindex="0">
Tab trigger. The active tab has aria-selected="true" and tabindex="0". Inactive tabs use tabindex="-1". Disabled tabs use disabled or aria-disabled="true".
<div role="tabpanel" id="{ PANEL_ID }" aria-labelledby="{ TAB_ID }">
Panel controlled by a tab. Inactive panels are hidden.
### JavaScript API | API | Type | Description | | --- | --- | --- | | `tabs.select(tab)` | Method | Selects a tab button in the tablist. | | `tabs.refresh()` | Method | Rescans tabs and panels after children change inside the existing tablist/panel structure. | ## Examples ### Line
Make changes to your account here.
 ### Vertical
Manage account settings.
 ### Disabled
Account content.
 ### Icons
Account content.
 ### RTL Tabs support document direction. Set `dir="rtl"` on the tabs root or a parent element.
إعدادات الحساب.