Navigation Bar

The Navigation Bar provides quick links to information contained within your site. Details about the Navigation Bar are listed below.

General Guidelines

  • The background color of the Navigation Bar is always Medium Gray (#DADADA), and the links are displayed in Jefferson Blue (#232D4B).
  • The Navigation Bar should contain between three and seven links. In addition, it is recommended to avoid linking to content outside of the University’s website from these links.

Desktop Display

  • The Navigation Bar is situated between the Header and page content.
  • The Navigation Bar retains an overall height of 50 px.
  • Franklin Gothic Demi is the font used for links in the Navigation Bar, styled in all uppercase letters and sized to 15 px with a line height of 15 px.
  • There are 5 px of padding to the left and right of each link in the Navigation Bar.
  • Upon hover, the background color of Navigation Bar links change to White (#FFFFFF), and the text changes to Dark Orange (#EB5F0C).

Tablet and Mobile Displays

  • For tablet and mobile displays, the Navigation Bar and related links are folded into a hamburger menu. The hamburger menu icon and other web-related iconography are available in a sprite image file that can be downloaded in the Web Assets folder.
  • Franklin Gothic Condensed Demi Italic is the font used for links in the Navigation Menu, styled in all
  • Uppercase letters and sized to 14 px with a line height of 20 px.
  • There are 20 px of padding around all sides of each link in the Navigation Bar.
Missing media item.


Remember: ITS Custom Applications & Consulting Services (CACS) can help you develop websites that meet brand guidelines. Visit http://cacs.virginia.edu to learn more, or go to the UVA procurement site for a full list of contracted vendors.