> ## Documentation Index
> Fetch the complete documentation index at: https://makeswift-docs-branch.mintlify.site/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-docs-branch/qFmu781C7ke_MJk2/images/quickstart/global-component-edit-button.jpg?fit=max&auto=format&n=qFmu781C7ke_MJk2&q=85&s=61e2cf9f4429cc14f35d7a9be3a1601f"
    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-docs-branch/qFmu781C7ke_MJk2/images/quickstart/global-component-edit-mode.jpg?fit=max&auto=format&n=qFmu781C7ke_MJk2&q=85&s=18a6f66da99b10488ea9eaf2bfec490c"
    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-docs-branch/qFmu781C7ke_MJk2/images/quickstart/global-component-edit-navbar-button.mp4?fit=max&auto=format&n=qFmu781C7ke_MJk2&q=85&s=04c7393a8d15509812532d083cf71e9b" 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-docs-branch/qFmu781C7ke_MJk2/images/quickstart/global-component-about-page.jpg?fit=max&auto=format&n=qFmu781C7ke_MJk2&q=85&s=2170125c80d1e90f42807214bddaac52"
    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.
