# Tabs

#### Full Example

{% code fullWidth="true" %}

```javascript
config: {
    tabs: {
        'User Profiles': {    // Configure a tab
            // translations for multilingual support
            // This works for all config objects: tabs, fields, actions, ...etc
            // Simply add the translations and pair them up to the language code that is passed to the dashboard in the config object
            translation: {
                'ar-AE':'ملفات تعريف المستخدم'
            },
            // The class name for the tab icon. You can use custom class names (add them to theme.css), or if you include the fontawesome library
            // you can just use the icon classname from fontawesome (Supports fontawesome)
            icon: "far fa-user",
            // A brief description that will appear on top of each tab
            // Can be just a string when multilanguage support is not needed
            // Alternatively, can be an object with language keys as below for multilingual support
            description: {
                'en-US': 'A list of all approved users',
                'ar-AE': 'قائمة بجميع المستخدمين المعتمدين'
            },    
            // Sets the default view mode for this tab: Cards view or List view
            viewMode: 'Cards',    // 'Cards' or 'List'
            // CSS GRID property/value pairs to format the records in Cards view.
            // Below is the default css properties, can be changed to any valid CSS property/value pairs
            recordsGrid:{                
                'grid-template-columns': '1fr 1fr 1fr',
                'gap': '20px',
                'justify-items': 'stretch'                    
            },
            // Pagination. Define how many records per page.
            // Defaults to 12!
            itemsPerPage: 12,
            // This property object configures the settings for the records,
            // including the fields, actions, the grid ...etc
            recordSettings:{
                ...
            }
        }
    }
}
```

{% endcode %}

#### Properties/Methods

<details>

<summary>viewMode <mark style="background-color:purple;">&#x3C;String></mark></summary>

Sets the default view mode for this tab.

#### Values

* "Cards"\ <mark style="color:blue;">View this tab in Cards Mode</mark>
* "List"\ <mark style="color:blue;">View this tab in List Mode</mark>&#x20;

</details>

<details>

<summary>description <mark style="background-color:purple;">&#x3C;String></mark> or <mark style="background-color:purple;">&#x3C;Object></mark></summary>

Description text to be displayed on top of the current Tab

#### Values

* \<String>\ <mark style="color:blue;">Description text to be displayed on top of the current Tab, in all languages</mark>
* \<Object>

  <mark style="color:blue;">An Object containing key/value pairs, with the description for each language.</mark>\ <mark style="color:blue;">Example:</mark><br>

  ```
  description: {
    'en-US': 'A list of all approved users',			
    'ar-AE': 'قائمة بجميع المستخدمين المعتمدين'
  }
  ```

</details>

<details>

<summary>icon <mark style="background-color:purple;">&#x3C;String></mark></summary>

Shows an Icon for this Tab to appear above the Tab Name

#### Values

* \<String>\ <mark style="color:blue;">Classname of the icon. If you include fontawesome, you can add the classname in this property and the icon will appear formatted appropriatley</mark>

</details>

<details>

<summary>recordsGrid <mark style="background-color:purple;">&#x3C;Object></mark></summary>

An Object Literal of CSS GRID properties to arrange the records.

#### Values

* \<Object>

  <mark style="color:blue;">An Object containing key/value pairs of any valid CSS properties inside a CSS GRID container</mark>\ <mark style="color:blue;">Default (if ommitted):</mark><br>

  ```json
  recordsGrid:{				
  	'grid-template-columns': '1fr 1fr 1fr',
  	'gap': '20px',
  	'justify-items': 'stretch'					
  }
  ```

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dashboardjs.net/configuration-options/config/tabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.