NavBar
Provides global navigation for pages.
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.
Provides global navigation for pages.
When to Use
Need to display the title and action of the current page content.
Demos
NavBar
Props
| Name | Description | Type | Default |
|---|---|---|---|
| back | The returned text of the area, if null returned, backIcon would not be rendered | ReacNode | null | '' |
| backIcon | Whether to display the back arrow icon of the return area, you can also pass in ReactNode for customization | boolean | ReactNode | true |
| children | Title | ReactNode | - |
| left | Content on the left, rendered on the right side of the return area | ReactNode | - |
| onBack | Callback after clicking the return area | () => void | - |
| right | The content of the right side | ReactNode | - |
CSS Variables
| Name | Description | Default |
|---|---|---|
| --border-bottom | the border bottom of the NavBar | none |
| --height | the height of the Navbar | 45px |