Navbar

Demo

Install

import React from 'react';
import { Navbar } from 'vant-react';

Usage

Basic Usage

<Navbar title='Settings' />

LeftAndRightText

<Navbar
    title='Settings'
    leftText='Back'
    rightText='More'
/>
<Navbar
    title='Profile'
    leftIcon='arrow-left'
    leftText='Back'
    rightIcon='search'
    rightText='Search'
/>
<Navbar
    title='Home'
    leftIcon='user-o'
    rightIcon='search'
/>

Fixed

<Navbar
    fixed
    title='Profile'
    leftIcon='arrow-left'
    leftText='Back'
    rightIcon='search'
/>

BorderBottom

<Navbar
    border
    title='Profile'
    leftIcon='arrow-left'
    leftText='Back'
    rightIcon='search'
/>

ClickHandler

<Navbar
    title='Title'
    leftIcon='arrow-left'
    leftText='Back'
    rightIcon='search'
    clickLeft={(e) => alert(e.target.innerHTML + ' Left Click')}
    clickRight={(e) => alert(e.target.innerHTML + ' Right Click')}
/>

WithLongTitle

<Navbar
      title='This is a very very very very very very very very very very long text'
      leftIcon='arrow-left'
      leftText='Back'
      rightIcon='search'
/>

API

Props

Event

PreviousButtonNextPopup

Last updated