vant/src/nav-bar

NavBar

Intro

Provide navigation function for the page, often used at the top of the page.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

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

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

Usage

Basic Usage

<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 = () => Toast('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

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