Sidebar

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="activeKey">
  <van-sidebar-item title="Title" />
  <van-sidebar-item title="Title" />
  <van-sidebar-item title="Title" />
</van-sidebar>

export default {
  data() {
    return {
      activeKey: 0,
    };
  },
};

Show Badge

<van-sidebar v-model="activeKey">
  <van-sidebar-item title="Title" dot />
  <van-sidebar-item title="Title" badge="5" />
  <van-sidebar-item title="Title" badge="99+" />
</van-sidebar>

Disabled

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

Change Event

<van-sidebar v-model="activeKey" @change="onChange">
  <van-sidebar-item title="Title1" />
  <van-sidebar-item title="Title2" />
  <van-sidebar-item title="Title3" />
</van-sidebar>

import { Notify } from 'vant';

export default {
  data() {
    return {
      activeKey: 0,
    };
  },
  methods: {
    onChange(index) {
      Notify({ type: 'primary', message: index });
    },
  },
};

API

Sidebar Props

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

Sidebar Events

Event	Description	Arguments
change	Triggered when item changed	index: index of current item

SidebarItem Props

Attribute	Description	Type	Default
title	Content	string	`''`
dot	Whether to show red dot	boolean	`false`
badge `v2.5.6`	Content of the badge	number \| string	`''`
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	Triggered when click item	index: index of current item

SidebarItem Slots

Name	Description
title `v2.10.8`	Custom item title