SideBar
Display the navigation bar vertically.
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.
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 | - |