> For the complete documentation index, see [llms.txt](https://yashs-organization-7.gitbook.io/modular-ui-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yashs-organization-7.gitbook.io/modular-ui-documentation/tabs.md).

# Tabs

## Tabs

## **MUITabs**

The **`MUITabs`** widget is a flexible and customizable tab bar for Flutter applications, designed to enhance navigation and content organization. It supports both horizontal and vertical orientations and provides options for customization such as underlining and transparency.

#### **Parameters:**

* **`tabs`**: List of **`MUITab`** objects, where each tab has a label and an optional icon.
* **`tabIndex`**: Index of the initially selected tab. Default is 0.
* **`backgroundColor`**: Background color of the tab bar. Default is a light grayish color.
* **`curve`**: The curve for the animation when switching tabs. Default is **`Curves.easeInOut`**.
* **`onChanged`**: Callback function that is called when a tab is tapped. It provides the index of the selected tab.
* **`indicatorColor`**: Color of the tab indicator.
* **`indicatorBorderRadius`**: Border radius of the tab indicator.
* **`maxTabSize`**: Maximum size for an individual tab. The final tab size is calculated based on the available space.
* **`borderRadius`**: Border radius of the container that wraps around the tab bar.
* **`labelStyle`**: Style for the tab labels.
* **`axis`**: The axis in which the tab bar should be oriented (horizontal or vertical).
* **`animationDuration`**: Duration of the animation when switching tabs.
* **`underline`**: Whether to use an underline for indicating the selected tab.
* **`underlineHeight`**: Height of the underline if **`underline`** is set to **`true`**.

### **Factory Constructors**

#### **`MUITabs.transparent`**

Creates a transparent tab bar.

#### **`MUITabs.underlined`**

Creates a tab bar with an underline for the selected tab.

### Example usage

Default

{% embed url="<https://verdant-lokum-9bd5c2.netlify.app/#/tabbar>" %}
Default Tab
{% endembed %}

```dart
ValueListenableBuilder(
            valueListenable: tabIndexNotifier,
            builder: (context, tabIndex, child) {
              return MUITabs(
                tabIndex: tabIndex,
                onChanged: (index) {
                  tabIndexNotifier.value = index;
                },
                tabs: [
                  MUITab(label: "HTML"),
                  MUITab(label: "React"),
                  MUITab(label: "Vue"),
                  MUITab(label: "Angular"),
                  MUITab(label: "Svelte"),
                ],
              );
            }),
```

Transparent

{% embed url="<https://verdant-lokum-9bd5c2.netlify.app/#/tabbarTransparent>" %}
Transparent Tab
{% endembed %}

```dart
ValueListenableBuilder(
            valueListenable: transparentTabIndexNotifier,
            builder: (context, tIndex, child) {
              return MUITabs.transparent(
                tabIndex: tIndex,
                onChanged: (index) {
                  transparentTabIndexNotifier.value = index;
                },
                tabs: [
                  MUITab(label: "HTML"),
                  MUITab(label: "React"),
                  MUITab(label: "Vue"),
                  MUITab(label: "Angular"),
                  MUITab(label: "Svelte"),
                ],
              );
            }),
```

Underlined

{% embed url="<https://verdant-lokum-9bd5c2.netlify.app/#/tabbarUnderlined>" %}
Underlined Tab
{% endembed %}

```dart
ValueListenableBuilder(
            valueListenable: underlinedTabIndexNotifier,
            builder: (context, tIndex, child) {
              return MUITabs.underlined(
                tabIndex: tIndex,
                onChanged: (index) {
                  underlinedTabIndexNotifier.value = index;
                },
                tabs: [
                  MUITab(label: "HTML"),
                  MUITab(label: "React"),
                  MUITab(label: "Vue"),
                  MUITab(label: "Angular"),
                  MUITab(label: "Svelte"),
                ],
              );
            }),
```

Vertical

{% embed url="<https://verdant-lokum-9bd5c2.netlify.app/#/tabbarVertical>" %}
Vertical Tab
{% endembed %}

```dart
ValueListenableBuilder(
            valueListenable: verticalTabIndexNotifier,
            builder: (context, tabIndex, child) {
              return MUITabs(
                axis: Axis.vertical,
                tabIndex: tabIndex,
                onChanged: (index) {
                  verticalTabIndexNotifier.value = index;
                },
                underline: false,
                tabs: [
                  MUITab(label: "HTML"),
                  MUITab(label: "React"),
                  MUITab(label: "Vue"),
                  MUITab(label: "Angular"),
                  MUITab(label: "Svelte"),
                ],
              );
            }),
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://yashs-organization-7.gitbook.io/modular-ui-documentation/tabs.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.