> For the complete documentation index, see [llms.txt](https://bctc.gitbook.io/vant-react-official-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bctc.gitbook.io/vant-react-official-docs/navbar.md).

# Navbar

### [Demo](https://vant.bctc.io/?path=/story/navbar--navbar-title)

**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**

| Attribute   | Description                                    | Type          | Default | Required   |
| ----------- | ---------------------------------------------- | ------------- | ------- | ---------- |
| `title`     | Title                                          | ***string***  | -       | *optional* |
| `leftText`  | Left Text                                      | ***string***  | -       | *optional* |
| `rightText` | Left Text                                      | ***string***  | -       | *optional* |
| `leftIcon`  | Left Icon, can be set to `arrow-left` `user-o` | ***string***  | -       | *optional* |
| `rightIcon` | Left Icon, can be set to `search`              | ***string***  | -       | *optional* |
| `border`    | Whether to show bottom border                  | ***boolean*** | `true`  | *optional* |
| `fixed`     | Whether to fixed top                           | ***boolean*** | `true`  | *optional* |
| `zIndex`    | Z-index                                        | ***number***  | `1`     | *optional* |

**Event**

| Event        | Description                     | Arguments      |
| ------------ | ------------------------------- | -------------- |
| `clickLeft`  | Triggered when click left icon  | *event: Event* |
| `clickRight` | Triggered when click right icon | *event: Event* |