California Design System

Header and navigation

A website header is the first section of a website. It’s usually the same throughout the site. Having the same header provides a consistent user experience.

On this page

  • Code
  • Anatomy
  • Guidance
  • Change log

There are three variations of our fully responsive header and navigation.

  • Side-nav which offers up to three levels of nested accordion navigation.
  • Top-nav-full offers two levels of nested navigation.
  • Top-nav-lite is meant for smaller scale sites and does not offer nested navigation.

Anatomy

  1. ca-site-logo for logo of department, agency, or office.
  2. header displaying department, agency, or office name.
  3. search - some sites have search in their homepage banner. You shouldn’t have two search fields on the same page.
  4. nav that takes users where they need to go
  5. utility-nav for things like an account login.

Side-nav

Eureka anatomy: 1:logo, 2:header, 3:search, 4:site-nav, 5:utility-nav

Top-nav

Horizon anatomy: 1:logo, 2:header, 3:search, 4:site-nav, 5:utility-nav

Top-nav-lite

Skyline anatomy: 1:logo, 2:header, 3:search, 4:site-nav, 5:utility-nav

Code

Here's our header and navigation HTML. The HTML for the different layouts is the same. The only thing you'll need to adjust is the format attribute in the ca-layout tag.

The setup is as follows:

  • Side-nav layout: format="". This is our default layout so format is null.
  • Top-nav-full layout: format="top-full"
  • Top-nav-lite layout: format="top-lite"
California Design Systemα0.0.1 
<ca-layout format="">
  <ca-site-menu>
    <a href="#content-nav" title="Menu">
      <ca-pic icon="bear-menu" format="burger"></ca-pic>
      <span class="visually-hidden">Menu</span>
    </a>
  </ca-site-menu>
  <ca-site-logo>
    <a href="/California-Design-System/pages/index">
      <svg width="80" height="82" viewBox="0 0 80 82" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_1506_25118)">
          <path d="M26.8588 17.1376V3.04688C12.8933 7.79347 2.36677 20.0374 0 35.0192H13.1283C14.967 27.2853 20.058 20.8086 26.8588 17.1376Z" fill="#007FB9"></path>
          <path d="M39.749 68.962C26.9008 68.962 16.1006 60.0067 13.1671 47.9766H0.0258789C3.13971 67.2254 19.7393 81.922 39.749 81.922C46.5176 81.922 52.8966 80.2372 58.4931 77.2662V61.4647C53.5921 66.1108 46.9974 68.962 39.749 68.962Z" fill="#007FB9"></path>
          <path d="M39.749 0.921875C39.749 0.921875 39.7426 0.921875 39.7394 0.921875V13.8819C39.7394 13.8819 39.7458 13.8819 39.749 13.8819C52.6487 13.8819 63.4875 22.9118 66.3631 35.0164H39.7329V47.9764H66.3309H79.4721C79.8166 45.8412 80.0002 43.6542 80.0002 41.4219C80.0002 19.0529 61.9773 0.921875 39.749 0.921875Z" fill="#007FB9"></path>
        </g>
        <defs>
          <clipPath id="clip0_1506_25118">
            <rect width="80" height="81" fill="white" transform="translate(0 0.921875)"></rect>
          </clipPath>
        </defs>
      </svg>
    </a>
  </ca-site-logo>
  <header>
    <a href="/California-Design-System/pages/index">
      <span>California</span>
      <span>Design System<sup>α0.0.1</sup></span>
    </a>
  </header>
  <ca-priority-bar>
    <search>
      <form>
        <label for="site-search" class="visually-hidden">Search this site</label>
        <input type="search" id="site-search" placeholder="Search">
        <button type="submit">
          <ca-pic icon="search"></ca-pic>
          <span class="visually-hidden">Search</span>
        </button>
      </form>
    </search>
  </ca-priority-bar>
  <ca-page-bar>
    <nav id="content-nav" aria-label="Content navigation">
      <ca-nav-menu>
        <ul>
          <li><a href="/California-Design-System/pages/get-started/index">Get started</a>
          </li>
          <li>
            <ca-nav-menu><a href="/California-Design-System/pages/design/index">Design</a>
              <ul>
                <li><a href="/California-Design-System/pages/design/principles">UX principles</a></li>
                <li><a href="/California-Design-System/pages/design/content">Content guidelines</a></li>
                <li><a href="/California-Design-System/pages/design/typography">Typography</a></li>
                <li><a href="/California-Design-System/pages/design/color">Color</a></li>
                <li><a href="/California-Design-System/pages/design/ui-kit">UI-kit</a></li>
              </ul>
            </ca-nav-menu>
          </li>
          <li>
            <ca-nav-menu><a href="/California-Design-System/pages/develop/index">Develop</a>
              <ul>
                <li><a href="/California-Design-System/pages/develop/development-checklist">Devleopment checklist</a></li>
              </ul>
            </ca-nav-menu>
          </li>
          <li>
            <ca-nav-menu><a href="/California-Design-System/pages/building-blocks/index">Building blocks</a>
              <ul>
                <li><a href="/California-Design-System/pages/building-blocks/ca-grid">CA-grid layout</a></li>
                <li><a href="/California-Design-System/pages/building-blocks/ca-flex">CA-flex layout</a></li>
                <li><a href="/California-Design-System/pages/building-blocks/header-navigation">Header | navigation</a></li>
                <li><a href="/California-Design-System/pages/building-blocks/cards">Cards</a></li>
                <li><a href="/California-Design-System/pages/building-blocks/tables">Tables</a></li>
                <!--<li><a href="/pages/building-blocks/alerts">Alerts</a></li>-->
                <li><a href="/California-Design-System/pages/building-blocks/footer">Footer</a></li>
              </ul>
            </ca-nav-menu>
          </li>
          <li><ca-nav-menu><a href="/California-Design-System/pages/building-blocks/index">Showcase</a></ca-nav-menu></li>
        </ul>
      </ca-nav-menu>
    </nav>
  </ca-page-bar>
</ca-layout>

Guidance

Content and digital designers

Do

  • Use Side-nav if you have a larger site, i.e., a deep information architecture.
  • Use Top-nav if your site is mid-sized.
  • Use Top-nav-lite for smaller sites with no sub-folders.

Don't

  • Use extremely long names for navigation or utility link text.

Developers

Tags, attributes, classes Description
ca-layout

This tag and, for example format="eureka" attribute sets the your global layout to the Eureka side navigation. Use format="horizon" or format="skyline" to achieve those layouts.

ca-site-menu Responsive navigation.
ca-icon Responsive navigation icon.
ca-site-logo Grid-template-area for your depatment's branding or logo w/ an anchor to the site's home page.
header Grid-template-area for the name of your department w/ an anchor to the site's home page.
ca-priority-bar Container for your search bar.
search Grid-template-area for your Search form.
ca-utility-bar Container for your utility navigation.
ca-utility-icon Container for your utilty icons.
nav Grid-template-areas and parent containers for utility and site navigation
ca-nav-menu

Containers for your site navigation and any nested navigation list items. When using Eureka or Horizon navigation, you can utilize nested navigation if you have a deeper information architecture.
format=""

This attribute is set on the ca-layout tag which will apply the appropriate CSS and JS for the Eureka, Horizon, or Skyline header/nav combos.

Accessibility

Element or property Description
aria-label="" Identifies a specified region on a page for asistive technologies.
title="" Assitive technologies read the title and it adds a tooltip to utility icons for our sighted uers.

Changelog

Date Version Affects Notes
04/07/2025 0.0.0.1 Entire system.

This is the first alpha release. We are still developing the header/nav. There may be some minor bugs that we're fixing