The UNC Utility Bar is a centralized navbar that can be added to any UNC website. A script to render it is hosted by ITS, so it will always remain up to date and consistent across web properties. This page demonstrates what the utility bar looks like, what the customization options are and how to include it on your site.

Colors

There are six different color options for the utility bar: Gray, Dark Gray (default), Black, Navy, Blue and White. These match the colors from the official UNC color palette for web applications. They have been optimized to meet the minimum accessibility requirements for color contrast.

You can preview the different colors on this page by clicking the buttons below.

Instructions

To add the utility bar to your site, select the color you would like using the buttons above, then copy the code below and place it in the <head> section of your HTML page or CMS template.

<script type="text/javascript" id="unc-ub-script" data-color="dark-gray" src="https://its.unc.edu/web-assets/utility-bar/utility-bar.min.js"></script>

Contribute

The UNC Utility Bar is open source and the project is hosted on ITS Source Control. We welcome and encourage contributions from developers across campus.

View Project