vant/src/sidebar

Sidebar

Intro

The vertically displayed navigation bar is used to switch between different content areas.

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

<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

Sidebar Props

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

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	''
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

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-gray-5)	-
--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-white)	-