> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to create a responsive navbar

**To create a responsive mobile menu you can use the Navbar interactive element.**

Here are the steps required to create a responsive navbar menu for your project that will have a working sliding effect and hamburger button for the mobile version.

|    |    |
| --- | --- |
| [Video tutorial](#2-video-tutorial) | [Step by Step](#2-1-add-the-navbar-element) |

## Video tutorial

${youtube}[How to build a responsive navbar](itPw43q2ruI)

## 1. Add the navbar element

Go to the **Elements tab**, scroll down to the **Interactive section** and **drag & drop the Navbar element** to the top of your project.

This will add a premade navbar that you can easily style and customize for both **Desktop and Mobile versions**.

![Adding the navbar element to the canvas](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/1-adding-responsive-navbar_13ohay3.gif)

## 2. Navbar settings

Once you add the navbar you will notice in the **Right panel** the **Navbar Settings** section. Here you will find options to help you customize it such as: animation, collapse options, preview and more.

![Navbar settings section in the Right panel](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-navbar-options_1yxhn1q.gif)

### 3. Hide / show mobile menu

Use the **Hide** or **Show** buttons in the **Navbar Settings** section to make your mobile menu visible or invisible when editing the navigation bar.

![Hide/show navbar for easy editing](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/7-hide-show-navbar_kasbgm.gif)

### 4. Navbar animation

Change the direction of the slide effect for the mobile menu from the Animation dropdown menu. You can choose between: none, left, right and top.

| Use the Preview option while editing to see how the slide effect looks with the different options.

![Changing the slide animation on the navbar](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/3-navbar-animation_12l9ls0.gif)

### 5. Collapse navbar

Choose the point where you want the mobile version with the burger button to replace the desktop version. You can do this by choosing from the **media queries** that you have active at the time. 

![Changing the collapse point for the mobile menu](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/4-collapse-navbar_19jon0.gif)

### 6. Adding new elements

To add a new element to your navbar, from the **Navbar Settings** section click on the Add menu item button. This will add a new simple menu item to both the desktop and mobile version.

Additionally, from the Elements tab you can drag and drop a normal Text element or a Dropdown element to the navbar if you want to create a more interactive navbar. 

|| Adding elements with drag and drop will not add the element to both mobile and desktop versions. Additionally, deleting elements from one version will not delete them from the other.

![Adding elements to the navbar](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/5-adding-elements_1ori22h.gif)

## 7. Previewing the navbar

To preview the navbar in real time you have two options:

Go to the Right panel and in the Navbar settings click on the **Preview button**.

Or when selecting the navbar, in the context menu above click on the **green Eye icon**.

![Previewing the navbar](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/6-preview-navbar_5m12rz.gif)