# Navbar

* **Component**: \<NavBar/>
* **Path**: /components/layout/navbar.tsx
* **Import**:

```typescript
import { NavBar } from "@/components/layout/navbar";
```

<figure><img src="https://865796172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FntKe5sSLfvbHfpqI4xbm%2Fuploads%2FxtsGqNMNPLvuVpE7R4cY%2FCapture%20d%E2%80%99%C3%A9cran%202024-06-17%20134822.png?alt=media&#x26;token=5832c8b4-8ee0-4b07-87d2-9d83671134ae" alt=""><figcaption><p>Navbar</p></figcaption></figure>

The Navbar is composed of:

* Your logo/brand
* Main links (add your pricing link here if needed)
* User menu

The Navbar is sticky, it will stay on top of the page when you scroll down.

The links will regroup under a burger menu on mobile version.

<figure><img src="https://865796172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FntKe5sSLfvbHfpqI4xbm%2Fuploads%2Fvnnwyl1vU0Bo6qjZLCzP%2FCapture%20d%E2%80%99%C3%A9cran%202024-06-17%20135330.png?alt=media&#x26;token=696fc801-31b6-4590-9dfa-c7da1111eb19" alt=""><figcaption><p>Mobile Navbar</p></figcaption></figure>

{% hint style="info" %}
Do not forget to update both mobile AND laptop sections if you add or modify a new link.
{% endhint %}