Sidebar - Vant 4

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { Sidebar, SidebarItem } from'vant'; const app = createApp(); app.use(Sidebar); app.use(SidebarItem);

Usage

Basic Usage

import { ref } from'vue'; exportdefault { setup() { const active = ref(0); return { active }; }, };

Show Badge

Disabled

Change Event

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const active = ref(0); constonChange = (index) => showToast(`Title ${index + 1}`); return { active, onChange, }; }, };

API

Sidebar Props

Attribute	Description	Type	Default
v-model	Index of chosen item	*number	string*

Sidebar Events

Event	Description	Arguments
change	Emitted when chosen item changed	index: number

SidebarItem Props

Attribute	Description	Type	Default
title	Content	string	''
dot	Whether to show red dot	boolean	false
badge	Content of the badge	*number	string*
badge-props	Props of Badge, see Badge - props	BadgeProps	-

| disabled | Whether to be disabled | boolean | false | | url | Link | string | - | | to | The target route should navigate to when clicked on, same as the to prop of Vue Router | string | object | - |

| replace | If true, the navigation will not leave a history record | boolean | false |

SidebarItem Events

Event	Description	Arguments
click	Emitted when an item is clicked	index: number

SidebarItem Slots

Name	Description
title	Custom item title

Types

The component exports the following type definitions:

importtype { SidebarProps, SidebarItemProps } from'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-sidebar-width	80px	-
--van-sidebar-font-size	var(--van-font-size-md)	-
--van-sidebar-line-height	var(--van-line-height-md)	-
--van-sidebar-text-color	var(--van-text-color)	-
--van-sidebar-disabled-text-color	var(--van-text-color-3)	-
--van-sidebar-padding	20px var(--van-padding-sm)	-
--van-sidebar-active-color	var(--van-active-color)	-
--van-sidebar-background	var(--van-background)	-
--van-sidebar-selected-font-weight	var(--van-font-bold)	-
--van-sidebar-selected-text-color	var(--van-text-color)	-
--van-sidebar-selected-border-width	4px	-
--van-sidebar-selected-border-height	16px	-
--van-sidebar-selected-border-color	var(--van-primary-color)	-
--van-sidebar-selected-background	var(--van-background-2)	-