> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# TabsLayout

> TabsLayout component documentation. Covers tab configuration, default active items, and switching events to enable navigation between sub-tasks and views.

The TabsLayout component lets users switch between different sub-tasks, views, or modes. It acts as global navigation and serves as the primary area for displaying and switching between global features.

## When to Use

* When you need to categorize or separate page content.
* When you need to condense page controls to make better use of page space.

## Component Example

## Component Properties

| Attribute        | Description                                                                                    | Type                                                   | Default       |
| ---------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ------------- |
| `contentPadding` | Sets the inner padding of the content area. Enter a CSS padding value.                         | `string`                                               | `'20px 20px'` |
| `excessMode`     | The sliding mode when there are too many tabs. `slide`: slide; `dropdown`: dropdown selection. | `'slide' \| 'dropdown'`                                | `'slide'`     |
| `extraRender`    | Renders additional content in the navigation bar.                                              | `() => ReactNode`                                      | -             |
| `items`          | Sets the default active item, disabled items, and tab labels.                                  | [TabItem\[\]](/open/yida/components/interface#tabitem) | -             |
| `needBadge`      | Enables badges.                                                                                | `boolean`                                              | `false`       |
| `onTabChange`    | Tab switching event.                                                                           | `(activeIndex: number, key: string) => void`           | -             |
| `renderBadge`    | Renders the badge.                                                                             | `(tabItem: object) => ReactNode`                       | -             |
| `shape`          | Sets the tab shape.                                                                            | `'pure' \| 'wrapped' \| 'text' \| 'capsule'`           | `'pure'`      |
| `size`           | Tab item size.                                                                                 | `'small' \| 'medium'`                                  | `'medium'`    |
| `tabPosition`    | Position of the navigation tabs.                                                               | `'top' \| 'bottom' \| 'left' \| 'right'`               | `'top'`       |
| `tabRender`      | Custom tab renderer.                                                                           | `(key: string, props: object) => ReactNode`            | -             |