# NavBar

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

Provides global navigation for pages.

## 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.

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`  |

---

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