Install

import { createApp } from 'vue';
import { Sidebar, SidebarItem } from 'vant';

const app = createApp();
app.use(Sidebar);
app.use(SidebarItem);

Usage

Basic Usage

<van-sidebar v-model="active">
  <van-sidebar-item title="Title" />
  <van-sidebar-item title="Title" />
  <van-sidebar-item title="Title" />
</van-sidebar>

import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    return { active };
  },
};

Show Badge

<van-sidebar v-model="active">
  <van-sidebar-item title="Title" dot />
  <van-sidebar-item title="Title" badge="5" />
  <van-sidebar-item title="Title" badge="20" />
</van-sidebar>

Disabled

<van-sidebar v-model="active">
  <van-sidebar-item title="Title" />
  <van-sidebar-item title="Title" disabled />
  <van-sidebar-item title="Title" />
</van-sidebar>

Change Event

<van-sidebar v-model="active" @change="onChange">
  <van-sidebar-item title="Title 1" />
  <van-sidebar-item title="Title 2" />
  <van-sidebar-item title="Title 3" />
</van-sidebar>

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const active = ref(0);
    const onChange = (index) => Toast(\`Title \${index + 1}\`);
    return {
      active,
      onChange,
    };
  },
};

API

Attribute	Description	Type	Default
v-model	Index of chosen item	number \| string	`0`

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 `v3.2.8`	Props of Badge, see Badge - props	BadgeProps	-
disabled	Whether to be disabled	boolean	`false`
url	Link	string	-
to	Target route of the link, same as to 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:

import type { 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-color	var(--van-background-color)	-
--van-sidebar-selected-font-weight	var(--van-font-weight-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-danger-color)	-
--van-sidebar-selected-background-color	var(--van-background-color-light)	-

Sidebar

Intro