# Toolbar Customization

Sonoran CMS allows you to customize the top toolbar with buttons to link your users to whatever your community needs.

![Sonoran CMS - Toolbar Customization](https://3006847189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdBOa9OFjtdqw9FdXli%2Fuploads%2Fgit-blob-9f53d56066c555f9910c142aaae1eec50244e7c1%2FScreenshot%20\(277\).png?alt=media)

To customize your community's toolbar head over to the `Administrative Panel` > `Website Builder`. From there you can add buttons, dropdowns and community image with various options.

To add a new button or dropdown, click the green plus button to add it to the end of your toolbar, or drag-and-drop the button to whatever position within the toolbar you'd like.

If you would like to reorder items in the toolbar, simply drag-and-drop them into their new position.

Each button and drop down option has a label and link associated with it, with these set they will be displayed to all community users.

If you make any changes, it will automatically save.

{% hint style="info" %}
Privatized pages will not show up in the toolbar or in a dropdown in the toolbar for any user that lacks the required permissions to view them.
{% endhint %}

## Styling & Customization

### Header Design

The orange `Header Design` button opens a menu that will let you customize the group alignment, background color and admin cog setting. You can also drag and drop elements to change the display order.

<figure><img src="https://3006847189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdBOa9OFjtdqw9FdXli%2Fuploads%2Fgit-blob-e261721a8820d5293608ae07f7002a195486c8e2%2FScreenshot%20(278).png?alt=media" alt=""><figcaption><p>Sonoran CMS - Toolbar Customization - Header Design</p></figcaption></figure>

### Button Styling

You can also customize the title, font, color and specific links for any button or dropdown menu. To open the design panel, simply click on any button or dropdown in the Toolbar Customization editor.

<figure><img src="https://3006847189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdBOa9OFjtdqw9FdXli%2Fuploads%2Fgit-blob-5d0756f734f11bfa4cebb20da7875ff073ecdf31%2FScreenshot%20(280).png?alt=media" alt=""><figcaption><p>Sonoran CMS - Toolbar Customization - Styles Tab</p></figcaption></figure>

<figure><img src="https://3006847189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdBOa9OFjtdqw9FdXli%2Fuploads%2Fgit-blob-d5dc3417c942d376c0046607f3a1e09036946208%2FScreenshot%20(281).png?alt=media" alt=""><figcaption><p>Sonoran CMS - Toolbar Customization - Styles Selection</p></figcaption></figure>

### Dropdown Styling

With dropdowns, you can also customize not only the styling of the dropdown button itself, but of every option within the dropdown. This is also where you go to add any destination links within the dropdown.

<figure><img src="https://3006847189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdBOa9OFjtdqw9FdXli%2Fuploads%2Fgit-blob-a1e84c08fd5a1215e81a8bc8be6cb14c8070d8ab%2FScreenshot%20(282).png?alt=media" alt=""><figcaption><p>Sonoran CMS - Toolbar Customization - Dropdown Options</p></figcaption></figure>

<figure><img src="https://3006847189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdBOa9OFjtdqw9FdXli%2Fuploads%2Fgit-blob-a6787ed5897f046c61a6524f855362f8f2eb93c9%2FScreenshot%20(283).png?alt=media" alt=""><figcaption><p>Sonoran CMS - Toolbar - Customized Dropdown</p></figcaption></figure>

### Destination Options

Within any button or dropdown you are give the option to link a variety of different things, from another page in the community, to external pages, to documents in your community's drive to management panels and more!

In the design panel of any button, you can customize where said button links to by clicking on the `Target` tab in the design panel

<figure><img src="https://3006847189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdBOa9OFjtdqw9FdXli%2Fuploads%2Fgit-blob-cf57d989d6500d5754eef66491b2171c16db1713%2FScreenshot%20(284).png?alt=media" alt=""><figcaption><p>Sonoran CMS - Toolbar Customization - Button Destination Settings</p></figcaption></figure>

To add options to a dropdown menu, simply click the green plus button in the `Options` tab of the design panel.

<figure><img src="https://3006847189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdBOa9OFjtdqw9FdXli%2Fuploads%2Fgit-blob-587af5aba5722c06b6743b50d3eb54ff2e33c537%2FScreenshot%20(286).png?alt=media" alt=""><figcaption><p>Sonoran CMS - Toolbar Customization - Destination Options</p></figcaption></figure>

From here, you can select the destination of the link using the chain icon:

<figure><img src="https://3006847189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MdBOa9OFjtdqw9FdXli%2Fuploads%2Fgit-blob-f934553e1758a426ed50462b1d0aba872d85a965%2FScreenshot%20(287).png?alt=media" alt=""><figcaption><p>Sonoran CMS - Toolbar Customization - Link Button</p></figcaption></figure>

## Toolbar Item Permissions

Toolbar items that lead to permission-restricted areas (such as private pages or admin panels) automatically show or hide based on whether the user has access to the destination.

Access to specific toolbar link destinations can be configured in the [rank manager](https://docs.sonoransoftware.com/cms/tutorials/user-management/creating-departments).

### Clock In/Out

This button/icon of the navigation toolbar is based upon the **CMS Permissions** > **Clock In & Out** permission.

### Community Pages

This navigation item is based upon the **Page Permissions** > **View Page** permissions.

### Drive

This navigation item is based upon the **CMS Permissions** > **Modify All Documents (Drive)** permission or the **Navigation Pages** > **View Drive Navigation Button** permission.

### Available Forms

This navigation item is always present for all members of your community if within your toolbar.

### Community Calendar

This navigation item is based upon the **Navigation Permissions** > **View Calendar Navigation Button** permission.

### Rosters Tree

This navigation item is based upon the **Navigation Permissions** > **View Rosters Navigation Buttons** permission.

### Form Management

This navigation item is based upon the **Form Permissions** > **View Submitted** permissions, if at least one **View Submitted** permissions is granted the item will show.

### Administrative Panel

This navigation item is based upon several permissions within the **CMS Permissions** section.