# TabBar

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/tab-bar
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Navigation tabs at the bottom of the page.

## Install

```bash
npm install antd-mobile@5.43.0
```

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

Navigation tabs at the bottom of the page.

## When to Use

Useful for switching between different pages.

## Demos

## TabBar

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| activeKey | `key` of currently active `item` | `string \| null` | - |
| defaultActiveKey | The initialized `key` of the selected `item`, if the `activeKey` is not set | `string \| null` | `key` of the first `TabBar.Item` |
| onChange | Callback when switching panel | `(key: string) => void` | - |
| safeArea | Whether to enable safe area padding | `boolean` | `false` |

## TabBar.Item

### Props

| Name | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| badge | Badge，the same as [Badge](/components/badge) `content` prop | `React.ReactNode \| typeof Badge.dot` | - |  |
| icon | Icon | `ReactNode \| ((active: boolean) => ReactNode)` | - |  |
| key | Corresponding to `activeKey` | `string` | - |  |
| title | Title | `ReactNode \| ((active: boolean) => ReactNode)` | - |  |
| onClick | Callback when click item | `() => void` | - | 5.38.0 |

## FAQ

### Why can't the TabBar be fixed at the bottom of the page?

The layout logic in different business projects is different. TabBar itself does not contain logic related to positioning and outer layout, and needs to be controlled by writing CSS in the business project.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt