Main Navigation

Main Nav


The main navigation on a page is a prominent set of links or menus typically positioned at the top of the interface, providing users with primary access to key sections or pages within the website or application.

On-page Example

To preview a live example of the component or inspect the code, click the link below

Main Navigation Example 

When to Use

When the UF brand and design system is required for your site. The main nav includes:

  • Secondary department word mark or logo
  • Offsite links and links back to the UF homepage
  • Main navigation for the site 
  • Utility Nav and options

When to Consider Something Else

If a smaller or simpler navigation will work for the page.

How to Use

Add provided code to your documents and edit navigation items as needed. 

Accessibility Tips

Try to avoid changing theme colors and make sure tabs are navigable with the Tab button.