Skip to main content

afrigov is an open-source project. It is not a government website and is not affiliated with any government.

Previewing neutral core Change

afrigov Accessible government design system

Header and navigation

The organisation, the government it belongs to, and the primary navigation. Without JavaScript the navigation is always visible. With afrigov.js it collapses behind a Menu button below 1024px.

Ministry of Health The Government
Show HTML
<div class="ag-header">
  <div class="ag-container ag-header__inner">
    <a class="ag-header__brand" href="#header-example">
      <span class="ag-flag ag-flag--lg" aria-hidden="true"><span></span><span></span><span></span></span>
      <span>
        <span class="ag-header__org">Ministry of Health</span>
        <span class="ag-header__sub" data-docs-string="government">The Government</span>
      </span>
    </a>
    <nav class="ag-header__nav" aria-label="Example">
      <ul class="ag-nav">
        <li><a class="ag-nav__link" href="#header-example" aria-current="page">Services</a></li>
        <li><a class="ag-nav__link" href="#header-example">Hospitals</a></li>
        <li><a class="ag-nav__link" href="#header-example">News</a></li>
        <li><a class="ag-nav__link" href="#header-example">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>

With the menu button

Add the toggle and give the nav an id. The script hides the nav on small screens and wires the button.

<header class="ag-header">
  <div class="ag-container ag-header__inner">
    <a class="ag-header__brand" href="/">
      <img class="ag-header__logo" src="crest.svg" alt="">
      <span>
        <span class="ag-header__org">Ministry of Health</span>
        <span class="ag-header__sub">The Government</span>
      </span>
    </a>
    <button class="ag-header__toggle" type="button" aria-expanded="false" aria-controls="nav" data-ag-toggle>Menu</button>
    <nav class="ag-header__nav" id="nav" aria-label="Main">
      <ul class="ag-nav">
        <li><a class="ag-nav__link" href="/services" aria-current="page">Services</a></li>
        <li><a class="ag-nav__link" href="/news">News</a></li>
      </ul>
    </nav>
  </div>
</header>

Keep it on one row, or stack it on purpose

Beside the brand there is room for about six short links. When the name is long or there are more links, the navigation no longer fits and drops to a second row by accident, which makes the header taller on some screens and not others. Check the header at 1024 and 1280 pixels wide. If it does not fit, do one of three things:

  • Cut the links to six. Move the rest to the footer or to a section page.
  • Shorten the line under the name, or let it wrap to two lines by giving the brand a narrower width.
  • Use ag-header--stacked, which puts the navigation on its own row under the brand at every desktop width.

Stacked

Ministry of Water Resources, Sanitation and Irrigation The Government
Show HTML
<div class="ag-header ag-header--stacked">
  <div class="ag-container ag-header__inner">
    <a class="ag-header__brand" href="#header-stacked">
      <span class="ag-flag ag-flag--lg" aria-hidden="true"><span></span><span></span><span></span></span>
      <span>
        <span class="ag-header__org">Ministry of Water Resources, Sanitation and Irrigation</span>
        <span class="ag-header__sub" data-docs-string="government">The Government</span>
      </span>
    </a>
    <nav class="ag-header__nav" aria-label="Stacked example">
      <ul class="ag-nav">
        <li><a class="ag-nav__link" href="#header-stacked" aria-current="page">Home</a></li>
        <li><a class="ag-nav__link" href="#header-stacked">About</a></li>
        <li><a class="ag-nav__link" href="#header-stacked">Services</a></li>
        <li><a class="ag-nav__link" href="#header-stacked">Programmes</a></li>
        <li><a class="ag-nav__link" href="#header-stacked">News</a></li>
        <li><a class="ag-nav__link" href="#header-stacked">Publications</a></li>
        <li><a class="ag-nav__link" href="#header-stacked">Tenders</a></li>
        <li><a class="ag-nav__link" href="#header-stacked">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>

No jump on slow connections

The script that collapses the menu loads last, so on a slow phone the page can paint with the menu open and then jump when it closes. Three lines in the head, shown on Get started, set the ag-js class before the first paint, and the stylesheet keeps the menu closed from the start.

An agency's header

An agency uses the same header. Its own name goes in ag-header__org and the parent in ag-header__sub: "NIPOST" over "An agency of the Federal Ministry of Communications, Innovation and Digital Economy". The crest is the agency's own, or the national one.

Crest or logo

Most ministries put the national coat of arms or their own crest in the header. Use the ag-header__logo slot with an image, in place of the flag or next to it. The organisation name is written beside it, so the image is decorative and gets alt="". Add ag-header__logo--lg when the organisation name runs to three lines, so the crest keeps up with it. 

<a class="ag-header__brand" href="/">
  <img class="ag-header__logo" src="/images/coat-of-arms.svg" alt="">
  <span>
    <span class="ag-header__org">Ministry of Health</span>
    <span class="ag-header__sub">The Government</span>
  </span>
</a>

afrigov ships flags in the country packs but not coats of arms. Flags are free to reproduce; in most countries the coat of arms may only be used by government bodies or with permission, so each ministry supplies its own file. Keep it under 10 KB as an SVG, and 40px tall is enough.

With search

A square search button goes after the navigation and opens the search box under the header. See Search for the markup.

Variant: primary-coloured header

Ministry of Health The Government
Show HTML
<div class="ag-header ag-header--primary">
  <div class="ag-container ag-header__inner">
    <a class="ag-header__brand" href="#header-example">
      <span>
        <span class="ag-header__org">Ministry of Health</span>
        <span class="ag-header__sub" data-docs-string="government">The Government</span>
      </span>
    </a>
    <nav class="ag-header__nav" aria-label="Example, primary">
      <ul class="ag-nav">
        <li><a class="ag-nav__link" href="#header-example" aria-current="page">Services</a></li>
        <li><a class="ag-nav__link" href="#header-example">Hospitals</a></li>
      </ul>
    </nav>
  </div>
</div>

Section menus

A navigation item can open a short list of links. It opens on a click or a tap, never on hover, and it is a native disclosure, so it works with no script: the browser handles opening, closing and the keyboard. The script adds one menu open at a time, Escape to close, and closing when anything else on the page is clicked.

National Water Agency The Government
Show HTML
<div class="ag-header">
  <div class="ag-container ag-header__inner">
    <a class="ag-header__brand" href="#header-menu">
      <span>
        <span class="ag-header__org">National Water Agency</span>
        <span class="ag-header__sub" data-docs-string="government">The Government</span>
      </span>
    </a>
    <nav class="ag-header__nav" aria-label="Example with section menus">
      <ul class="ag-nav">
        <li><a class="ag-nav__link" href="#header-menu" aria-current="page">Home</a></li>
        <li class="ag-nav__section">
          <details class="ag-nav__details" data-ag-menu>
            <summary class="ag-nav__link ag-nav__summary">Services</summary>
            <ul class="ag-nav__menu">
              <li><a class="ag-nav__menu-link" href="#header-menu">All services</a></li>
              <li><a class="ag-nav__menu-link" href="#header-menu">Report a leak</a></li>
              <li><a class="ag-nav__menu-link" href="#header-menu">Check your water quality</a></li>
              <li><a class="ag-nav__menu-link" href="#header-menu">Pay a bill</a></li>
              <li><a class="ag-nav__menu-link" href="#header-menu">Apply for a connection</a></li>
            </ul>
          </details>
        </li>
        <li class="ag-nav__section">
          <details class="ag-nav__details" data-ag-menu>
            <summary class="ag-nav__link ag-nav__summary">About</summary>
            <ul class="ag-nav__menu">
              <li><a class="ag-nav__menu-link" href="#header-menu">About the agency</a></li>
              <li><a class="ag-nav__menu-link" href="#header-menu">Leadership</a></li>
              <li><a class="ag-nav__menu-link" href="#header-menu">Reports</a></li>
            </ul>
          </details>
        </li>
        <li><a class="ag-nav__link" href="#header-menu">News</a></li>
        <li><a class="ag-nav__link" href="#header-menu">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>
  • The first link in every menu is the section's own page, so every page can be reached by someone who never opens a menu, and by a search engine.
  • Up to about eight links in a menu. More than that is a section page with cards.
  • In the collapsed menu on a phone, a section expands in place, as a row that opens. On a desktop the list drops below the item as a panel.
  • Mark the current page's link with aria-current="page" inside the menu, and the section itself with aria-current="true" on the summary.
  • Links that are not in a section stay plain links. Mix the two freely.

Variant: with the flag stripe

ag-header--striped replaces the bottom border with a line in the country's flag colours. It works with the primary and stacked variants. See flag stripe.

Ministry of Health The Government
Show HTML
<div class="ag-header ag-header--striped">
  <div class="ag-container ag-header__inner">
    <a class="ag-header__brand" href="#header-striped">
      <span>
        <span class="ag-header__org">Ministry of Health</span>
        <span class="ag-header__sub" data-docs-string="government">The Government</span>
      </span>
    </a>
    <nav class="ag-header__nav" aria-label="Example, striped">
      <ul class="ag-nav">
        <li><a class="ag-nav__link" href="#header-striped" aria-current="page">Services</a></li>
        <li><a class="ag-nav__link" href="#header-striped">Hospitals</a></li>
      </ul>
    </nav>
  </div>
</div>

Accessibility

  • Mark the current page with aria-current="page". It is shown with a bar and announced.
  • Give the nav an aria-label. If there are two navs on the page, give them different ones.
  • Logos are decorative when the organisation name is written next to them: use alt="".
  • The menu button sets aria-expanded and closes on Escape, returning focus to the button.
  • Keep it to six items across. A section menu counts as one.
  • A section menu is a details element. Screen readers announce it as a disclosure, say whether it is open, and read the links inside it as a list.

Pack fields

government for the sub line, flag if you use the flag as the mark.