> ## Documentation Index
> Fetch the complete documentation index at: https://makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting.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>
  ![ Global component edit
  button](https://mintlify.s3.us-west-1.amazonaws.com/makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting/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>
  ![ Global component edit
  mode](https://mintlify.s3.us-west-1.amazonaws.com/makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting/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://mintlify.s3.us-west-1.amazonaws.com/makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting/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>
  ![ Global component edit
  mode](https://mintlify.s3.us-west-1.amazonaws.com/makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting/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 incporate responsive design into your site.
