Main Navigation

Description

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.