# SideBar

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

Display the navigation bar vertically.

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

Display the navigation bar vertically.

## When to Use

Users are required to quickly navigate to a collection of content and switch back and forth between multiple pieces of content.

## Demos

## SideBar

### 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 1st `item` |
| onChange | Callback when switching panel | `(key: string) => void` | - |

### CSS Variables

| Name | Description | Default |
| --- | --- | --- |
| --background-color | Color of background | `#f5f5f5` |
| --height | the height of the SideBar | `100%` |
| --item-border-radius | the border-radius of the currently active `item` | `8px` |
| --width | the width of the SideBar | `105px` |

### SideBar.Item

### Props

| Name     | Description                   | Type                    | Default |
| -------- | ----------------------------- | ----------------------- | ------- |
| badge    | Badge of the `item`           | `BadgeProps['content']` | -       |
| disabled | Should the `item` be disabled | `boolean`               | `false` |
| key      | Corresponding to `activeKey`  | `string`                | -       |
| title    | Title of the `item`           | `ReactNode`             | -       |

---

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