---
title: Navigation (Vanilla) - USWDS + Tailwind
description: Build primary site navigation with links, nested menus, and an
  optional mobile drawer.
---

# Navigation

Build primary site navigation with links, nested menus, and an optional mobile drawer.

## Examples

```html
<nav aria-label="Primary navigation" class="border-b border-gray-20">
<ul class="flex flex-wrap list-none p-0 m-0">
  <li><a href="#services" class="block p-4 font-bold text-blue-60v hover:underline focus:outline-4 focus:outline-blue-40v">Services</a></li>
  <li><a href="#about" class="block p-4 font-bold text-blue-60v hover:underline focus:outline-4 focus:outline-blue-40v">About</a></li>
</ul>
</nav>
```

## Component API

### Markup

Use a labeled `<nav>` with a list of links. For a collapsible mobile menu, use [Modal](https://v2.uswds-tailwind.com/docs/vanilla/components/modal) markup and call `modalInit()`. For nested menus, use [Dropdown](https://v2.uswds-tailwind.com/docs/vanilla/components/dropdown) markup and call `dropdownInit()`.