diff --git a/packages/varlet-vue2-cli/src/commands/changelog.ts b/packages/varlet-vue2-cli/src/commands/changelog.ts
index b41d47a0..406f9bd7 100644
--- a/packages/varlet-vue2-cli/src/commands/changelog.ts
+++ b/packages/varlet-vue2-cli/src/commands/changelog.ts
@@ -5,8 +5,8 @@ import { resolve as resolvePath } from 'path'
 import { CWD } from '../shared/constant'
 
 interface ChangelogCommandOptions {
-  file?: string;
-  releaseCount?: number;
+  file?: string
+  releaseCount?: number
 }
 
 export function changelog({ releaseCount = 0, file = 'CHANGELOG.md' }: ChangelogCommandOptions = {}): Promise<void> {
diff --git a/packages/varlet-vue2-cli/src/commands/jest.ts b/packages/varlet-vue2-cli/src/commands/jest.ts
index b313c47d..4ddf4f09 100644
--- a/packages/varlet-vue2-cli/src/commands/jest.ts
+++ b/packages/varlet-vue2-cli/src/commands/jest.ts
@@ -3,10 +3,10 @@ import { runCLI } from 'jest'
 import { CWD, JEST_CONFIG } from '../shared/constant'
 
 interface JestCommandOptions {
-  watch?: boolean;
-  watchAll?: boolean;
-  component?: string;
-  clearCache?: boolean;
+  watch?: boolean
+  watchAll?: boolean
+  component?: string
+  clearCache?: boolean
 }
 
 export async function jest(cmd: JestCommandOptions) {
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation-item/BottomNavigationItem.vue b/packages/varlet-vue2-ui/src/bottom-navigation-item/BottomNavigationItem.vue
new file mode 100644
index 00000000..2de5eacf
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation-item/BottomNavigationItem.vue
@@ -0,0 +1,116 @@
+<template>
+  <button
+    class="var-bottom-navigation-item"
+    ref="bottomNavigationItem"
+    v-ripple
+    :style="{
+      color: computeColorStyle(),
+    }"
+    @click="handleClick"
+  >
+    <var-icon
+      v-if="icon && !$slots.icon"
+      :name="icon"
+      :namespace="namespace"
+      class="var-bottom-navigation-item__icon"
+    />
+    <slot name="icon" :active="isActive"></slot>
+    <var-badge v-if="badge" v-bind="badgeProps" class="var-bottom-navigation-item__badge" />
+    <span class="var-bottom-navigation-item__label">
+      <template v-if="!$slots.default">
+        {{ label }}
+      </template>
+      <slot></slot>
+    </span>
+  </button>
+</template>
+
+<script>
+import Ripple from '../ripple'
+import VarBadge from '../badge'
+import VarIcon from '../icon'
+import { defineComponent } from '../utils/create'
+import { props } from './props'
+import { createChildrenMixin } from '../utils/mixins/relation'
+
+const defaultBadgeProps = {
+  type: 'danger',
+  dot: true,
+}
+
+export default defineComponent({
+  name: 'VarBottomNavigationItem',
+  components: {
+    VarBadge,
+    VarIcon,
+  },
+  directives: { Ripple },
+
+  mixins: [
+    createChildrenMixin('bottomNavigation', { parentKey: 'bottomNavigation', childrenKey: 'bottomNavigationItems' }),
+  ],
+
+  inheritAttrs: false,
+  props,
+
+  data: () => ({
+    isActive: false,
+    badgeProps: {},
+  }),
+
+  mounted() {
+    this.isActive = this.name === this.bottomNavigation.active || this.index === this.bottomNavigation.active
+
+    if (this.isActive) {
+      this.$refs.bottomNavigationItem.classList.add('var-bottom-navigation-item--active')
+    }
+  },
+
+  watch: {
+    badge: {
+      handler(newValue) {
+        this.badgeProps = newValue === true ? defaultBadgeProps : this.badge
+      },
+      immediate: true,
+    },
+  },
+
+  methods: {
+    computeColorStyle() {
+      const { activeColor, inactiveColor } = this.bottomNavigation
+
+      return this.isActive ? activeColor : inactiveColor
+    },
+    setCurrent(value) {
+      const _isActive = value === this.index || value === this.name
+
+      if (_isActive === this.isActive) {
+        return
+      }
+
+      this.isActive = _isActive
+
+      if (this.isActive) {
+        this.$refs.bottomNavigationItem.classList.add('var-bottom-navigation-item--active')
+      } else {
+        this.$refs.bottomNavigationItem.classList.remove('var-bottom-navigation-item--active')
+      }
+    },
+    handleClick() {
+      const { name, getListeners, index } = this
+      const active = name ?? index
+
+      getListeners().onClick?.(active)
+      this.bottomNavigation.onToggle(active)
+    },
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import '../ripple/ripple';
+@import '../badge/badge';
+@import '../icon/icon';
+@import './bottomNavigationItem';
+</style>
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation-item/bottomNavigationItem.less b/packages/varlet-vue2-ui/src/bottom-navigation-item/bottomNavigationItem.less
new file mode 100644
index 00000000..90db60d9
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation-item/bottomNavigationItem.less
@@ -0,0 +1,78 @@
+@bottom-navigation-item-font-size: var(--font-size-sm);
+@bottom-navigation-item-inactive-color: #646566;
+@bottom-navigation-item-active-color: var(--color-primary);
+@bottom-navigation-item-active-background-color: #fff;
+@bottom-navigation-item-line-height: 1;
+@bottom-navigation-item-icon-size: 22px;
+@bottom-navigation-item-icon-margin-bottom: 5px;
+
+:root {
+  --bottom-navigation-item-font-size: @bottom-navigation-item-font-size;
+  --bottom-navigation-item-inactive-color: @bottom-navigation-item-inactive-color;
+  --bottom-navigation-item-active-color: @bottom-navigation-item-active-color;
+  --bottom-navigation-item-active-background-color: @bottom-navigation-item-active-background-color;
+  --bottom-navigation-item-line-height: @bottom-navigation-item-line-height;
+  --bottom-navigation-item-icon-size: @bottom-navigation-item-icon-size;
+  --bottom-navigation-item-icon-margin-bottom: @bottom-navigation-item-icon-margin-bottom;
+}
+
+.var-bottom-navigation-item {
+  height: 100%;
+  padding: 6px 12px 8px;
+  position: relative;
+  display: inline-flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  line-height: var(--bottom-navigation-item-line-height);
+  color: var(--bottom-navigation-item-inactive-color);
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  appearance: none;
+  text-decoration: none;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  transition: color 250ms, margin 250ms;
+
+  &--active {
+    color: var(--bottom-navigation-item-active-color);
+    background-color: var(--bottom-navigation-item-active-background-color);
+    transition: background-color 250ms;
+
+    .var-bottom-navigation-item__label {
+      font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);
+    }
+  }
+
+  &--right-half-space {
+    margin-right: calc(var(--bottom-navigation-height) / 2);
+  }
+
+  &--left-half-space {
+    margin-left: calc(var(--bottom-navigation-height) / 2);
+  }
+
+  &--right-space {
+    margin-right: calc(var(--bottom-navigation-height) + var(--bottom-navigation-fab-offset));
+  }
+
+  &__icon {
+    font-size: var(--bottom-navigation-item-icon-size);
+  }
+
+  &__badge {
+    position: absolute;
+    left: 40px;
+    transform: translateY(-16px);
+  }
+
+  &__label {
+    margin-top: var(--bottom-navigation-item-icon-margin-bottom);
+    font-size: var(--bottom-navigation-item-font-size);
+    transition: font-size 0.2s ease 0.1s;
+    white-space: nowrap;
+  }
+}
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation-item/docs/zh-CN.md b/packages/varlet-vue2-ui/src/bottom-navigation-item/docs/zh-CN.md
new file mode 100644
index 00000000..eeb40c37
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation-item/docs/zh-CN.md
@@ -0,0 +1,24 @@
+## API
+
+### 属性
+
+|参数 | 说明 | 类型 | 默认值 |
+| ---- | ---- | ---- | ---- |
+| `name` | 标签名称，作为匹配的标识符 | _string_ | `-` |
+| `icon` | 图标名称，等同于 Icon 组件的 [name 属性](/#/zh-CN/icon) | _string_ | `-` |
+| `label` | 标签文字内容 | _string_ | - |
+| `namespace` | 图标的命名空间, 可扩展自定义图标库，等同于 Icon 组件的 [namespace 属性](/#/zh-CN/icon) | _string_ | `var-icon` |
+| `badge` | 图标右上角徽标 | _boolean \| BadgeProps_ | `false` |
+
+### 事件
+
+|事件名 | 说明 | 回调参数 |
+| ---- | ---- | ---- |
+| `click` | 点击时触发 | `active: number \| string` |
+
+### 插槽
+
+| 名称 | 说明 | 参数 |
+| ---- | ---- | ----|
+| `default` | 自定义标签文字内容，会覆盖 `label` 的内容  | `-` |
+| `icon` | 自定义图标 | `active: boolean` |
\ No newline at end of file
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation-item/index.ts b/packages/varlet-vue2-ui/src/bottom-navigation-item/index.ts
new file mode 100644
index 00000000..18e83057
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation-item/index.ts
@@ -0,0 +1,10 @@
+import type { VueConstructor } from 'vue'
+import BottomNavigationItem from './BottomNavigationItem.vue'
+
+BottomNavigationItem.install = function (app: VueConstructor) {
+  app.component(BottomNavigationItem.name, BottomNavigationItem)
+}
+
+export const _BottomNavigationItemComponent = BottomNavigationItem
+
+export default BottomNavigationItem
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation-item/props.ts b/packages/varlet-vue2-ui/src/bottom-navigation-item/props.ts
new file mode 100644
index 00000000..11a90601
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation-item/props.ts
@@ -0,0 +1,25 @@
+import type { PropType } from 'vue'
+import type { BadgeProps } from '../../types'
+
+export const props = {
+  name: {
+    type: String,
+  },
+  icon: {
+    type: String,
+  },
+  label: {
+    type: String,
+  },
+  namespace: {
+    type: String,
+    default: 'var-icon',
+  },
+  badge: {
+    type: [Boolean, Object] as PropType<boolean | Partial<BadgeProps>>,
+    default: false,
+  },
+  onClick: {
+    type: Function as PropType<(active: number | string) => void>,
+  },
+}
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation/BottomNavigation.vue b/packages/varlet-vue2-ui/src/bottom-navigation/BottomNavigation.vue
new file mode 100644
index 00000000..03fc1bcf
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation/BottomNavigation.vue
@@ -0,0 +1,178 @@
+<template>
+  <div
+    class="var-bottom-navigation"
+    :class="[fixed ? 'var-bottom-navigation--fixed' : null, border ? 'var-bottom-navigation--border' : null]"
+    ref="bottomNavigationDom"
+    :style="`z-index:${zIndex}`"
+  >
+    <slot></slot>
+
+    <var-button
+      v-if="$slots.fab"
+      class="var-bottom-navigation__fab"
+      :class="
+        bottomNavigationItems.length % 2 ? 'var-bottom-navigation--fab-right' : 'var-bottom-navigation--fab-center'
+      "
+      @click="handleFabClick"
+      v-bind="_fabProps"
+      round
+    >
+      <slot name="fab"></slot>
+    </var-button>
+  </div>
+</template>
+
+<script>
+import VarButton from '../button'
+import { defineComponent } from '../utils/create'
+import { props } from './props'
+import { isNumber } from '../utils/shared'
+import { createParentMixin } from '../utils/mixins/relation'
+import { doubleRaf } from '../utils/elements'
+
+const RIGHT_HALF_SPACE_CLASS = 'var-bottom-navigation-item--right-half-space'
+const LEFT_HALF_SPACE_CLASS = 'var-bottom-navigation-item--left-half-space'
+const RIGHT_SPACE_CLASS = 'var-bottom-navigation-item--right-space'
+const defaultFabProps = {
+  type: 'primary',
+}
+
+export default defineComponent({
+  name: 'VarBottomNavigation',
+  components: { VarButton },
+
+  mixins: [createParentMixin('bottomNavigation', { childrenKey: 'bottomNavigationItems' })],
+
+  inheritAttrs: false,
+
+  props,
+
+  data: () => ({
+    _fabProps: {},
+  }),
+
+  watch: {
+    async bottomNavigationItems() {
+      await doubleRaf()
+
+      this.matchBoundary()
+      this.removeMarginClass()
+
+      if (!this.$slots.fab) {
+        return
+      }
+      this.addMarginClass()
+    },
+    fabProps: {
+      handler(newValue) {
+        this._fabProps = { ...defaultFabProps, ...newValue }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+
+  methods: {
+    matchBoundary() {
+      if (this.bottomNavigationItems.length === 0 || this.matchName() || this.matchIndex()) {
+        return
+      }
+
+      this.handleActiveIndex()
+    },
+    matchName() {
+      return this.bottomNavigationItems.find(({ name }) => {
+        return this.active === name
+      })
+    },
+    matchIndex() {
+      return this.bottomNavigationItems.find(({ index }) => {
+        return this.active === index
+      })
+    },
+    handleActiveIndex() {
+      if (!isNumber(this.active)) {
+        return
+      }
+
+      const { getListeners } = this
+
+      if (this.active < 0) {
+        getListeners()['onUpdate:active']?.(0)
+        this.itemsSetCurrent(0)
+      } else if (this.active > this.bottomNavigationItems.length - 1) {
+        getListeners()['onUpdate:active']?.(this.bottomNavigationItems.length - 1)
+        this.itemsSetCurrent(this.bottomNavigationItems.length - 1)
+      }
+    },
+    itemsSetCurrent(value) {
+      this.bottomNavigationItems.forEach((item) => {
+        item.setCurrent(value)
+      })
+    },
+    onToggle(changedValue) {
+      if (changedValue === this.active) {
+        return
+      }
+      const { getListeners } = this
+
+      getListeners().onBeforeChange ? this.handleBeforeChange(changedValue) : this.handleChange(changedValue)
+    },
+    handleBeforeChange(changedValue) {
+      const { getListeners } = this
+      Promise.resolve(getListeners().onBeforeChange?.(changedValue)).then(
+        (res) => res && this.handleChange(changedValue)
+      )
+    },
+    handleChange(changedValue) {
+      const { getListeners } = this
+
+      getListeners()['onUpdate:active']?.(changedValue)
+
+      this.itemsSetCurrent(changedValue)
+
+      getListeners().onChange?.(changedValue)
+    },
+    getBottomNavigationItems() {
+      return Array.from(this.$refs.bottomNavigationDom.querySelectorAll('.var-bottom-navigation-item'))
+    },
+    removeMarginClass() {
+      this.getBottomNavigationItems().forEach((dom) => {
+        dom.classList.remove(RIGHT_HALF_SPACE_CLASS, LEFT_HALF_SPACE_CLASS, RIGHT_SPACE_CLASS)
+      })
+    },
+    addMarginClass() {
+      const isEven = this.bottomNavigationItems.length % 2 === 0
+
+      this.getBottomNavigationItems().forEach((bottomNavigationItem, i) => {
+        this.handleMarginClass(isEven, bottomNavigationItem, i, this.bottomNavigationItems.length)
+      })
+    },
+    handleMarginClass(isEven, dom, i, length) {
+      const isLast = i === length - 1
+      if (!isEven && isLast) {
+        dom.classList.add(RIGHT_SPACE_CLASS)
+        return
+      }
+
+      const isFabLeft = i === length / 2 - 1
+      const isFabRight = i === length / 2
+      if (isFabLeft) {
+        dom.classList.add(RIGHT_HALF_SPACE_CLASS)
+      } else if (isFabRight) {
+        dom.classList.add(LEFT_HALF_SPACE_CLASS)
+      }
+    },
+    handleFabClick() {
+      const { getListeners } = this
+      getListeners().onFabClick?.()
+    },
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import '../button/button';
+@import './bottomNavigation';
+</style>
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/bottom-navigation/__tests__/__snapshots__/index.spec.js.snap
new file mode 100644
index 00000000..1a17bd97
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation/__tests__/__snapshots__/index.spec.js.snap
@@ -0,0 +1,180 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`fab button 1`] = `
+"<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"> <button class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-home\\" style=\\"transition: transform 0ms;\\"></i>
+    <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-magnify\\" style=\\"transition: transform 0ms;\\"></i>
+    <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item var-bottom-navigation-item--right-space\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-heart\\" style=\\"transition: transform 0ms;\\"></i>
+    <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-button var--box var-bottom-navigation__fab var-button--normal var--inline-flex var-button--primary var-elevation--2 var-button--round var-bottom-navigation--fab-right\\">
+    <!---->
+    <div class=\\"var-button__content\\">
+      <div class=\\"tab_example\\"></div>
+    </div>
+  </button></div>"
+`;
+
+exports[`test BottomNavigation relation BottomNavigationItems 1`] = `
+"<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-home\\" style=\\"transition: transform 0ms;\\"></i>
+    <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-magnify\\" style=\\"transition: transform 0ms;\\"></i>
+    <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-heart\\" style=\\"transition: transform 0ms;\\"></i>
+    <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-account-circle\\" style=\\"transition: transform 0ms;\\"></i>
+    <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button>
+  <!---->
+</div>"
+`;
+
+exports[`test BottomNavigation relation BottomNavigationItems 2`] = `
+"<div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-home\\" style=\\"transition: transform 0ms;\\"></i>
+    <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-magnify\\" style=\\"transition: transform 0ms;\\"></i>
+    <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-heart\\" style=\\"transition: transform 0ms;\\"></i>
+    <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-account-circle\\" style=\\"transition: transform 0ms;\\"></i>
+    <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button>
+  <!---->
+</div>"
+`;
+
+exports[`test bottom-navigation example 1`] = `
+"<div class=\\"bottom-navigation-example\\">
+  <div class=\\"app-type\\">基本使用</div>
+  <div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-home\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-magnify\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-heart\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-account-circle\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button>
+    <!---->
+  </div>
+  <div class=\\"app-type\\">通过名称匹配</div>
+  <div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-home\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-magnify\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-heart\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-account-circle\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button>
+    <!---->
+  </div>
+  <div class=\\"app-type\\">徽标提示</div>
+  <div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-home\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-magnify\\" style=\\"transition: transform 0ms;\\"></i>
+      <div class=\\"var-badge var--box var-bottom-navigation-item__badge\\">
+        <transition-stub name=\\"var-badge-fade\\"><span class=\\"var-badge__content var-badge--danger var-badge__dot var-badge__dot--right\\"><span></span></span></transition-stub>
+      </div> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span>
+    </button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-heart\\" style=\\"transition: transform 0ms;\\"></i>
+      <div class=\\"var-badge var--box var-bottom-navigation-item__badge\\">
+        <transition-stub name=\\"var-badge-fade\\"><span class=\\"var-badge__content var-badge--primary\\"><span>66</span></span></transition-stub>
+      </div> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span>
+    </button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-account-circle\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button>
+    <!---->
+  </div>
+  <div class=\\"app-type\\">自定义颜色</div>
+  <div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-home\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-magnify\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-heart\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-account-circle\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button>
+    <!---->
+  </div>
+  <div class=\\"app-type\\">监听切换事件</div>
+  <div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-home\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-magnify\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-heart\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-account-circle\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button>
+    <!---->
+  </div>
+  <div class=\\"app-type\\">监听点击事件</div>
+  <div class=\\"var-bottom-navigation\\" style=\\"z-index: 1;\\"><button class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-home\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-magnify\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-heart\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-account-circle\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button>
+    <!---->
+  </div>
+  <div class=\\"app-type\\">悬浮按钮</div>
+  <div class=\\"var-bottom-navigation\\" style=\\"z-index: 1; margin-top: 10px;\\"> <button class=\\"var-bottom-navigation-item var-bottom-navigation-item--active\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-home\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-magnify\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-heart\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button> <button class=\\"var-bottom-navigation-item\\"><i class=\\"var-icon var-bottom-navigation-item__icon var-icon--set var-icon-bell\\" style=\\"transition: transform 0ms;\\"></i>
+      <!----> <span class=\\"var-bottom-navigation-item__label\\">
+      标签
+     </span></button>
+    <!----> <button class=\\"var-button var--box var-bottom-navigation__fab var-button--normal var--inline-flex var-button--primary var-elevation--2 var-button--round var-bottom-navigation--fab-center\\">
+      <!---->
+      <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-heart\\" style=\\"transition: transform 0ms;\\"></i></div>
+    </button></div>
+</div>"
+`;
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation/__tests__/index.spec.js b/packages/varlet-vue2-ui/src/bottom-navigation/__tests__/index.spec.js
new file mode 100644
index 00000000..74dd7914
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation/__tests__/index.spec.js
@@ -0,0 +1,234 @@
+import example from '../example'
+import BottomNavigation from '..'
+import BottomNavigationItem from '../../bottom-navigation-item'
+import VarBottomNavigation from '../BottomNavigation'
+import VarBottomNavigationItem from '../../bottom-navigation-item/BottomNavigationItem'
+import { mount } from '@vue/test-utils'
+import Vue from 'vue'
+import { delay } from '../../utils/jest'
+
+test('test bottom-navigation example', () => {
+  const wrapper = mount(example)
+
+  expect(wrapper.html()).toMatchSnapshot()
+
+  wrapper.destroy()
+})
+
+test('test bottom-navigation plugin', () => {
+  Vue.use(BottomNavigation).use(BottomNavigationItem)
+  expect(Vue.component(BottomNavigation.name)).toBeTruthy()
+})
+
+test('test bottom-navigation before-change prevent switch', async () => {
+  const onBeforeChange = jest.fn(() => false)
+  const Wrapper = {
+    components: {
+      [VarBottomNavigation.name]: VarBottomNavigation,
+      [VarBottomNavigationItem.name]: VarBottomNavigationItem,
+    },
+    props: ['onBeforeChange'],
+    data: () => ({
+      active: 0,
+    }),
+    template: `
+    <var-bottom-navigation :active.sync="active" @before-change="onBeforeChange">
+      <var-bottom-navigation-item label="标签" icon="home" />
+      <var-bottom-navigation-item label="标签" icon="magnify" />
+      <var-bottom-navigation-item label="标签" icon="heart" />
+      <var-bottom-navigation-item label="标签" icon="account-circle" />
+    </var-bottom-navigation>
+    `,
+  }
+  const wrapper = mount(Wrapper, {
+    propsData: {
+      onBeforeChange,
+    },
+  })
+  await delay(16)
+
+  const bottomNavigationItem = wrapper.findAll('.var-bottom-navigation-item').at(1)
+  await bottomNavigationItem.trigger('click')
+
+  expect(onBeforeChange).toHaveBeenCalledTimes(1)
+  expect(wrapper.vm.active).toBe(0)
+
+  wrapper.destroy()
+})
+
+test('test bottom-navigation before-change return promise', async () => {
+  const onBeforeChange = jest.fn(
+    () =>
+      new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(true)
+        }, 300)
+      })
+  )
+  const Wrapper = {
+    components: {
+      [VarBottomNavigation.name]: VarBottomNavigation,
+      [VarBottomNavigationItem.name]: VarBottomNavigationItem,
+    },
+    props: ['onBeforeChange'],
+    data: () => ({
+      active: 0,
+    }),
+    template: `
+    <var-bottom-navigation :active.sync="active" @before-change="onBeforeChange">
+      <var-bottom-navigation-item label="标签" icon="home" />
+      <var-bottom-navigation-item label="标签" icon="magnify" />
+      <var-bottom-navigation-item label="标签" icon="heart" />
+      <var-bottom-navigation-item label="标签" icon="account-circle" />
+    </var-bottom-navigation>
+    `,
+  }
+  const wrapper = mount(Wrapper, {
+    propsData: {
+      onBeforeChange,
+    },
+  })
+  await delay(16)
+
+  const bottomNavigationItem = wrapper.findAll('.var-bottom-navigation-item').at(1)
+  await bottomNavigationItem.trigger('click')
+  expect(wrapper.vm.active).toBe(0)
+
+  await delay(600)
+  expect(onBeforeChange).toHaveBeenCalledTimes(1)
+  expect(wrapper.vm.active).toBe(1)
+
+  wrapper.destroy()
+})
+
+test('test bottom-navigation change event', async () => {
+  let dummy
+  const handleChange = jest.fn((active) => {
+    dummy = active
+  })
+  const Wrapper = {
+    components: {
+      [VarBottomNavigation.name]: VarBottomNavigation,
+      [VarBottomNavigationItem.name]: VarBottomNavigationItem,
+    },
+    data: () => ({
+      active: 0,
+    }),
+    methods: {
+      handleChange,
+    },
+    template: `
+    <var-bottom-navigation :active.sync="active" @change="handleChange">
+      <var-bottom-navigation-item label="标签" icon="home" />
+      <var-bottom-navigation-item label="标签" icon="magnify" />
+      <var-bottom-navigation-item label="标签" icon="heart" />
+      <var-bottom-navigation-item label="标签" icon="account-circle" />
+    </var-bottom-navigation>
+    `,
+  }
+  const wrapper = mount(Wrapper)
+  await delay(16)
+
+  const bottomNavigationItem = wrapper.findAll('.var-bottom-navigation-item').at(1)
+  await bottomNavigationItem.trigger('click')
+
+  expect(handleChange).toHaveBeenCalledTimes(1)
+  expect(dummy).toBe(1)
+
+  wrapper.destroy()
+})
+
+test('test bottom-navigation-item click event', async () => {
+  let dummy
+  const handleClick = jest.fn((active) => {
+    dummy = active
+  })
+  const Wrapper = {
+    components: {
+      [VarBottomNavigation.name]: VarBottomNavigation,
+      [VarBottomNavigationItem.name]: VarBottomNavigationItem,
+    },
+    data: () => ({
+      active: 0,
+    }),
+    methods: {
+      handleClick,
+    },
+    template: `
+    <var-bottom-navigation :active.sync="active">
+      <var-bottom-navigation-item label="标签" icon="home" />
+      <var-bottom-navigation-item @click="handleClick" label="标签" icon="magnify" />
+      <var-bottom-navigation-item label="标签" icon="heart" />
+      <var-bottom-navigation-item label="标签" icon="account-circle" />
+    </var-bottom-navigation>
+    `,
+  }
+  const wrapper = mount(Wrapper)
+  await delay(16)
+
+  const bottomNavigationItem = wrapper.findAll('.var-bottom-navigation-item').at(1)
+  await bottomNavigationItem.trigger('click')
+
+  expect(handleClick).toHaveBeenCalledTimes(1)
+  expect(dummy).toBe(1)
+
+  wrapper.destroy()
+})
+
+test('test BottomNavigation relation BottomNavigationItems', async () => {
+  const Wrapper = {
+    components: {
+      [VarBottomNavigation.name]: VarBottomNavigation,
+      [VarBottomNavigationItem.name]: VarBottomNavigationItem,
+    },
+    data: () => ({
+      active: 0,
+    }),
+    template: `
+    <var-bottom-navigation :active.sync="active">
+      <var-bottom-navigation-item label="标签" icon="home" />
+      <var-bottom-navigation-item label="标签" icon="magnify" />
+      <var-bottom-navigation-item label="标签" icon="heart" />
+      <var-bottom-navigation-item label="标签" icon="account-circle" />
+    </var-bottom-navigation>
+    `,
+  }
+  const wrapper = mount(Wrapper)
+  await delay(100)
+
+  expect(wrapper.html()).toMatchSnapshot()
+  await wrapper.setData({ active: 1 })
+
+  await delay(50)
+  expect(wrapper.html()).toMatchSnapshot()
+
+  wrapper.destroy()
+})
+
+test('fab button', async () => {
+  const Wrapper = {
+    components: {
+      [VarBottomNavigation.name]: VarBottomNavigation,
+      [VarBottomNavigationItem.name]: VarBottomNavigationItem,
+    },
+    data: () => ({
+      active: 0,
+    }),
+    template: `
+    <var-bottom-navigation :active.sync="active">
+      <template #fab>
+        <div class="tab_example" />
+      </template>
+      <var-bottom-navigation-item label="标签" icon="home" />
+      <var-bottom-navigation-item label="标签" icon="magnify" />
+      <var-bottom-navigation-item label="标签" icon="heart" />
+    </var-bottom-navigation>
+    `,
+  }
+  const wrapper = mount(Wrapper)
+  await delay(100)
+
+  expect(wrapper.html()).toMatchSnapshot()
+
+  wrapper.destroy()
+})
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation/bottomNavigation.less b/packages/varlet-vue2-ui/src/bottom-navigation/bottomNavigation.less
new file mode 100644
index 00000000..e0de9639
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation/bottomNavigation.less
@@ -0,0 +1,51 @@
+@bottom-navigation-height: 50px;
+@bottom-navigation-z-index: 1;
+@bottom-navigation-background-color: #fff;
+@bottom-navigation-border-color: #e3e3e3;
+@bottom-navigation-fab-offset: 4px;
+
+:root {
+  --bottom-navigation-height: @bottom-navigation-height;
+  --bottom-navigation-z-index: @bottom-navigation-z-index;
+  --bottom-navigation-background-color: @bottom-navigation-background-color;
+  --bottom-navigation-border-color: @bottom-navigation-border-color;
+  --bottom-navigation-fab-offset: @bottom-navigation-fab-offset;
+}
+
+.var-bottom-navigation {
+  width: 100%;
+  height: var(--bottom-navigation-height);
+  display: flex;
+  position: relative;
+  background-color: var(--bottom-navigation-background-color);
+  transition: background-color 250ms, border-color 250ms;
+  -webkit-tap-highlight-color: transparent;
+
+  &--fixed {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+  }
+
+  &--border {
+    border-top: 1px solid var(--bottom-navigation-border-color);
+  }
+
+  &__fab {
+    width: var(--bottom-navigation-height);
+    height: var(--bottom-navigation-height) !important;
+    position: absolute !important;
+    z-index: 2;
+    transform: translateY(-50%);
+    overflow: hidden;
+    transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  }
+
+  &--fab-center {
+    right: calc(50% - var(--bottom-navigation-height) / 2);
+  }
+
+  &--fab-right {
+    right: var(--bottom-navigation-fab-offset);
+  }
+}
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation/docs/en-US.md b/packages/varlet-vue2-ui/src/bottom-navigation/docs/en-US.md
new file mode 100644
index 00000000..6283cf0a
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation/docs/en-US.md
@@ -0,0 +1,258 @@
+# BottomNavigation
+
+### Install
+
+```js
+import Vue from 'vue'
+import { BottomNavigation, BottomNavigationItem } from '@varlet-vue2/ui'
+
+Vue.use(BottomNavigation).use(BottomNavigationItem)
+```
+
+### Basic Usage
+
+```html
+<var-bottom-navigation v-model:active="active">
+  <var-bottom-navigation-item label="label" icon="home" />
+  <var-bottom-navigation-item label="label" icon="magnify" />
+  <var-bottom-navigation-item label="label" icon="heart" />
+  <var-bottom-navigation-item label="label" icon="account-circle" />
+</var-bottom-navigation>
+```
+
+```js
+export default {
+  data: () => ({
+    active: 0
+  })
+}
+```
+
+### Match by name
+
+```html
+<var-bottom-navigation v-model:active="active">
+  <var-bottom-navigation-item name="home" label="label" icon="home" />
+  <var-bottom-navigation-item name="search" label="label" icon="magnify" />
+  <var-bottom-navigation-item name="heart" label="label" icon="heart" />
+  <var-bottom-navigation-item name="user" label="label" icon="account-circle" />
+</var-bottom-navigation>
+```
+
+```js
+export default {
+  data: () => ({
+    active: 0
+  })
+}
+```
+
+### Show Badge
+
+```html
+<var-bottom-navigation v-model:active="active">
+  <var-bottom-navigation-item label="label" icon="home" />
+  <var-bottom-navigation-item label="label" icon="magnify" badge />
+  <var-bottom-navigation-item label="label" icon="heart" :badge="badgeProps" />
+  <var-bottom-navigation-item label="label" icon="account-circle" />
+</var-bottom-navigation>
+```
+
+```js
+export default {
+  data: () => ({
+    active: 0,
+    badgeProps: {
+      type: 'primary',
+      value: '66'
+    }
+  })
+}
+```
+
+### Custom Color
+
+```html
+<var-bottom-navigation active-color="#ba68c8" v-model:active="active">
+  <var-bottom-navigation-item label="label" icon="home" />
+  <var-bottom-navigation-item label="label" icon="magnify" />
+  <var-bottom-navigation-item label="label" icon="heart" />
+  <var-bottom-navigation-item label="label" icon="account-circle" />
+</var-bottom-navigation>
+```
+
+```js
+export default {
+  data: () => ({
+    active: 0
+  })
+}
+```
+
+### Change Event
+
+```html
+<var-bottom-navigation v-model:active="active" @change="handleChange">
+  <var-bottom-navigation-item label="label" icon="home" />
+  <var-bottom-navigation-item label="label" icon="magnify" />
+  <var-bottom-navigation-item label="label" icon="heart" />
+  <var-bottom-navigation-item label="label" icon="account-circle" />
+</var-bottom-navigation>
+```
+
+```js
+import { Snackbar } from '@varlet-vue2/ui'
+
+export default {
+  data: () => ({
+    active: 0
+  }),
+  methods: {
+    handleChange(active) => {
+      Snackbar.info(`changed to ${active}`)
+    }
+  }
+}
+```
+
+### Click Event
+
+```html
+<var-bottom-navigation v-model:active="active">
+  <var-bottom-navigation-item @click="handleClick" label="label" icon="home" />
+  <var-bottom-navigation-item @click="handleClick" label="label" icon="magnify" />
+  <var-bottom-navigation-item @click="handleClick" label="label" icon="heart" />
+  <var-bottom-navigation-item @click="handleClick" label="label" icon="account-circle" />
+</var-bottom-navigation>
+```
+
+```js
+import { Snackbar } from '@varlet-vue2/ui'
+
+export default {
+  data: () => ({
+    active: 0
+  }),
+  methods: {
+    handleClick(active) => {
+      Snackbar.info(`clicked ${active}`)
+    }
+  }
+}
+```
+
+### Fab
+
+```html
+<var-bottom-navigation
+  class="bottom-navigation-example"
+  v-model:active="active"
+  @fab-click="isEven = !isEven"
+>
+  <template #fab>
+    <var-icon name="heart" />
+  </template>
+  <var-bottom-navigation-item label="label" icon="home" />
+  <var-bottom-navigation-item label="label" icon="magnify" />
+  <var-bottom-navigation-item label="label" icon="heart" />
+  <var-bottom-navigation-item label="label" icon="bell" />
+  <var-bottom-navigation-item v-if="!isEven" label="label" icon="account-circle" />
+</var-bottom-navigation>
+```
+
+```js
+export default {
+  data: () => ({
+    active: 0,
+    isEven: true
+  })
+}
+```
+
+```css
+.bottom-navigation-example {
+  margin-top: 40px;
+}
+```
+
+
+## API
+
+### Props
+
+#### BottomNavigation Props
+
+| Prop            | Description                                         | Type | Default |
+|-----------------|-----------------------------------------------------| ---- | ---- |
+| `active.sync` | Identifier of current tab                           | _number \| string_ | `0` |
+| `fixed`         | 	Whether to fixed bottom                            | _boolean_ | `false` |
+| `border`        | Whether to show border                              | _boolean_ | `false` |
+| `z-index`       | Z-index                                             | _number \| string_ | `1` |
+| `active-color`  | Color of active tab item                            | _string_ | `-` |
+| `inactive-color` | Color of inactive tab item                          | _string_ | `-` |
+| `fab-props`     | Fab button props                                    | _ButtonProps_ | `{type: "primary"}` |
+
+#### BottomNavigationItem Props
+
+|Prop | Description | Type | Default |
+| ---- | ---- | ---- | ---- |
+| `name` | Identifier | _string_ | `-` |
+| `icon` | Icon name, equivalent to the [name](/#/en-US/icon) of Icon component | _string_ | `-` |
+| `label` | Label text content | _string_ | - |
+| `namespace` | Icon namespace, extensible custom icon library, equivalent to the [namespace](/#/en-US/icon)  of Icon component | _string_ | `var-icon` |
+| `badge` | Logo in the upper right corner of the icon | _boolean \| BadgeProps_ | `false` |
+
+### Events
+
+#### BottomNavigation Events
+
+|Event | Description | Arguments |
+| ---- | ---- | ---- |
+| `before-change` | The callback function before switching labels, which returns false to prevent switching, supports the return of promise | `active: number \| string` |
+| `change` | Triggered when switching labels | `active: number \| string` |
+| `fab-click` | Triggered when fab button click | `-` |
+
+#### BottomNavigationItem Events
+
+|Event | Description | Arguments |
+| ---- | ---- | ---- |
+| `click` | Trigger on click | `active: number \| string` |
+
+### Slots
+
+#### BottomNavigation Slots
+
+| Slot | Description | Arguments |
+| ---- | ---- | ----|
+| `fab` | Support for inserting a custom Fab button into a component | `-` |
+#### BottomNavigationItem Slots
+
+| Slot | Description | Arguments |
+| ---- | ---- | ----|
+| `default` | Custom label text content that overwrites the content of `label`  | `-` |
+| `icon` | Custom Icon | `active: boolean` |
+
+### Style Variables
+Here are the CSS variables used by the component, Styles can be customized using [StyleProvider](#/en-US/style-provider)
+
+#### BottomNavigation Variables
+
+| Variable | Default |
+| --- | --- |
+| `--bottom-navigation-height` | `50px` |
+| `--bottom-navigation-z-index` | `1` |
+| `--bottom-navigation-background-color` | `#fff` |
+| `--bottom-navigation-border-color` | `#bcc2cb` |
+| `--bottom-navigation-fab-offset` | `4px` |
+
+#### BottomNavigationItem Variables
+
+| Variable | Default |
+| --- | --- |
+| `--bottom-navigation-item-font-size` | `var(--font-size-sm)` |
+| `--bottom-navigation-item-inactive-color` | `#646566` |
+| `--bottom-navigation-item-active-color` | `var(--color-primary)` |
+| `--bottom-navigation-item-active-background-color` | `#fff` |
+| `--bottom-navigation-item-line-height` | `1` |
+| `--bottom-navigation-item-icon-size` | `22px` |
+| `--bottom-navigation-item-icon-margin-bottom` | `5px` |
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation/docs/zh-CN.md b/packages/varlet-vue2-ui/src/bottom-navigation/docs/zh-CN.md
new file mode 100644
index 00000000..56a4837a
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation/docs/zh-CN.md
@@ -0,0 +1,247 @@
+# 底部导航栏
+
+### 基础用法
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const active = ref(0)
+</script>
+
+<template>
+  <var-bottom-navigation v-model:active="active">
+    <var-bottom-navigation-item label="标签" icon="home" />
+    <var-bottom-navigation-item label="标签" icon="magnify" />
+    <var-bottom-navigation-item label="标签" icon="heart" />
+    <var-bottom-navigation-item label="标签" icon="account-circle" />
+  </var-bottom-navigation>
+</template>
+```
+
+### 名称匹配
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const active = ref('home')
+</script>
+
+<template>
+  <var-bottom-navigation v-model:active="active">
+    <var-bottom-navigation-item name="home" label="标签" icon="home" />
+    <var-bottom-navigation-item name="search" label="标签" icon="magnify" />
+    <var-bottom-navigation-item name="heart" label="标签" icon="heart" />
+    <var-bottom-navigation-item name="user" label="标签" icon="account-circle" />
+  </var-bottom-navigation>
+</template>
+```
+
+### 徽标提示
+
+```html
+<script setup>
+import { ref, reactive } from 'vue'
+
+const active = ref(0)
+const badgeProps = reactive({
+  type: 'primary',
+  value: '66'
+})
+</script>
+
+<template>
+  <var-bottom-navigation v-model:active="active">
+    <var-bottom-navigation-item label="标签" icon="home" />
+    <var-bottom-navigation-item label="标签" icon="magnify" badge />
+    <var-bottom-navigation-item label="标签" icon="heart" :badge="badgeProps" />
+    <var-bottom-navigation-item label="标签" icon="account-circle" />
+  </var-bottom-navigation>
+</template>
+```
+
+### 自定义颜色
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const active = ref(0)
+</script>
+
+<template>
+  <var-bottom-navigation active-color="#ba68c8" v-model:active="active">
+    <var-bottom-navigation-item label="标签" icon="home" />
+    <var-bottom-navigation-item label="标签" icon="magnify" />
+    <var-bottom-navigation-item label="标签" icon="heart" />
+    <var-bottom-navigation-item label="标签" icon="account-circle" />
+  </var-bottom-navigation>
+</template>
+```
+
+### 监听切换事件
+
+```html
+<script setup>
+import { ref } from 'vue'
+import { Snackbar } from '@varlet/ui'
+
+const active = ref(0)
+const handleChange = (active) => {
+  Snackbar.info(`changed to ${active}`)
+}
+</script>
+
+<template>
+  <var-bottom-navigation v-model:active="active" @change="handleChange">
+    <var-bottom-navigation-item label="标签" icon="home" />
+    <var-bottom-navigation-item label="标签" icon="magnify" />
+    <var-bottom-navigation-item label="标签" icon="heart" />
+    <var-bottom-navigation-item label="标签" icon="account-circle" />
+  </var-bottom-navigation>
+</template>
+```
+
+### 监听点击事件
+
+```html
+<script setup>
+import { ref } from 'vue'
+import { Snackbar } from '@varlet/ui'
+
+const active = ref(0)
+const handleClick = (active) => {
+  Snackbar.success(`clicked ${active}`)
+}
+</script>
+
+<template>
+  <var-bottom-navigation v-model:active="active">
+    <var-bottom-navigation-item @click="handleClick" label="标签" icon="home" />
+    <var-bottom-navigation-item @click="handleClick" label="标签" icon="magnify" />
+    <var-bottom-navigation-item @click="handleClick" label="标签" icon="heart" />
+    <var-bottom-navigation-item @click="handleClick" label="标签" icon="account-circle" />
+  </var-bottom-navigation>
+</template>
+```
+
+### 悬浮按钮
+
+Item 数量为偶数时，悬浮按钮在中间位置，为奇数时在最右侧。
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const active = ref(0)
+const isEven = ref(true)
+</script>
+
+<template>
+  <var-bottom-navigation
+    class="bottom-navigation-example"
+    v-model:active="active"
+    @fab-click="isEven = !isEven"
+  >
+    <template #fab>
+      <var-icon name="heart" />
+    </template>
+    <var-bottom-navigation-item label="标签" icon="home" />
+    <var-bottom-navigation-item label="标签" icon="magnify" />
+    <var-bottom-navigation-item label="标签" icon="heart" />
+    <var-bottom-navigation-item label="标签" icon="bell" />
+    <var-bottom-navigation-item v-if="!isEven" label="标签" icon="account-circle" />
+  </var-bottom-navigation>
+</template>
+
+<style>
+.bottom-navigation-example {
+  margin-top: 40px;
+}
+</style>
+```
+
+## API
+
+### 属性
+
+#### BottomNavigation Props
+
+| 参数               | 说明              | 类型 | 默认值 |
+|------------------|-----------------| ---- | ---- |
+| `active.sync` | 选中标签的名称或者索引值    | _number \| string_ | `0` |
+| `fixed`          | 是否固定在底部         | _boolean_ | `false` |
+| `border`         | 是否显示外边框         | _boolean_ | `false` |
+| `z-index`        | 元素 z-index      | _number \| string_ | `1` |
+| `active-color`   | 选中标签的颜色         | _string_ | `-` |
+| `inactive-color` | 未选中标签的颜色        | _string_ | `-` |
+| `fab-props`      | 悬浮按钮属性          | _ButtonProps_ | `{type: "primary"}` |
+
+
+#### BottomNavigationItem Props
+
+|参数 | 说明 | 类型 | 默认值 |
+| ---- | ---- | ---- | ---- |
+| `name` | 标签名称，作为匹配的标识符 | _string_ | `-` |
+| `icon` | 图标名称，等同于 Icon 组件的 [name](/#/zh-CN/icon) | _string_ | `-` |
+| `label` | 标签文字内容 | _string_ | - |
+| `namespace` | 图标的命名空间, 可扩展自定义图标库，等同于 Icon 组件的 [namespace](/#/zh-CN/icon) | _string_ | `var-icon` |
+| `badge` | 图标右上角徽标 | _boolean \| BadgeProps_ | `false` |
+
+
+### 事件
+
+#### BottomNavigation Events
+
+|事件名 | 说明 | 回调参数 |
+| ---- | ---- | ---- |
+| `before-change` | 切换标签前的回调函数，返回 false 可阻止切换，支持返回 Promise | `active: number \| string` |
+| `change` | 切换标签时触发 | `active: number \| string` |
+| `fab-click` | 悬浮按钮点击时触发 | `-` |
+
+#### BottomNavigationItem Events
+
+|事件名 | 说明 | 回调参数 |
+| ---- | ---- | ---- |
+| `click` | 点击时触发 | `active: number \| string` |
+
+### 插槽
+
+#### BottomNavigation Slots
+
+| 名称 | 说明 | 参数 |
+| ---- | ---- | ----|
+| `fab` | 支持在组件中插入一个自定义的 fab 按钮 | `-` |
+
+#### BottomNavigationItem Slots
+
+| 名称 | 说明 | 参数 |
+| ---- | ---- | ----|
+| `default` | 自定义标签文字内容，会覆盖 `label` 的内容  | `-` |
+| `icon` | 自定义图标 | `active: boolean` |
+
+### 样式变量
+以下为组件使用的 css 变量，可以使用 [StyleProvider 组件](#/zh-CN/style-provider) 进行样式定制
+
+#### BottomNavigation Variables
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `--bottom-navigation-height` | `50px` |
+| `--bottom-navigation-z-index` | `1` |
+| `--bottom-navigation-background-color` | `#fff` |
+| `--bottom-navigation-border-color` | `#bcc2cb` |
+| `--bottom-navigation-fab-offset` | `4px` |
+
+#### BottomNavigationItem Variables
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `--bottom-navigation-item-font-size` | `var(--font-size-sm)` |
+| `--bottom-navigation-item-inactive-color` | `#646566` |
+| `--bottom-navigation-item-active-color` | `var(--color-primary)` |
+| `--bottom-navigation-item-active-background-color` | `#fff` |
+| `--bottom-navigation-item-line-height` | `1` |
+| `--bottom-navigation-item-icon-size` | `22px` |
+| `--bottom-navigation-item-icon-margin-bottom` | `5px` |
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation/example/index.vue b/packages/varlet-vue2-ui/src/bottom-navigation/example/index.vue
new file mode 100644
index 00000000..cedc2416
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation/example/index.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="bottom-navigation-example">
+    <app-type>{{ pack.basicUsage }}</app-type>
+    <var-bottom-navigation :active.sync="basicUsage">
+      <var-bottom-navigation-item :label="pack.label" icon="home" />
+      <var-bottom-navigation-item :label="pack.label" icon="magnify" />
+      <var-bottom-navigation-item :label="pack.label" icon="heart" />
+      <var-bottom-navigation-item :label="pack.label" icon="account-circle" />
+    </var-bottom-navigation>
+
+    <app-type>{{ pack.matchByName }}</app-type>
+    <var-bottom-navigation :active.sync="matchByName">
+      <var-bottom-navigation-item name="home" :label="pack.label" icon="home" />
+      <var-bottom-navigation-item name="search" :label="pack.label" icon="magnify" />
+      <var-bottom-navigation-item name="heart" :label="pack.label" icon="heart" />
+      <var-bottom-navigation-item name="user" :label="pack.label" icon="account-circle" />
+    </var-bottom-navigation>
+
+    <app-type>{{ pack.showBadge }}</app-type>
+    <var-bottom-navigation :active.sync="showBadge">
+      <var-bottom-navigation-item :label="pack.label" icon="home" />
+      <var-bottom-navigation-item :label="pack.label" icon="magnify" badge />
+      <var-bottom-navigation-item :label="pack.label" icon="heart" :badge="badgeProps" />
+      <var-bottom-navigation-item :label="pack.label" icon="account-circle" />
+    </var-bottom-navigation>
+
+    <app-type>{{ pack.customColor }}</app-type>
+    <var-bottom-navigation active-color="#ba68c8" :active.sync="customColor">
+      <var-bottom-navigation-item :label="pack.label" icon="home" />
+      <var-bottom-navigation-item :label="pack.label" icon="magnify" />
+      <var-bottom-navigation-item :label="pack.label" icon="heart" />
+      <var-bottom-navigation-item :label="pack.label" icon="account-circle" />
+    </var-bottom-navigation>
+
+    <app-type>{{ pack.changeEvent }}</app-type>
+    <var-bottom-navigation :active.sync="changeEvent" @change="handleChange">
+      <var-bottom-navigation-item :label="pack.label" icon="home" />
+      <var-bottom-navigation-item :label="pack.label" icon="magnify" />
+      <var-bottom-navigation-item :label="pack.label" icon="heart" />
+      <var-bottom-navigation-item :label="pack.label" icon="account-circle" />
+    </var-bottom-navigation>
+
+    <app-type>{{ pack.clickEvent }}</app-type>
+    <var-bottom-navigation :active.sync="clickEvent">
+      <var-bottom-navigation-item @click="handleClick" :label="pack.label" icon="home" />
+      <var-bottom-navigation-item @click="handleClick" :label="pack.label" icon="magnify" />
+      <var-bottom-navigation-item @click="handleClick" :label="pack.label" icon="heart" />
+      <var-bottom-navigation-item @click="handleClick" :label="pack.label" icon="account-circle" />
+    </var-bottom-navigation>
+
+    <app-type>{{ pack.fab }}</app-type>
+    <var-bottom-navigation :active.sync="fab" @fab-click="isEven = !isEven" style="margin-top: 10px">
+      <template v-slot:fab>
+        <var-icon name="heart" />
+      </template>
+      <var-bottom-navigation-item :label="pack.label" icon="home" />
+      <var-bottom-navigation-item :label="pack.label" icon="magnify" />
+      <var-bottom-navigation-item :label="pack.label" icon="heart" />
+      <var-bottom-navigation-item :label="pack.label" icon="bell" />
+      <var-bottom-navigation-item v-if="!isEven" :label="pack.label" icon="account-circle" />
+    </var-bottom-navigation>
+  </div>
+</template>
+
+<script>
+import AppType from '@varlet-vue2/cli/site/mobile/components/AppType'
+import VarBottomNavigation from '..'
+import VarBottomNavigationItem from '../../bottom-navigation-item'
+import VarIcon from '../../icon'
+import Snackbar from '../../snackbar'
+import dark from '../../themes/dark'
+import { use, pack } from './locale'
+import { watchLang, watchDarkMode } from '@varlet-vue2/cli/site/utils'
+
+export default {
+  name: 'BottomNavigationExample',
+
+  components: {
+    VarBottomNavigation,
+    VarBottomNavigationItem,
+    VarIcon,
+    AppType,
+  },
+
+  data: () => ({
+    basicUsage: 0,
+    matchByName: 'home',
+    showBadge: 0,
+    badgeProps: {
+      type: 'primary',
+      value: '66',
+    },
+    customColor: 0,
+    changeEvent: 0,
+    clickEvent: 0,
+    fab: 0,
+    isEven: true,
+  }),
+
+  computed: {
+    pack() {
+      return pack.value
+    },
+  },
+
+  created() {
+    watchLang(this, use)
+    watchDarkMode(this, dark)
+  },
+
+  methods: {
+    handleChange(active) {
+      Snackbar.info(`changed to ${active}`)
+    },
+    handleClick(active) {
+      Snackbar.success(`clicked ${active}`)
+    },
+  },
+}
+</script>
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation/example/locale/en-US.ts b/packages/varlet-vue2-ui/src/bottom-navigation/example/locale/en-US.ts
new file mode 100644
index 00000000..4b0f1456
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation/example/locale/en-US.ts
@@ -0,0 +1,10 @@
+export default {
+  basicUsage: 'Basic Usage',
+  matchByName: 'Match by name',
+  showBadge: 'Show Badge',
+  customColor: 'Custom Color',
+  changeEvent: 'Change Event',
+  clickEvent: 'Click Event',
+  fab: 'Fab',
+  label: 'label',
+}
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation/example/locale/index.ts b/packages/varlet-vue2-ui/src/bottom-navigation/example/locale/index.ts
new file mode 100644
index 00000000..d2e375e6
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation/example/locale/index.ts
@@ -0,0 +1,23 @@
+// lib
+import _zhCN from '../../../locale/zh-CN'
+import _enCN from '../../../locale/en-US'
+// mobile example doc
+import zhCN from './zh-CN'
+import enUS from './en-US'
+import { useLocale, add as _add, use as _use } from '../../../locale'
+
+const { add, use: exampleUse, pack, packs, merge } = useLocale()
+
+const use = (lang: string) => {
+  _use(lang)
+  exampleUse(lang)
+}
+
+export { add, pack, packs, merge, use }
+
+// lib
+_add('zh-CN', _zhCN)
+_add('en-US', _enCN)
+// mobile example doc
+add('zh-CN', zhCN as any)
+add('en-US', enUS as any)
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation/example/locale/zh-CN.ts b/packages/varlet-vue2-ui/src/bottom-navigation/example/locale/zh-CN.ts
new file mode 100644
index 00000000..14a87146
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation/example/locale/zh-CN.ts
@@ -0,0 +1,10 @@
+export default {
+  basicUsage: '基本使用',
+  matchByName: '通过名称匹配',
+  showBadge: '徽标提示',
+  customColor: '自定义颜色',
+  changeEvent: '监听切换事件',
+  clickEvent: '监听点击事件',
+  fab: '悬浮按钮',
+  label: '标签',
+}
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation/index.ts b/packages/varlet-vue2-ui/src/bottom-navigation/index.ts
new file mode 100644
index 00000000..f4a1735e
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation/index.ts
@@ -0,0 +1,10 @@
+import type { VueConstructor } from 'vue'
+import BottomNavigation from './BottomNavigation.vue'
+
+BottomNavigation.install = function (app: VueConstructor) {
+  app.component(BottomNavigation.name, BottomNavigation)
+}
+
+export const _BottomNavigationComponent = BottomNavigation
+
+export default BottomNavigation
diff --git a/packages/varlet-vue2-ui/src/bottom-navigation/props.ts b/packages/varlet-vue2-ui/src/bottom-navigation/props.ts
new file mode 100644
index 00000000..80c1e52c
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/bottom-navigation/props.ts
@@ -0,0 +1,39 @@
+import type { PropType } from 'vue'
+import type { ButtonProps } from '../../types'
+
+export const props = {
+  active: {
+    type: [Number, String] as PropType<number | string>,
+    default: 0,
+  },
+  fixed: {
+    type: Boolean,
+    default: false,
+  },
+  border: {
+    type: Boolean,
+    default: false,
+  },
+  zIndex: {
+    type: [Number, String] as PropType<number | string>,
+    default: 1,
+  },
+  activeColor: {
+    type: String,
+  },
+  inactiveColor: {
+    type: String,
+  },
+  onChange: {
+    type: Function as PropType<(active: number | string) => void>,
+  },
+  onBeforeChange: {
+    type: Function as PropType<(active: number | string) => boolean | Promise<any>>,
+  },
+  onFabClick: {
+    type: Function as PropType<() => void>,
+  },
+  fabProps: {
+    type: Object as PropType<Partial<ButtonProps>>,
+  },
+}
diff --git a/packages/varlet-vue2-ui/src/context/index.ts b/packages/varlet-vue2-ui/src/context/index.ts
index 9335241c..ca78e656 100644
--- a/packages/varlet-vue2-ui/src/context/index.ts
+++ b/packages/varlet-vue2-ui/src/context/index.ts
@@ -1,9 +1,9 @@
 import Vue from 'vue'
 
 interface Context {
-  locks: Record<any, number>;
-  zIndex: number;
-  touchmoveForbid: boolean;
+  locks: Record<any, number>
+  zIndex: number
+  touchmoveForbid: boolean
 }
 
 const context: Context = {
diff --git a/packages/varlet-vue2-ui/src/countdown/props.ts b/packages/varlet-vue2-ui/src/countdown/props.ts
index 73c586ef..98501634 100644
--- a/packages/varlet-vue2-ui/src/countdown/props.ts
+++ b/packages/varlet-vue2-ui/src/countdown/props.ts
@@ -1,9 +1,9 @@
 export type TimeData = {
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
-  milliseconds: number;
+  days: number
+  hours: number
+  minutes: number
+  seconds: number
+  milliseconds: number
 }
 
 export const props = {
diff --git a/packages/varlet-vue2-ui/src/lazy/index.ts b/packages/varlet-vue2-ui/src/lazy/index.ts
index f3d309b8..46124660 100644
--- a/packages/varlet-vue2-ui/src/lazy/index.ts
+++ b/packages/varlet-vue2-ui/src/lazy/index.ts
@@ -5,27 +5,27 @@ import type { DirectiveBinding } from 'vue/types/options'
 import type { CacheInstance } from '../utils/shared'
 
 interface LazyOptions {
-  loading?: string;
-  error?: string;
-  attempt?: number;
-  throttleWait?: number;
-  filter?: (lazy: Lazy) => void;
-  events?: string[];
+  loading?: string
+  error?: string
+  attempt?: number
+  throttleWait?: number
+  filter?: (lazy: Lazy) => void
+  events?: string[]
 }
 
 type LazyState = 'pending' | 'success' | 'error'
 
 type Lazy = LazyOptions & {
-  src: string;
-  arg: string | undefined;
-  currentAttempt: number;
-  attemptLock: boolean;
-  state: LazyState;
-  preloadImage?: HTMLImageElement;
+  src: string
+  arg: string | undefined
+  currentAttempt: number
+  attemptLock: boolean
+  state: LazyState
+  preloadImage?: HTMLImageElement
 }
 
 export interface LazyHTMLElement extends HTMLElement {
-  _lazy?: Lazy;
+  _lazy?: Lazy
 }
 type ListenTarget = Window | HTMLElement
 
diff --git a/packages/varlet-vue2-ui/src/locale/index.ts b/packages/varlet-vue2-ui/src/locale/index.ts
index 4bdb78ef..f11604eb 100644
--- a/packages/varlet-vue2-ui/src/locale/index.ts
+++ b/packages/varlet-vue2-ui/src/locale/index.ts
@@ -3,29 +3,29 @@ import zhCN from './zh-CN'
 
 export type Pack = {
   // Dialog
-  dialogTitle: string;
-  dialogConfirmButtonText: string;
-  dialogCancelButtonText: string;
+  dialogTitle: string
+  dialogConfirmButtonText: string
+  dialogCancelButtonText: string
   // ActionSheet
-  actionSheetTitle: string;
+  actionSheetTitle: string
   // List
-  listLoadingText: string;
-  listFinishedText: string;
-  listErrorText: string;
+  listLoadingText: string
+  listFinishedText: string
+  listErrorText: string
   // Picker
-  pickerTitle: string;
-  pickerConfirmButtonText: string;
-  pickerCancelButtonText: string;
+  pickerTitle: string
+  pickerConfirmButtonText: string
+  pickerCancelButtonText: string
   // date-picker
   // datePickerMonthDict: Record<Month, { name: string; abbr: string }>
   // datePickerWeekDict: Record<Week, { name: string; abbr: string }>
-  datePickerSelected: string;
+  datePickerSelected: string
   // pagination
-  paginationItem: string;
-  paginationPage: string;
-  paginationJump: string;
+  paginationItem: string
+  paginationPage: string
+  paginationJump: string
   // internal
-  lang?: string;
+  lang?: string
 }
 
 function useLocale<T = Pack>() {
diff --git a/packages/varlet-vue2-ui/src/snackbar/index.jsx b/packages/varlet-vue2-ui/src/snackbar/index.jsx
index 31feb44b..633299a1 100644
--- a/packages/varlet-vue2-ui/src/snackbar/index.jsx
+++ b/packages/varlet-vue2-ui/src/snackbar/index.jsx
@@ -12,7 +12,7 @@ let isMount = false
 let unmount
 let isAllowMultiple = false
 let uniqSnackbarOptions = Vue.observable({
-  value: []
+  value: [],
 })
 
 const defaultOption = {
@@ -27,14 +27,10 @@ const defaultOption = {
   lockScroll: false,
   teleport: 'body',
   forbidClick: false,
-  onOpen: () => {
-  },
-  onOpened: () => {
-  },
-  onClose: () => {
-  },
-  onClosed: () => {
-  },
+  onOpen: () => {},
+  onOpened: () => {},
+  onClose: () => {},
+  onClosed: () => {},
 }
 
 const transitionGroupProps = {
@@ -48,22 +44,22 @@ function getCoreVNode(h, option) {
   const attrs = {
     ...reactiveSnackOptions,
     'data-id': id,
-    customUpdate
+    customUpdate,
   }
   const directives = [
     {
       name: 'show',
       rawName: 'v-show',
       value: reactiveSnackOptions.show,
-      expression: 'show'
-    }
+      expression: 'show',
+    },
   ]
   const style = {
     position: isAllowMultiple ? 'relative' : 'absolute',
-    top: getTop(reactiveSnackOptions.position)
+    top: getTop(reactiveSnackOptions.position),
   }
   const on = {
-    'update:show': value => {
+    'update:show': (value) => {
       reactiveSnackOptions.show = value
     },
     open: () => {
@@ -78,7 +74,7 @@ function getCoreVNode(h, option) {
     attrs,
     style,
     directives,
-    on
+    on,
   })
 }
 
@@ -101,15 +97,15 @@ const TransitionGroupHost = {
       'transition-group',
       {
         attrs: {
-          ...transitionGroupProps
+          ...transitionGroupProps,
         },
         style: {
-          zIndex: context.zIndex
+          zIndex: context.zIndex,
         },
         on: {
           'after-enter': opened,
-          'after-leave': removeUniqOption
-        }
+          'after-leave': removeUniqOption,
+        },
       },
       snackbarList
     )
@@ -210,7 +206,7 @@ function removeUniqOption(element) {
   if (isAllAnimationEnd) {
     unmount?.()
     uniqSnackbarOptions = Vue.observable({
-      value: []
+      value: [],
     })
     isMount = false
   }
diff --git a/packages/varlet-vue2-ui/src/themes/dark/bottomNavigation.ts b/packages/varlet-vue2-ui/src/themes/dark/bottomNavigation.ts
new file mode 100644
index 00000000..891659df
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/themes/dark/bottomNavigation.ts
@@ -0,0 +1,4 @@
+export default {
+  '--bottom-navigation-background-color': '#272727',
+  '--bottom-navigation-border-color': '#444',
+}
diff --git a/packages/varlet-vue2-ui/src/themes/dark/bottomNavigationItem.ts b/packages/varlet-vue2-ui/src/themes/dark/bottomNavigationItem.ts
new file mode 100644
index 00000000..c53649b1
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/themes/dark/bottomNavigationItem.ts
@@ -0,0 +1,3 @@
+export default {
+  '--bottom-navigation-item-active-background-color': '#272727',
+}
diff --git a/packages/varlet-vue2-ui/src/themes/dark/index.ts b/packages/varlet-vue2-ui/src/themes/dark/index.ts
index 288c1d8d..0306eeea 100644
--- a/packages/varlet-vue2-ui/src/themes/dark/index.ts
+++ b/packages/varlet-vue2-ui/src/themes/dark/index.ts
@@ -26,6 +26,8 @@ import timePicker from './timePicker'
 import uploader from './uploader'
 import tabs from './tabs'
 import appBar from './appBar'
+import bottomNavigation from './bottomNavigation'
+import bottomNavigationItem from './bottomNavigationItem'
 
 export default {
   // common
@@ -66,4 +68,6 @@ export default {
   ...divider,
   ...picker,
   ...appBar,
+  ...bottomNavigation,
+  ...bottomNavigationItem,
 } as StyleVars
diff --git a/packages/varlet-vue2-ui/src/utils/jest.ts b/packages/varlet-vue2-ui/src/utils/jest.ts
index 626a336d..d4919c25 100644
--- a/packages/varlet-vue2-ui/src/utils/jest.ts
+++ b/packages/varlet-vue2-ui/src/utils/jest.ts
@@ -73,12 +73,12 @@ export function mockOffset({
   offsetLeft,
   offsetTop,
 }: {
-  offsetWidth?: number;
-  offsetHeight?: number;
-  clientWidth?: number;
-  clientHeight?: number;
-  offsetLeft?: number;
-  offsetTop?: number;
+  offsetWidth?: number
+  offsetHeight?: number
+  clientWidth?: number
+  clientHeight?: number
+  offsetLeft?: number
+  offsetTop?: number
 } = {}) {
   Object.defineProperties(HTMLElement.prototype, {
     offsetWidth: {
diff --git a/packages/varlet-vue2-ui/types/appBar.d.ts b/packages/varlet-vue2-ui/types/appBar.d.ts
index c1761f07..185012d5 100644
--- a/packages/varlet-vue2-ui/types/appBar.d.ts
+++ b/packages/varlet-vue2-ui/types/appBar.d.ts
@@ -1,11 +1,11 @@
 import { VarComponent } from './varComponent'
 
 export interface AppBarProps {
-  color?: string;
-  textColor?: string;
-  title?: string;
-  titlePosition?: 'left' | 'center' | 'right';
-  elevation?: boolean;
+  color?: string
+  textColor?: string
+  title?: string
+  titlePosition?: 'left' | 'center' | 'right'
+  elevation?: boolean
 }
 
 export class AppBar extends VarComponent {
diff --git a/packages/varlet-vue2-ui/types/badge.d.ts b/packages/varlet-vue2-ui/types/badge.d.ts
index 8bbc4632..4c1c44d9 100644
--- a/packages/varlet-vue2-ui/types/badge.d.ts
+++ b/packages/varlet-vue2-ui/types/badge.d.ts
@@ -1,14 +1,14 @@
 import { VarComponent } from './varComponent'
 
 export interface BadgeProps {
-  type?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
-  hidden?: boolean;
-  dot?: boolean;
-  value?: string | number;
-  maxValue?: string | number;
-  color?: string;
-  position?: 'right-top' | 'right-bottom' | 'left-top' | 'left-bottom';
-  icon?: string;
+  type?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger'
+  hidden?: boolean
+  dot?: boolean
+  value?: string | number
+  maxValue?: string | number
+  color?: string
+  position?: 'right-top' | 'right-bottom' | 'left-top' | 'left-bottom'
+  icon?: string
 }
 
 export class Badge extends VarComponent {
diff --git a/packages/varlet-vue2-ui/types/bottomNavigation.d.ts b/packages/varlet-vue2-ui/types/bottomNavigation.d.ts
new file mode 100644
index 00000000..aa2000a4
--- /dev/null
+++ b/packages/varlet-vue2-ui/types/bottomNavigation.d.ts
@@ -0,0 +1,22 @@
+import { VarComponent } from './varComponent'
+import { ButtonProps } from './button'
+
+export interface BottomNavigationProps {
+  active?: number | string
+  fixed?: boolean
+  border?: boolean
+  zIndex?: number | string
+  activeColor?: string
+  inactiveColor?: string
+  fabProps?: Partial<ButtonProps>
+  onChange?: (active: string | number) => void
+  'onUpdate:active'?: (active: string | number) => void
+  onBeforeChange?: (active: string | number) => boolean | Promise<any>
+  onFabClick?: () => void
+}
+
+export class BottomNavigation extends VarComponent {
+  $props: BottomNavigationProps
+}
+
+export class _BottomNavigationComponent extends BottomNavigation {}
diff --git a/packages/varlet-vue2-ui/types/bottomNavigationItem.d.ts b/packages/varlet-vue2-ui/types/bottomNavigationItem.d.ts
new file mode 100644
index 00000000..b7e7d911
--- /dev/null
+++ b/packages/varlet-vue2-ui/types/bottomNavigationItem.d.ts
@@ -0,0 +1,17 @@
+import { VarComponent } from './varComponent'
+import { BadgeProps } from './badge'
+
+export interface BottomNavigationItemProps {
+  name?: string
+  icon?: string
+  label?: string
+  namespace?: string
+  badge?: boolean | BadgeProps
+  onClick?: (active: string | number) => void
+}
+
+export class BottomNavigationItem extends VarComponent {
+  $props: BottomNavigationItemProps
+}
+
+export class _BottomNavigationItemComponent extends BottomNavigationItem {}
diff --git a/packages/varlet-vue2-ui/types/button.d.ts b/packages/varlet-vue2-ui/types/button.d.ts
index aba5bb9e..9275d92e 100644
--- a/packages/varlet-vue2-ui/types/button.d.ts
+++ b/packages/varlet-vue2-ui/types/button.d.ts
@@ -1,23 +1,23 @@
 import { VarComponent } from './varComponent'
 
 export interface ButtonProps {
-  type?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
-  size?: 'normal' | 'mini' | 'small' | 'large';
-  loading?: boolean;
-  round?: boolean;
-  block?: boolean;
-  text?: boolean;
-  outline?: boolean;
-  disabled?: boolean;
-  ripple?: boolean;
-  autoLoading?: boolean;
-  color?: string;
-  textColor?: string;
-  loadingRadius?: string | number;
-  loadingType?: 'circle' | 'wave' | 'cube' | 'rect' | 'disappear';
-  loadingSize?: 'normal' | 'mini' | 'small' | 'large';
-  onClick?: (e: Event) => void;
-  onTouchstart?: (e: Event) => void;
+  type?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger'
+  size?: 'normal' | 'mini' | 'small' | 'large'
+  loading?: boolean
+  round?: boolean
+  block?: boolean
+  text?: boolean
+  outline?: boolean
+  disabled?: boolean
+  ripple?: boolean
+  autoLoading?: boolean
+  color?: string
+  textColor?: string
+  loadingRadius?: string | number
+  loadingType?: 'circle' | 'wave' | 'cube' | 'rect' | 'disappear'
+  loadingSize?: 'normal' | 'mini' | 'small' | 'large'
+  onClick?: (e: Event) => void
+  onTouchstart?: (e: Event) => void
 }
 
 export class Button extends VarComponent {
diff --git a/packages/varlet-vue2-ui/types/card.d.ts b/packages/varlet-vue2-ui/types/card.d.ts
index b944ee71..f5a6c447 100644
--- a/packages/varlet-vue2-ui/types/card.d.ts
+++ b/packages/varlet-vue2-ui/types/card.d.ts
@@ -1,16 +1,16 @@
 import { VarComponent } from './varComponent'
 
 export interface CardProps {
-  src?: string;
-  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
-  height?: string | number;
-  alt?: string;
-  title?: string;
-  subtitle?: string;
-  description?: string;
-  elevation?: string | number;
-  ripple?: boolean;
-  onClick?: (e: Event) => void;
+  src?: string
+  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+  height?: string | number
+  alt?: string
+  title?: string
+  subtitle?: string
+  description?: string
+  elevation?: string | number
+  ripple?: boolean
+  onClick?: (e: Event) => void
 }
 
 export class Card extends VarComponent {
diff --git a/packages/varlet-vue2-ui/types/cell.d.ts b/packages/varlet-vue2-ui/types/cell.d.ts
index c5511665..4ada8d66 100644
--- a/packages/varlet-vue2-ui/types/cell.d.ts
+++ b/packages/varlet-vue2-ui/types/cell.d.ts
@@ -1,14 +1,14 @@
 import { VarComponent } from './varComponent'
 
 export interface CellProps {
-  title?: string | number;
-  icon?: string;
-  desc?: string;
-  border?: boolean;
-  iconClass?: string;
-  titleClass?: string;
-  descClass?: string;
-  extraClass?: string;
+  title?: string | number
+  icon?: string
+  desc?: string
+  border?: boolean
+  iconClass?: string
+  titleClass?: string
+  descClass?: string
+  extraClass?: string
 }
 
 export class Cell extends VarComponent {
diff --git a/packages/varlet-vue2-ui/types/chip.d.ts b/packages/varlet-vue2-ui/types/chip.d.ts
index d33746b7..94969aec 100644
--- a/packages/varlet-vue2-ui/types/chip.d.ts
+++ b/packages/varlet-vue2-ui/types/chip.d.ts
@@ -1,15 +1,15 @@
 import { VarComponent } from './varComponent'
 
 export interface ChipProps {
-  type?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
-  size?: 'normal' | 'mini' | 'small' | 'large';
-  color?: string;
-  textColor?: string;
-  iconName?: string;
-  plain?: boolean;
-  round?: boolean;
-  block?: boolean;
-  closable?: boolean;
+  type?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger'
+  size?: 'normal' | 'mini' | 'small' | 'large'
+  color?: string
+  textColor?: string
+  iconName?: string
+  plain?: boolean
+  round?: boolean
+  block?: boolean
+  closable?: boolean
 }
 
 export class Chip extends VarComponent {
diff --git a/packages/varlet-vue2-ui/types/countdown.d.ts b/packages/varlet-vue2-ui/types/countdown.d.ts
index 76a9eeb1..8ac3e4dc 100644
--- a/packages/varlet-vue2-ui/types/countdown.d.ts
+++ b/packages/varlet-vue2-ui/types/countdown.d.ts
@@ -1,19 +1,19 @@
 import { VarComponent } from './varComponent'
 
 export type TimeData = {
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
-  milliseconds: number;
+  days: number
+  hours: number
+  minutes: number
+  seconds: number
+  milliseconds: number
 }
 
 export interface CountdownProps {
-  time?: string | number;
-  format?: string;
-  autoStart?: boolean;
-  onEnd?: () => void;
-  onChange?: (value: TimeData) => void;
+  time?: string | number
+  format?: string
+  autoStart?: boolean
+  onEnd?: () => void
+  onChange?: (value: TimeData) => void
 }
 
 export class Countdown extends VarComponent {
diff --git a/packages/varlet-vue2-ui/types/divider.d.ts b/packages/varlet-vue2-ui/types/divider.d.ts
index fbb0fb1a..3010e4ff 100644
--- a/packages/varlet-vue2-ui/types/divider.d.ts
+++ b/packages/varlet-vue2-ui/types/divider.d.ts
@@ -1,11 +1,11 @@
 import { VarComponent } from './varComponent'
 
 export interface DividerProps {
-  inset?: boolean | number;
-  vertical?: boolean;
-  description?: string;
-  margin?: string;
-  dashed?: boolean;
+  inset?: boolean | number
+  vertical?: boolean
+  description?: string
+  margin?: string
+  dashed?: boolean
 }
 
 export class Divider extends VarComponent {
diff --git a/packages/varlet-vue2-ui/types/global.d.ts b/packages/varlet-vue2-ui/types/global.d.ts
index 3b23792e..9821bbc8 100644
--- a/packages/varlet-vue2-ui/types/global.d.ts
+++ b/packages/varlet-vue2-ui/types/global.d.ts
@@ -4,6 +4,8 @@ declare module 'vue' {
     VarAppBar: typeof import('@varlet-vue2/ui')['_AppBarComponent']
     VarBackTop: typeof import('@varlet-vue2/ui')['_BackTopComponent']
     VarBadge: typeof import('@varlet-vue2/ui')['_BadgeComponent']
+    VarBottomNavigation: typeof import('@varlet-vue2/ui')['_BottomNavigationComponent']
+    VarBottomNavigationItem: typeof import('@varlet-vue2/ui')['_BottomNavigationItemComponent']
     VarButton: typeof import('@varlet-vue2/ui')['_ButtonComponent']
     VarCard: typeof import('@varlet-vue2/ui')['_CardComponent']
     VarCell: typeof import('@varlet-vue2/ui')['_CellComponent']
diff --git a/packages/varlet-vue2-ui/types/image.d.ts b/packages/varlet-vue2-ui/types/image.d.ts
index be35bf22..bd48e297 100644
--- a/packages/varlet-vue2-ui/types/image.d.ts
+++ b/packages/varlet-vue2-ui/types/image.d.ts
@@ -1,20 +1,20 @@
 import { VarComponent } from './varComponent'
 
 export interface ImageProps {
-  src?: string;
-  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
-  alt?: string;
-  width?: string | number;
-  height?: string | number;
-  radius?: string | number;
-  loading?: string;
-  error?: string;
-  lazy?: boolean;
-  ripple?: boolean;
-  block?: boolean;
-  onClick?: (e: Event) => void;
-  onLoad?: (e: Event) => void;
-  onError?: (e: Event) => void;
+  src?: string
+  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+  alt?: string
+  width?: string | number
+  height?: string | number
+  radius?: string | number
+  loading?: string
+  error?: string
+  lazy?: boolean
+  ripple?: boolean
+  block?: boolean
+  onClick?: (e: Event) => void
+  onLoad?: (e: Event) => void
+  onError?: (e: Event) => void
 }
 
 export class Image extends VarComponent {
diff --git a/packages/varlet-vue2-ui/types/index.d.ts b/packages/varlet-vue2-ui/types/index.d.ts
index 8528ee58..5312d7e7 100644
--- a/packages/varlet-vue2-ui/types/index.d.ts
+++ b/packages/varlet-vue2-ui/types/index.d.ts
@@ -6,6 +6,8 @@ export * from './actionSheet'
 export * from './appBar'
 export * from './backTop'
 export * from './badge'
+export * from './bottomNavigation'
+export * from './bottomNavigationItem'
 export * from './button'
 export * from './card'
 export * from './cell'
diff --git a/packages/varlet-vue2-ui/types/locale.d.ts b/packages/varlet-vue2-ui/types/locale.d.ts
index aafb7d1b..27c8f29d 100644
--- a/packages/varlet-vue2-ui/types/locale.d.ts
+++ b/packages/varlet-vue2-ui/types/locale.d.ts
@@ -6,42 +6,42 @@ export type Week = '0' | '1' | '2' | '3' | '4' | '5' | '6'
 
 export type Pack = {
   // Dialog
-  dialogTitle: string;
-  dialogConfirmButtonText: string;
-  dialogCancelButtonText: string;
+  dialogTitle: string
+  dialogConfirmButtonText: string
+  dialogCancelButtonText: string
   // ActionSheet
-  actionSheetTitle: string;
+  actionSheetTitle: string
   // List
-  listLoadingText: string;
-  listFinishedText: string;
-  listErrorText: string;
+  listLoadingText: string
+  listFinishedText: string
+  listErrorText: string
   // Picker
-  pickerTitle: string;
-  pickerConfirmButtonText: string;
-  pickerCancelButtonText: string;
+  pickerTitle: string
+  pickerConfirmButtonText: string
+  pickerCancelButtonText: string
   // date-picker
-  datePickerMonthDict: Record<Month, { name: string; abbr: string }>;
-  datePickerWeekDict: Record<Week, { name: string; abbr: string }>;
-  datePickerSelected: string;
+  datePickerMonthDict: Record<Month, { name: string; abbr: string }>
+  datePickerWeekDict: Record<Week, { name: string; abbr: string }>
+  datePickerSelected: string
   // pagination
-  paginationItem: string;
-  paginationPage: string;
-  paginationJump: string;
+  paginationItem: string
+  paginationPage: string
+  paginationJump: string
 }
 
 interface Locale {
-  packs: Record<string, Partial<Pack>>;
-  pack: Ref<Partial<Pack>>;
-  add(lang: string, pack: Partial<Pack>): void;
-  use(lang: string): void;
-  merge(lang: string, pack: Partial<Pack>): void;
+  packs: Record<string, Partial<Pack>>
+  pack: Ref<Partial<Pack>>
+  add(lang: string, pack: Partial<Pack>): void
+  use(lang: string): void
+  merge(lang: string, pack: Partial<Pack>): void
   useLocale<T = Pack>(): {
-    packs: Record<string, Partial<T>>;
-    pack: Ref<Partial<T>>;
-    add(lang: string, pack: Partial<T> & { lang?: string }): void;
-    use(lang: string): void;
-    merge(lang: string, pack: Partial<T>): void;
-  };
+    packs: Record<string, Partial<T>>
+    pack: Ref<Partial<T>>
+    add(lang: string, pack: Partial<T> & { lang?: string }): void
+    use(lang: string): void
+    merge(lang: string, pack: Partial<T>): void
+  }
 }
 
 export const Locale: Locale
diff --git a/packages/varlet-vue2-ui/types/progress.d.ts b/packages/varlet-vue2-ui/types/progress.d.ts
index 9845240b..2f9a8e2d 100644
--- a/packages/varlet-vue2-ui/types/progress.d.ts
+++ b/packages/varlet-vue2-ui/types/progress.d.ts
@@ -1,16 +1,16 @@
 import { VarComponent } from './varComponent'
 
 export interface ProgressProps {
-  mode?: 'linear' | 'circle';
-  lineWidth?: string | number;
-  color?: string;
-  trackColor?: string;
-  ripple?: boolean;
-  showAction?: boolean;
-  showTrack?: boolean;
-  value?: number | string;
-  size?: number;
-  rotate?: number;
+  mode?: 'linear' | 'circle'
+  lineWidth?: string | number
+  color?: string
+  trackColor?: string
+  ripple?: boolean
+  showAction?: boolean
+  showTrack?: boolean
+  value?: number | string
+  size?: number
+  rotate?: number
 }
 
 export class Progress extends VarComponent {
diff --git a/packages/varlet-vue2-ui/types/skeleton.d.ts b/packages/varlet-vue2-ui/types/skeleton.d.ts
index a41c83ae..9b6d558c 100644
--- a/packages/varlet-vue2-ui/types/skeleton.d.ts
+++ b/packages/varlet-vue2-ui/types/skeleton.d.ts
@@ -1,17 +1,17 @@
 import { VarComponent } from './varComponent'
 
 export interface SkeletonProps {
-  loading?: boolean;
-  title?: boolean;
-  avatar?: boolean;
-  card?: boolean;
-  fullscreen?: boolean;
-  fullscreenZIndex?: string | number;
-  titleWidth?: string | number;
-  avatarSize?: string | number;
-  cardHeight?: string | number;
-  rows?: string | number;
-  rowsWidth?: (string | number)[];
+  loading?: boolean
+  title?: boolean
+  avatar?: boolean
+  card?: boolean
+  fullscreen?: boolean
+  fullscreenZIndex?: string | number
+  titleWidth?: string | number
+  avatarSize?: string | number
+  cardHeight?: string | number
+  rows?: string | number
+  rowsWidth?: (string | number)[]
 }
 
 export class Skeleton extends VarComponent {
diff --git a/packages/varlet-vue2-ui/varlet.config.js b/packages/varlet-vue2-ui/varlet.config.js
index a6b66bce..b0b69d4c 100644
--- a/packages/varlet-vue2-ui/varlet.config.js
+++ b/packages/varlet-vue2-ui/varlet.config.js
@@ -289,6 +289,14 @@ module.exports = {
         doc: 'app-bar',
         type: 2,
       },
+      {
+        text: {
+          'zh-CN': 'BottomNavigation 底部导航栏',
+          'en-US': 'BottomNavigation',
+        },
+        doc: 'bottom-navigation',
+        type: 2,
+      },
       {
         text: {
           'zh-CN': '功能指令',