Van Tabbar

Vant Tabbar Component

Tabbar component used to switch between different pages, commonly used as the main navigation for mobile applications.

When to Invoke

Invoke this skill when:

• User needs to implement bottom navigation bar
• User wants to switch between main app pages
• User needs to show badges on navigation items
• User wants to customize tabbar icons and colors
• User asks about route mode or fixed positioning

Features

• Bottom Navigation: Fixed at bottom for easy access
• Icon Support: Display icons with text labels
• Badge Support: Show dot or number badges
• Custom Icons: Use custom images for icons
• Route Mode: Integrate with Vue Router
• Custom Colors: Customize active and inactive colors
• Safe Area: Support bottom safe area adaptation
• Before Change: Validate before switching tabs

API Reference

Tabbar Props

Tabbar Events

TabbarItem Props

TabbarItem Slots

Types

import type { TabbarProps, TabbarItemProps } from 'vant';

Usage Examples

Basic Usage

<template>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">Home</van-tabbar-item>
    <van-tabbar-item icon="search">Search</van-tabbar-item>
    <van-tabbar-item icon="friends-o">Friends</van-tabbar-item>
    <van-tabbar-item icon="setting-o">Settings</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from 'vue';

const active = ref(0);
</script>

Match By Name

<template>
  <van-tabbar v-model="active">
    <van-tabbar-item name="home" icon="home-o">Home</van-tabbar-item>
    <van-tabbar-item name="search" icon="search">Search</van-tabbar-item>
    <van-tabbar-item name="friends" icon="friends-o">Friends</van-tabbar-item>
    <van-tabbar-item name="settings" icon="setting-o">Settings</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from 'vue';

const active = ref('home');
</script>

Show Badge

<template>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">Home</van-tabbar-item>
    <van-tabbar-item icon="search" dot>Search</van-tabbar-item>
    <van-tabbar-item icon="friends-o" badge="5">Friends</van-tabbar-item>
    <van-tabbar-item icon="setting-o" badge="20">Settings</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from 'vue';

const active = ref(0);
</script>

Custom Icon

<template>
  <van-tabbar v-model="active">
    <van-tabbar-item badge="3">
      <span>Custom</span>
      <template #icon="props">
        <img :src="props.active ? icon.active : icon.inactive" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="search">Search</van-tabbar-item>
    <van-tabbar-item icon="setting-o">Settings</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from 'vue';

const active = ref(0);
const icon = {
  active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
  inactive: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
};
</script>

Custom Color

<template>
  <van-tabbar v-model="active" active-color="#ee0a24">
    <van-tabbar-item icon="home-o">Home</van-tabbar-item>
    <van-tabbar-item icon="search">Search</van-tabbar-item>
    <van-tabbar-item icon="friends-o">Friends</van-tabbar-item>
    <van-tabbar-item icon="setting-o">Settings</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from 'vue';

const active = ref(0);
</script>

Route Mode

<template>
  <router-view />
  <van-tabbar route>
    <van-tabbar-item replace to="/home" icon="home-o">Home</van-tabbar-item>
    <van-tabbar-item replace to="/search" icon="search">Search</van-tabbar-item>
  </van-tabbar>
</template>

With Change Event

<template>
  <van-tabbar v-model="active" @change="onChange">
    <van-tabbar-item icon="home-o">Home</van-tabbar-item>
    <van-tabbar-item icon="search">Search</van-tabbar-item>
    <van-tabbar-item icon="friends-o">Friends</van-tabbar-item>
    <van-tabbar-item icon="setting-o">Settings</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';

const active = ref(0);

const => {
  showToast(`Tab ${index}`);
};
</script>

With Placeholder

<template>
  <van-tabbar v-model="active" fixed placeholder>
    <van-tabbar-item icon="home-o">Home</van-tabbar-item>
    <van-tabbar-item icon="search">Search</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from 'vue';

const active = ref(0);
</script>

Best Practices

1. Use route mode: Integrate with Vue Router for page navigation
2. Limit items: Keep 3-5 items for better usability
3. Use badges wisely: Show badges only for items requiring attention
4. Custom colors: Match active color with your brand
5. Safe area: Enable safe area for iOS devices
6. Placeholder: Use placeholder to prevent content overlap