> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customizing the navbar

> Learn how to work with global components in Makeswift.

[Global Components](/product/components#global-components) are groups of components that can be saved and reused across your entire site. This is a perfect use case for sections that should look the same across all pages like navbars, footers, etc. In fact, the **Navbar** component in the **Venture** template is a Global Component.

## Editing the navbar

In the top part of the canvas, select the **Navbar** component. When you click on it, notice you don't immediately see its properties in the Properties Sidebar. Since this is a Global Component, you must enter edit mode to make changes.

<Frame>
  <img
    src="https://mintcdn.com/makeswift/ttFYL1GC4O0eQWyS/images/quickstart/global-component-edit-button.jpg?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=946acfbba591aece5936b4b690222692"
    alt=" Global component edit
button"
    width="1002"
    height="686"
    data-path="images/quickstart/global-component-edit-button.jpg"
  />
</Frame>

With the **Navbar** component selected, click **Edit component** in the Properties Sidebar to enter edit mode. You'll now see the properties associated with this global component. In the canvas, click on the nested component with the name **Navigation**. Here you can edit the links in the Navbar component.

<Frame>
  <img
    src="https://mintcdn.com/makeswift/ttFYL1GC4O0eQWyS/images/quickstart/global-component-edit-mode.jpg?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=152a20a0fbb17cc4e9115b1c88e7220d"
    alt=" Global component edit
mode"
    width="1301"
    height="886"
    data-path="images/quickstart/global-component-edit-mode.jpg"
  />
</Frame>

<Note>
  [Boxes](/product/components#box) are used to build layouts. They can contain
  text, images, buttons, and other components. You can add, remove, and
  rearrange boxes to create your desired layout.
</Note>

In the Properties Sidebar, click on the **Sign up** link, and change the color to purple by clicking on the color picker. You should see the color change on the canvas. Then, click **Save**.

<Frame>
  <video autoPlay muted loop playsInline title="Components and properties" className="w-full aspect-video" src="https://mintcdn.com/makeswift/ttFYL1GC4O0eQWyS/images/quickstart/global-component-edit-navbar-button.mp4?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=f36c72bb8fe88f9e721f4ee19fa7dce2" data-path="images/quickstart/global-component-edit-navbar-button.mp4" />
</Frame>

## View changes across pages

Because this is a global component, you'll be able to see these changes propogated on other pages that use the **Navbar** component as well. To see this, click on the **About** page in the Navigation Sidebar on the left. Once it loads, you should see the Navbar with the purple **Sign up** button.

<Frame>
  <img
    src="https://mintcdn.com/makeswift/ttFYL1GC4O0eQWyS/images/quickstart/global-component-about-page.jpg?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=4b4743a1d9605d7614b531ed1455d53b"
    alt=" Global component edit
mode"
    width="1398"
    height="542"
    data-path="images/quickstart/global-component-about-page.jpg"
  />
</Frame>

For future reference, you can find all of your Global Components in the Component Toolbar. For more details, check out the [Global Components docs](/product/components#global-components).

## In the next section...

You'll learn how to incorporate responsive design into your site.
