# Navbar - For Navigation

A navigation bar or navbar is a link to appropriate sections/pages in a website that helps readers in traversing the online document.

### Adding a  Navbar 

1. From left sidebar click on **`+`**
2. This will open the then under Navigation -> Drag & Drop any Navbar element into the canvas

You can place the navbar anywhere in your site — there's no right or wrong way to do this. Since the navbar is self-contained, you can move it wherever and whenever you like.

Your navbar is a container that centers a group of elements on the page.

* **Brand:** The brand placeholder is a link block located on the left of the navbar. Here you can add a logo or text or any other brand indication.
* **Nav menu**: The nav menu is on the right of the navbar. It is a parent element that contains all the navigation (nav) links.
* **Nav links**: These are text links with predefined padding and other styles. They’re usually linked to different pages or sections of your website.
* **Menu button**: By default, the menu button is hidden on desktop view but will appear at the tablet breakpoint and below. It allows you to access the nav menu (and the nav links) when horizontal space is limited, like on a mobile device.

<figure><img src="/files/UkmL7xwV6YIp09pcNiQX" alt=""><figcaption><p>Adding Navbar</p></figcaption></figure>

### Adding nav links <a href="#adding-nav-links" id="adding-nav-links"></a>

To link to different sections of the page:

1. Select any element in the **Navbar**
2. Click on the Settings icon :gear:  from the left sidebar
3. This will open the properties panel&#x20;
4. Choose the link type -> [Scroll To](/gridbox-editor/using-scroll-points.md), URL, Email or Phone&#x20;
5. Scroll To is option to link page sections, URL is for external link &#x20;

<figure><img src="/files/nQHaGClXwiP3NZSzgsFF" alt=""><figcaption><p>Adding Nav Links</p></figcaption></figure>

### Add more Nav Links&#x20;

If you want to add more links to Navbar do the following

1. Click on any Nav Link.
2. This will highlight the select element with blue toolbar like shown in the image below&#x20;
3. &#x20;![](/files/-MhJKhFnTGyoPT9nrHU0)
4. Then click on copy icon in the blue toolbar, this will duplicate the element.
5. That's it.&#x20;

### Styling Navbar

#### Size of the navbar and nav menu <a href="#size-of-the-navbar-and-nav-menu" id="size-of-the-navbar-and-nav-menu"></a>

The navbar element has no preset values for width or height. You can adjust these values in the Style panel.

**Navbar width**

When you drop the navbar inside the body, section, or another element, it will take up the full width of that element. You can constrict the navbar horizontally by setting a **width** on itself or by constricting the width of its parent element (with **auto margin** set on the navbar to center it). You can also add **margin** to the navbar (combined with a **max width** or **auto width**) to change the relationship with the elements around the navbar.

**Navbar height**

The height of the navbar is determined by the content inside — either the height of the brand logo or the height of the nav links. You can adjust the height of the navbar by:

* Adding a **height** value to the navbar
* Adding top and bottom **padding** to the navbar itself
* Adding top and bottom **padding** to the content inside the navbar

You can add padding to the nav links by selecting a nav link and adjusting the top and bottom padding. The size of the nav link and the navbar adjusts accordingly. You can also add margin to achieve a similar effect.

A more uniform approach might be to select the navbar and adjust its padding. Increasing the padding adds more height because it creates extra space between the navbar and the container that holds all the navbar elements.

#### Selecting Navbar in the Canvas

1. Click on any element in the Navbar&#x20;
2. From the left sidebar -> Click on :art: icon -> This will open the apperance panel -> Click on Inspect -> Click on Nav, to select the entire navbar element&#x20;

<figure><img src="/files/h2sVqbM9WgYD2TyUR71p" alt=""><figcaption><p>Selecting Navbar </p></figcaption></figure>

#### Changing Navbar styles

1. Once we select the entire navbar using Inspect panel from the above steps&#x20;
2. When switch to Appearance tab -> under Classes -> you can see list of the classes applied to that Navbar&#x20;
3. You can even add custom class name & start changing background, its height or other properties.&#x20;

### Making Navbar Sticky

Sometimes you want a Navbar to remain at the top forever even if you scroll. By default whenever you drag and drop any Navbar element it will be sticky, however if you have used header section navbar this is not the case.&#x20;

To make the Navbar sticky do the following&#x20;

1. Select the entire Navbar by following [above steps](#selecting-navbar-in-the-canvas)
2. Click on the Appearance icon from the left sidebar :art:
3. Then under Display -> postion -> fixed (This will make Navbar fixed to top)&#x20;
4. Then under Dimensions -> Width -> Set to 100% (to occupy the entire width of the screen)
5. That's it

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgj45dJ-t6Yc2Yz_AG3%2Fuploads%2F0LzgI7w1GNagLIvhymrL%2FRecording%20%23444.mp4?alt=media&token=570a51dc-c881-4973-a81e-0fc5117145c6>" %}
Making Navbar sticky
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gridbox.io/tutorials/navbar-for-navigation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.