Collapse

Documentation for the <Disclosure /> dropdown component. Learn about the available props and their use.

Installation#

Collapse (Disclosure) is part of a set of unstyled and fully accessible components created by Headless UI.
See the Headless UI documentation to learn more.

To get started, install Headless UI via yarn.

# Yarn

yarn add @headlessui/react

Basic Example#

A Collapse, as its name suggests, consists of a content area that can be collapsed and expanded.

According to Headless UI, Disclosure (Collapse) is built using the Disclosure, Disclosure.Button and Disclosure.Panel components.

import { Disclosure } from "@headlessui/react";

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <Disclosure>
        <Disclosure.Button>
          Collapsible item (Click here)
        </Disclosure.Button>
        <Disclosure.Panel>
          Lorem ipsum dolor sit amet...
        </Disclosure.Panel>
      </Disclosure>

      {/* ... */}
    </main>
  )
}

The previous example describes the simplest way of implementing the Disclosure (Collapse) component, which renders as follows:

Styling collapse#

Disclosure (Collapse) can be customized, as well as its child components; the following example is customized to support hover and focus states, including responsive mobile styles.

NOTE: Inspect and apply mobile breakpoints in order to see the Collapse component adapting to corresponding styles.

import { Disclosure } from "@headlessui/react";
import { CaretDownIcon, CaretRightIcon, UnionIcon } from "@exponentialeducation/iconography";

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <Disclosure>
        {({ open }) => (
          <div className="flex flex-col gap-y-5 bg-white border border-transparent px-4 py-5 rounded shadow-sm w-full hover:shadow focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-200">
            <Disclosure.Button className="flex justify-between md:items-center p-0 text-surface-600 w-full focus:outline-none">
              <div className="flex md:items-center mr-auto gap-3">
                <div className="flex justify-center items-center bg-primary-100 text-primary-500 rounded p-2 w-10 h-10 max-h-10">
                  <UnionIcon className="w-5 h-5" />
                </div>
                <div className="flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-3">
                  <span className="font-rubik text-base text-surface-400 leading-6">
                    Módulo 1
                  </span>
                  <span className="font-montserrat font-bold text-xl text-surface-600 text-left leading-7">
                    ¿Cuáles son los requisitos del curso?
                  </span>
                </div>
              </div>
              {
                open ?
                  <CaretDownIcon className="w-6 h-6" />
                  : <CaretRightIcon className="w-6 h-6" />
              }
            </Disclosure.Button>
            <Disclosure.Panel className="font-rubik text-base text-surface-600 leading-7">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit...
            </Disclosure.Panel>
          </div>
        )}
      </Disclosure>

      {/* ... */}
    </main>
  )
}

Collapse sekeletons#

When fetching content or loading application states, Collapse can be customized with Skeleton styles to give a hint to users about information being loaded.

import { Disclosure } from "@headlessui/react";

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <Disclosure>
        <div className="flex flex-col gap-y-5 bg-white border border-transparent px-4 py-5 rounded shadow-sm w-full hover:shadow">
          <Disclosure.Button className="flex justify-between p-0 w-full focus:outline-none">
            <div className="flex mr-auto gap-3 w-full md:hidden">
              <div className="bg-surface-50 rounded w-10 h-10 max-h-10" />
              <div className="flex flex-col items-start gap-1 w-full">
                <div className="bg-surface-50 rounded w-16 h-6" />
                <div className="bg-surface-50 rounded w-full h-14" />
              </div>
            </div>
            <div className="mr-auto bg-surface-50 rounded w-3/5 h-10 hidden md:block" />
            <div className="bg-surface-50 rounded w-6 h-6" />
          </Disclosure.Button>
          <Disclosure.Panel className="bg-surface-50 rounded w-full h-36 md:h-14" />
        </div>
      </Disclosure>

      {/* ... */}
    </main>
  )
}

To customize and learn about the Disclosure (Collapse) component see the Headless UI documentation.