Install

import { createApp } from 'vue';
import { NavBar } from 'vant';

const app = createApp();
app.use(NavBar);

Usage

Basic Usage

<van-nav-bar title="Title" />

Back

<van-nav-bar
  title="Title"
  left-text="Back"
  left-arrow
  @click-left="onClickLeft"
/>

export default {
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
};

Right Button

<van-nav-bar
  title="Title"
  left-text="Back"
  right-text="Button"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>

import { Toast } from 'vant';

export default {
  setup() {
    const onClickLeft = () => history.back();
    const onClickRight = () => Toast('Button');
    return {
      onClickLeft,
      onClickRight,
    };
  },
};

Use Slot

<van-nav-bar title="Title" left-text="Back" left-arrow>
  <template #right>
    <van-icon name="search" />
  </template>
</van-nav-bar>

API

Props

Attribute	Description	Type	Default
title	Title	string	`''`
left-text	Left Text	string	`''`
right-text	Right Text	string	`''`
left-arrow	Whether to show left arrow	boolean	`false`
border	Whether to show bottom border	boolean	`true`
fixed	Whether to fixed top	boolean	`false`
placeholder	Whether to generate a placeholder element when fixed	boolean	`false`
z-index	Z-index	number \| string	`1`
safe-area-inset-top	Whether to enable top safe area adaptation	boolean	`false`

Slots

Name	Description
title	Custom title
left	Custom left side content
right	Custom right side content

Events

Event	Description	Arguments
click-left	Emitted when the left button is clicked	event: MouseEvent
click-right	Emitted when the right button is clicked	event: MouseEvent

Types

The component exports the following type definitions:

import type { NavBarProps } from 'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-nav-bar-height	46px	-
--van-nav-bar-background-color	var(--van-background-color-light)	-
--van-nav-bar-arrow-size	16px	-
--van-nav-bar-icon-color	var(--van-primary-color)	-
--van-nav-bar-text-color	var(--van-primary-color)	-
--van-nav-bar-title-font-size	var(--van-font-size-lg)	-
--van-nav-bar-title-text-color	var(--van-text-color)	-
--van-nav-bar-z-index	1	-

NavBar

Intro