---
title: Header (React) - USWDS + Tailwind
description: Identify your site and connect visitors to its main sections with
  default and extended header layouts.
---

# Header

Identify your site and connect visitors to its main sections with default and extended header layouts.

## Examples

### Default

```tsx
import { Header, Nav } from '@uswds-tailwind/react'

export default function HeaderDemo() {
  return (
    <Header.Root>
      <Nav.Root>
        <Header.Primary>
          <Header.Container>
            <Header.Branding>
              <em className="font-bold not-italic">
                <a className="text-gray-90 focus:outline-4 focus:outline-blue-40v" href="/">Project Title</a>
              </em>
            </Header.Branding>
            <Nav.Trigger>Menu</Nav.Trigger>
            <Nav.Backdrop />
            <Nav.Positioner>
              <Nav.Content>
                <Nav.CloseTrigger />
                <Nav.List>
                  <Nav.ListItem>
                    <Nav.Dropdown>
                      <Nav.DropdownTrigger isCurrent>
                        Section one <Nav.DropdownIndicator />
                      </Nav.DropdownTrigger>
                      <Nav.DropdownContent>
                        <Nav.DropdownItem value="one-a"><Nav.DropdownLink href="#">Sub-link one</Nav.DropdownLink></Nav.DropdownItem>
                        <Nav.DropdownItem value="one-b"><Nav.DropdownLink href="#">Sub-link two</Nav.DropdownLink></Nav.DropdownItem>
                      </Nav.DropdownContent>
                    </Nav.Dropdown>
                  </Nav.ListItem>
                  <Nav.ListItem>
                    <Nav.Dropdown>
                      <Nav.DropdownTrigger>Section two <Nav.DropdownIndicator /></Nav.DropdownTrigger>
                      <Nav.DropdownContent>
                        <Nav.DropdownItem value="two-a"><Nav.DropdownLink href="#">Sub-link one</Nav.DropdownLink></Nav.DropdownItem>
                        <Nav.DropdownItem value="two-b"><Nav.DropdownLink href="#">Sub-link two</Nav.DropdownLink></Nav.DropdownItem>
                      </Nav.DropdownContent>
                    </Nav.Dropdown>
                  </Nav.ListItem>
                  <Nav.ListItem><Nav.Link href="#">Link</Nav.Link></Nav.ListItem>
                </Nav.List>
              </Nav.Content>
            </Nav.Positioner>
          </Header.Container>
        </Header.Primary>
      </Nav.Root>
    </Header.Root>
  )
}
```

### Extended

```tsx
import { Header, Nav, Search } from '@uswds-tailwind/react'

export default function HeaderExtendedDemo() {
  return (
    <Header.Root variant="extended">
      <Nav.Root>
        <Header.Primary>
          <Header.Container>
            <Header.Branding size="lg">
              <em className="font-bold not-italic">
                <a className="text-gray-90 focus:outline-4 focus:outline-blue-40v" href="/">Project Title</a>
              </em>
            </Header.Branding>
            <Nav.Trigger>Menu</Nav.Trigger>
          </Header.Container>
        </Header.Primary>
        <Header.Extended>
          <Nav.Backdrop />
          <Nav.Positioner>
            <Nav.Content>
              <Nav.CloseTrigger />
              <Nav.List>
                <Nav.ListItem>
                  <Nav.Dropdown>
                    <Nav.DropdownTrigger isCurrent>Current section <Nav.DropdownIndicator /></Nav.DropdownTrigger>
                    <Nav.DropdownContent>
                      <Nav.DropdownItem value="current-one"><Nav.DropdownLink href="#">Navigation link</Nav.DropdownLink></Nav.DropdownItem>
                      <Nav.DropdownItem value="current-two"><Nav.DropdownLink href="#">Navigation link</Nav.DropdownLink></Nav.DropdownItem>
                    </Nav.DropdownContent>
                  </Nav.Dropdown>
                </Nav.ListItem>
                <Nav.ListItem>
                  <Nav.Dropdown>
                    <Nav.DropdownTrigger>Section <Nav.DropdownIndicator /></Nav.DropdownTrigger>
                    <Nav.DropdownContent>
                      <Nav.DropdownItem value="section-one"><Nav.DropdownLink href="#">Navigation link</Nav.DropdownLink></Nav.DropdownItem>
                      <Nav.DropdownItem value="section-two"><Nav.DropdownLink href="#">Navigation link</Nav.DropdownLink></Nav.DropdownItem>
                    </Nav.DropdownContent>
                  </Nav.Dropdown>
                </Nav.ListItem>
                <Nav.ListItem><Nav.Link href="#">Simple link</Nav.Link></Nav.ListItem>
              </Nav.List>
              <Header.SecondaryNav>
                <Header.SecondaryList>
                  <Header.SecondaryItem><Header.SecondaryLink href="#">Secondary link</Header.SecondaryLink></Header.SecondaryItem>
                  <Header.SecondaryItem><Header.SecondaryLink href="#">Another secondary link</Header.SecondaryLink></Header.SecondaryItem>
                </Header.SecondaryList>
                <section aria-label="Site search">
                  <form role="search" className="w-full @desktop:max-w-64">
                    <Search.Root size="sm">
                      <Search.Label>Search</Search.Label>
                      <Search.Input />
                      <Search.Button />
                    </Search.Root>
                  </form>
                </section>
              </Header.SecondaryNav>
            </Nav.Content>
          </Nav.Positioner>
        </Header.Extended>
      </Nav.Root>
    </Header.Root>
  )
}
```

## Component API

Compose branding and navigation inside Root. Use the Extended and SecondaryNav parts for the extended layout.

### Root `<header>`

Supplies the header layout to its children.

| Prop | Type | Default | Description |
| - | - | - | - |
| `variant` | `default \| extended` | `default` | Selects the header layout. |

### Container `<div>`

Constrains header content width.

### Branding `<div>`

Holds agency identity.

| Prop | Type | Default | Description |
| - | - | - | - |
| `size` | `md \| lg` | `md` | Sets the branding text size. |

### Primary `<div>`

Place the main navigation beside Branding.

### Extended `<div>`

Arranges extended header content.

### SecondaryNav `<div>`

Contains secondary navigation.

### SecondaryList `<ul>`

Lists secondary destinations.

### SecondaryItem `<li>`

Wrap a SecondaryLink in each list item.

### SecondaryLink `<a>`

Use this for a destination in SecondaryList.