Service Navigation

Use service navigation to help users navigate between different sections of a complex service. It appears below the main header.

When to Use

• When a service has multiple distinct sections
• When users need to move between sections non-linearly
• For account dashboards with multiple features

When Not to Use

• For simple linear services - use the back link instead
• For site-wide navigation - use the main header navigation
• When there are only 2-3 pages - consider a simpler approach

Default Service Navigation

<nav class="service-navigation" aria-label="Service">
  <ul class="service-navigation-list">
    <li class="service-navigation-item">
      <a href="#" class="service-navigation-link" aria-current="page">Dashboard</a>
    </li>
    <li class="service-navigation-item">
      <a href="#" class="service-navigation-link">Applications</a>
    </li>
    <li class="service-navigation-item">
      <a href="#" class="service-navigation-link">Messages</a>
    </li>
    <li class="service-navigation-item">
      <a href="#" class="service-navigation-link">Settings</a>
    </li>
  </ul>
</nav>

With Service Name

<nav class="service-navigation" aria-label="Service">
  <div class="service-navigation-inner">
    <span class="service-navigation-name">Tax Account</span>
    <ul class="service-navigation-list">
      <!-- Navigation items -->
    </ul>
  </div>
</nav>

With Notification Badge

<a href="#" class="service-navigation-link">
  Messages
  <span class="service-navigation-badge">3</span>
  <span class="visually-hidden">unread messages</span>
</a>

Mobile Behaviour

On smaller screens, the navigation can scroll horizontally or collapse into a dropdown menu.

Accessibility

• Use aria-label="Service" to distinguish from other navigation
• Mark the current page with aria-current="page"
• Notification badges should include visually hidden text for screen readers
• Ensure sufficient touch targets on mobile (at least 44x44 pixels)

Placement

Place service navigation directly below the main site header, above the page content.

<header class="header">
  <!-- Main header content -->
</header>
<nav class="service-navigation" aria-label="Service">
  <!-- Service navigation -->
</nav>
<main>
  <!-- Page content -->
</main>