Site navigation appears at the top of every page on your site. It gives links to pages in the site, sometimes ordered by topic, task, or user type. This makes it easier for people to navigate the website.
There are two options for each site navigation item:
- A link to a page
- Text with a dropdown menu of links
State Web Template navigation types and variations include:
- Single level menu
- Dropdown menu
- Icon menu
The site navigation component is made to switch between desktop and mobile presentations. On desktop, the top level links or text are arranged across the top of the page. On mobile, they are in a hamburger menu that people select to expand. The links in the hamburger menu are stacked.
Single level menu
This page is using the Single Level Navigation. This navigation style does not include a dropdown for sub navigation items.
Dropdown menu is using the dropdown sub navigation.
The flex megamenu displays dropdown panels for sub navigation when the user clicks on a primary link.
.sub-nav container use flexbox row div
.second-level-nav with class
added to it. Class
flex will ensure equal inline distribution of
<div class="sub-nav"> <div class="second-level-nav flex"> <a href="/" class="second-level-link">Link 1</a> <a href="/" class="second-level-link">Link 2</a> <a href="/" class="second-level-link">Link 3</a> </div> </div>
To add border around sub-navigation link units add class
.with-border to the
.second-level-nav div container.
Mixed Content Within Navigation
The megamenu allows for the display optional icons or images with sub navigation links.
It is also possible to display a short description below each sub navigation link. To display icon
of the link use
span with appropriate ca-gov-icon icon class from our CA Gov icon font
To make an icon bigger use desired font size class such as
To display small images on the left or right side of the link use
.with-image-right on the div container containing the media.
Link with large icon markup example:
Link with left image markup example:
Navigation with icons usually appears to the right of the site logo. It uses icons from CAGov font library inside of the first level navigation items.
HTML Source code
Structurally, navigation with icons is set up differently than full width navigation. The code samples bellow show the difference between them.
Navigation with icons markup:
<div class="navigation-search"> ❴% include "/src/_includes/navigation.njk" %❵ <div id="head-search" class="search-container"> ❴% include "/src/_includes/search.njk" %❵ </div> </div>
Full width navigation markup:
<div class="navigation-search full-width-nav container"> <div id="head-search" class="search-container featured-search"> ❴% include "/src/_includes/search.njk" %❵ </div> ❴% include "/src/_includes/navigation.njk" %❵ </div>
When and how to use it
Use site navigation to help people find pages on your website. It should list or lead to the most helpful content on your website.
Links can be organized into sections or can stand alone. Sections can be organized by:
- Top tasks
- Major topic areas
- Audience or user groups
You can use a card sorting activity to determine what should go in and how to organize your site navigation.
How not to use it
Do not overload the site navigation with too many pages. And avoid using more than a handful of navigational items. This makes it difficult for people to find what they're looking for. Make sure any pages not in the site navigation can be reached through a page in the site navigation or the site footer.
Do not link to PDFs or external sites in the site navigation.
Standard accessibility review
Each time a new component version is published: