NavBar - Vant 4

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

Back

exportdefault { setup() { constonClickLeft = () => history.back(); return { onClickLeft, }; }, };

Right Button

import { showToast } from'vant'; exportdefault { setup() { constonClickLeft = () => history.back(); constonClickRight = () => showToast('Button'); return { onClickLeft, onClickRight, }; }, };

Use Slot

Disable Button

Use the left-disabled or right-disabled props to disable the buttons on either side. The prop reduces the opacity of the button and makes it unclickable.

API

Props

Attribute	Description	Type	Default
title	Title	string	''
left-text	Left Text	string	''
right-text	Right Text	string	''
left-disabled v4.6.8	Whether to disable the left button, decrease opacity and make it unclickable	boolean	false
right-disabled v4.6.8	Whether to disable the right button, decrease opacity and make it unclickable	boolean	false
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*
safe-area-inset-top	Whether to enable top safe area adaptation	boolean	false
clickable	Whether to show click feedback when the left or right content is clicked	boolean	true

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:

importtype { 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	var(--van-background-2)	-
--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	-