TabBar
Navigation tabs at the bottom of the page.
Install
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 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.