---
title: Banner (Vanilla) - USWDS + Tailwind
description: Add a government banner so visitors can identify an official U.S.
  government website and check its security information.
---

# Banner

Add a government banner so visitors can identify an official U.S. government website and check its security information.

These examples use the following JavaScript initializers:

* [Collapse](https://v2.uswds-tailwind.com/docs/vanilla/javascript#collapse)

## Usage

```html
<section
  data-scope="collapse" data-part="root"
  class="@container bg-gray-5 group"
  aria-label="Official website of the United States government"
>
  <header
    class="flex text-xs gap-2 @tablet:items-center pl-4 pr-12 @tablet:pr-4 @tablet:px-8 py-2 @tablet:py-1 mx-auto max-w-5xl min-h-12 @tablet:min-h-0 leading-tight @tablet:leading-none relative"
  >
    <div class="shrink-0 w-4">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewbox="0 0 64 64"
      >
        <path fill="#DB3E1F" d="M32 10h32v4H32zM32 18h32v4H32zM32 26h32v4H32zM32 34h32v4H32zM0 42h64v4H0zM0 50h64v4H0z"/><path fill="#fff" d="M32 14h32v4H32zM32 22h32v4H32zM32 30h32v4H32z"/><path fill="#fff" d="M32 30h32v4H32zM0 46h64v4H0zM0 38h64v4H0z"/><path fill="#fff" d="M0 38h64v4H0z"/><path fill="#1D33B1" d="M0 10h32v28H0z"/><path fill="#fff" d="M4 14h4v4H4zM8 22h4v4H8zM4 30h4v4H4zM12 14h4v4h-4zM16 22h4v4h-4zM12 30h4v4h-4zM20 14h4v4h-4zM24 22h4v4h-4zM20 30h4v4h-4z"/>
      </svg>
    </div>
    <div class="@tablet:flex @tablet:gap-2 @tablet:items-center">
      <div>
        <p>An official website of the United States government</p>
      </div>
      <button
        type="button"
        data-scope="collapse" data-part="trigger"
        class="group text-blue-60v cursor-pointer inline-flex items-center underline @max-tablet:data-[state=open]:text-transparent focus:outline-0 @tablet:focus:outline-4 @tablet:focus:outline-blue-40v @max-tablet:after:absolute after:inset-0 focus:after:outline-4 focus:after:-outline-offset-4 focus:after:outline-blue-40v"
      >
        Here&#8217;s how you know
        <span class="icon-[material-symbols--expand-more] size-4 group-data-[state=open]:rotate-180"></span>
      </button>
    </div>
    <div
      aria-hidden="true"
      class="hidden group-data-[state=open]:flex @tablet:group-data-[state=open]:hidden items-center justify-center absolute right-0 top-0 bottom-0 bg-gray-10 size-12 pointer-events-none"
    >
      <span class="icon-[material-symbols--close] text-blue-60v size-6"></span>
    </div>
  </header>
  <div
    data-scope="collapse" data-part="content"
    class="py-6 px-3 grid @tablet:grid-cols-2 gap-6 mx-auto max-w-5xl not-data-[state=open]:hidden"
  >
    <div class="flex gap-2">
      <div
        aria-hidden="true"
        class="rounded-full border border-blue-50 text-blue-50 size-10 shrink-0 justify-center items-center flex"
      >
        <span class="icon-[material-symbols--account-balance] size-5 align-middle"></span>
      </div>
      <div>
        <p>
          <span class="font-bold">Official websites use .gov</span>
        </p>
        <p>
          A
          <span class="font-bold">.gov</span>
          website belongs to an official government organization in the United States.
        </p>
      </div>
    </div>
    <div class="flex gap-2">
      <div
        aria-hidden="true"
        class="rounded-full border border-green-40v text-green-40v size-10 shrink-0 justify-center items-center flex"
      >
        <span class="icon-[material-symbols--lock] size-5 align-middle"></span>
      </div>
      <div>
        <p>
          <span class="font-bold">Secure .gov websites use HTTPS</span>
        </p>
        <p>
          A
          <span class="font-bold">lock</span>
          (<span class="icon-[material-symbols--lock] size-4 align-middle"></span>) or
          <span class="font-bold">https://</span>
          means you've safely connected to the .gov website. Share sensitive information only on official, secure
          websites.
        </p>
      </div>
    </div>
  </div>
</section>
```

## Component API

### Initialization

Run after the component markup exists:

```js
import { collapseInit } from '@uswds-tailwind/compat/collapse'

collapseInit()
```

Banner uses Collapse; there is no separate Banner initializer.

### Anatomy

Set authored attributes in your HTML. The component manages generated attributes. Types describe HTML attribute values.

#### `root`

The banner section.

| Attribute | Type | Description |
| - | - | - |
| `data-scope` | `"collapse"` | **Authored.** Identifies the component scope. |
| `data-part` | `"root"` | **Authored.** Identifies this part. |
| `aria-label` | `string` | **Authored.** Descriptive name for the banner landmark. |
| `data-state` | `"open" \| "closed"` | **Authored.** Use `"open"` to expand initially; defaults to closed. |
| `data-state` | `"open" \| "closed"` | **Generated.** `"open"` or `"closed"`; use for styling. |

#### `trigger`

A native button with descriptive text.

| Attribute | Type | Description |
| - | - | - |
| `data-part` | `"trigger"` | **Authored.** Identifies this part. |
| `data-state` | `"open" \| "closed"` | **Generated.** `"open"` or `"closed"`; use for styling. |
| `aria-expanded` | `"true" \| "false"` | **Generated.** Whether the content is expanded. |
| `aria-controls` | `ID reference` | **Generated.** ID of the associated content. |

#### `content`

The expandable panel. Keep it inside the same root as its trigger.

| Attribute | Type | Description |
| - | - | - |
| `data-part` | `"content"` | **Authored.** Identifies this part. |
| `data-state` | `"open" \| "closed"` | **Generated.** `"open"` or `"closed"`; use for styling. |
| `hidden` | `boolean attribute` | **Generated.** Present when closed. |

### Configuration

Pass these JavaScript options to the instance constructor or factory. Authored configuration attributes are read during construction.

| Option | Description |
| - | - |
| `defaultOpen` | Initial uncontrolled open state; overrides the authored initial state. |
| `open` | Controlled open state. Your application must supply the updated value after a change callback. |
| `id, ids` | Customize the instance identifier and generated element IDs. |

### Methods

| Method | Returns | Description |
| - | - | - |
| `open()` | `Promise<void>` | Requests expansion. |
| `close()` | `Promise<void>` | Requests collapse. |
| `destroy()` | `void` | Stops the instance and clears its lookup. |

```js
import { Collapse } from '@uswds-tailwind/compat/collapse'

const banner = Collapse.getOrCreateInstance(
  '[data-scope="collapse"][data-part="root"]',
)

await banner.open()
```

Promises settle the queued update, not CSS transitions. When using controlled state, your application must supply the updated value.

See [initialization and cleanup](https://v2.uswds-tailwind.com/docs/vanilla/javascript#instance-lifecycle).

### Callbacks

| Callback | Payload | When it runs |
| - | - | - |
| `onOpenChange` | `{ open: boolean }` | An open-state change is requested. |

Pass callbacks in instance options. These are JavaScript functions, not emitted DOM events.

### Accessibility

* Supply the landmark name, banner copy, and visible focus styles.
* Use Enter or Space to activate the native button.