---
title: Identifier (React) - USWDS + Tailwind
description: Show a federal site's parent agency and required agency links with
  the identifier.
---

# Identifier

Show a federal site's parent agency and required agency links with the identifier.

## Examples

### Default

```tsx
import { Identifier } from '@uswds-tailwind/react/identifier'
import { Link } from '@uswds-tailwind/react/link'

export default function IdentifierDemo() {
  return (
    <Identifier.Root>
      <Identifier.Container>
        <Identifier.Masthead aria-label="Agency identifier">
          <Identifier.LogoGroup>
            <Identifier.Logo href="#" aria-label="Parent agency homepage">
              <span aria-hidden="true" className="flex size-12 items-center justify-center rounded-full bg-gray-30 font-bold text-gray-90">A</span>
            </Identifier.Logo>
          </Identifier.LogoGroup>
          <Identifier.Identity aria-label="Agency description">
            <Identifier.Domain>domain.gov</Identifier.Domain>
            <Identifier.Disclaimer>
              An official website of the
              {' '}
              <Link href="#" variant="light">Parent Agency</Link>
            </Identifier.Disclaimer>
          </Identifier.Identity>
        </Identifier.Masthead>
        <Identifier.RequiredLinks aria-label="Important links">
          <Identifier.RequiredLinksList>
            <Identifier.LinkItem><Identifier.Link href="#">About Parent Agency</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Accessibility statement</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">FOIA requests</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">No FEAR Act data</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Office of the Inspector General</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Performance reports</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Privacy policy</Identifier.Link></Identifier.LinkItem>
          </Identifier.RequiredLinksList>
        </Identifier.RequiredLinks>
        <Identifier.Tagline aria-label="U.S. government information and services">
          <p>
            Looking for U.S. government information and services?
            {' '}
            <Link href="https://www.usa.gov/" variant="light" isExternal className="font-bold block @desktop:inline">Visit USA.gov</Link>
          </p>
        </Identifier.Tagline>
      </Identifier.Container>
    </Identifier.Root>
  )
}
```

Replace the placeholder seal with your agency logo and update the agency name, domain, and required links for your site.

### Multiple parents and logos

```tsx
import { Identifier } from '@uswds-tailwind/react/identifier'
import { Link } from '@uswds-tailwind/react/link'

export default function IdentifierMultipleLogosDemo() {
  return (
    <Identifier.Root>
      <Identifier.Container>
        <Identifier.Masthead aria-label="Agency identifier">
          <Identifier.LogoGroup>
            <Identifier.Logo href="#" aria-label="Parent agency homepage">
              <span aria-hidden="true" className="flex size-12 items-center justify-center rounded-full bg-gray-30 font-bold text-gray-90">A</span>
            </Identifier.Logo>
            <Identifier.Logo href="#" aria-label="Partner agency homepage">
              <span aria-hidden="true" className="flex size-12 items-center justify-center rounded-full bg-gray-30 font-bold text-gray-90">B</span>
            </Identifier.Logo>
          </Identifier.LogoGroup>
          <Identifier.Identity aria-label="Agency description">
            <Identifier.Domain>domain.gov</Identifier.Domain>
            <Identifier.Disclaimer>
              An official website of the
              {' '}
              <Link href="#" variant="light">Parent Agency</Link>
              {' '}
              and the
              {' '}
              <Link href="#" variant="light">Partner Agency</Link>
            </Identifier.Disclaimer>
          </Identifier.Identity>
        </Identifier.Masthead>
        <Identifier.RequiredLinks aria-label="Important links">
          <Identifier.RequiredLinksList>
            <Identifier.LinkItem><Identifier.Link href="#">About Parent Agency</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Accessibility statement</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">FOIA requests</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">No FEAR Act data</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Office of the Inspector General</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Performance reports</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Privacy policy</Identifier.Link></Identifier.LinkItem>
          </Identifier.RequiredLinksList>
        </Identifier.RequiredLinks>
        <Identifier.Tagline aria-label="U.S. government information and services">
          <p>
            Looking for U.S. government information and services?
            {' '}
            <Link href="https://www.usa.gov/" variant="light" isExternal className="font-bold block @desktop:inline">Visit USA.gov</Link>
          </p>
        </Identifier.Tagline>
      </Identifier.Container>
    </Identifier.Root>
  )
}
```

### No logos

```tsx
import { Identifier } from '@uswds-tailwind/react/identifier'
import { Link } from '@uswds-tailwind/react/link'

export default function IdentifierNoLogosDemo() {
  return (
    <Identifier.Root>
      <Identifier.Container>
        <Identifier.Masthead aria-label="Agency identifier">
          <Identifier.Identity aria-label="Agency description">
            <Identifier.Domain>domain.gov</Identifier.Domain>
            <Identifier.Disclaimer>
              An official website of the
              {' '}
              <Link href="#" variant="light">Parent Agency</Link>
            </Identifier.Disclaimer>
          </Identifier.Identity>
        </Identifier.Masthead>
        <Identifier.RequiredLinks aria-label="Important links">
          <Identifier.RequiredLinksList>
            <Identifier.LinkItem><Identifier.Link href="#">About Parent Agency</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Accessibility statement</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">FOIA requests</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">No FEAR Act data</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Office of the Inspector General</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Performance reports</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Privacy policy</Identifier.Link></Identifier.LinkItem>
          </Identifier.RequiredLinksList>
        </Identifier.RequiredLinks>
        <Identifier.Tagline aria-label="U.S. government information and services">
          <p>
            Looking for U.S. government information and services?
            {' '}
            <Link href="https://www.usa.gov/" variant="light" isExternal className="font-bold block @desktop:inline">Visit USA.gov</Link>
          </p>
        </Identifier.Tagline>
      </Identifier.Container>
    </Identifier.Root>
  )
}
```

## Component API

Build the site identifier with masthead, required links, and optional identity and tagline blocks.

### Root `<div>`

Place Masthead and RequiredLinks inside Root.

### Container `<div>`

Constrains the content width.

### Masthead `<section>`

Contains logo and identity information.

### LogoGroup `<div>`

Groups one or more organization logos.

### Logo `<a>`

Links from an organization logo.

### Identity `<section>`

Holds identity text.

### Domain `<p>`

Shows the site domain.

### Disclaimer `<p>`

Shows the site disclaimer.

### RequiredLinks `<nav>`

Contains required site links.

### RequiredLinksList `<ul>`

Lists required destinations.

### LinkItem `<li>`

Wrap a Link for each required destination.

### Link `<a>`

Set href to the required destination.

### Tagline `<section>`

Holds a short agency tagline.