Collapsible

An interactive component which expands/collapses a panel.

<div class="flex w-[350px] flex-col gap-2 group/collapsible">
    <div class="flex items-center justify-between gap-4">
        <h4 class="text-sm font-semibold">
            @@ibnbattuta has 3 bookings
        </h4>
        <dui-button variant="ButtonVariant.Ghost" size="ButtonSize.Icon" commandfor="my-collapsible" command="--toggle" class="size-8">
            <dui-icon name="chevrons-up-down" class="in-aria-expanded:hidden"/>
            <dui-icon name="chevrons-down-up" class="not-in-aria-expanded:hidden"/>
            <span class="sr-only">Toggle</span>
        </dui-button>
    </div>
    <dui-item variant="ItemVariant.Outline" size="ItemSize.Small">
        <dui-item-media>
            <img
                class="object-cover size-12 rounded"
                src="https://images.unsplash.com/photo-1681785841804-4d8a976ee892?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670"/>
        </dui-item-media>
        <dui-item-content>
            <dui-item-title>Non-stop to NYC (JFK)</dui-item-title>
            <dui-item-description>Departure 8AM - Dec 24, 2025</dui-item-description>
        </dui-item-content>
    </dui-item>
    <dui-collapsible id="my-collapsible" hidden="" class="flex flex-col gap-2">
        <dui-item variant="ItemVariant.Outline" size="ItemSize.Small">
            <dui-item-media>
                <img
                    class="object-cover size-12 rounded"
                    src="https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670"/>
            </dui-item-media>
            <dui-item-content>
                <dui-item-title>The Grand Resort & Spa</dui-item-title>
                <dui-item-description>Check-in Dec 25 | 7 Nights</dui-item-description>
            </dui-item-content>
        </dui-item>
        <dui-item variant="ItemVariant.Outline" size="ItemSize.Small">
            <dui-item-media>
                <img
                    class="object-cover size-12 rounded"
                    src="https://images.unsplash.com/photo-1557223562-6c77ef16210f?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670"/>
            </dui-item-media>
            <dui-item-content>
                <dui-item-title>Westminster Abbey Tour</dui-item-title>
                <dui-item-description>Dec 26, 11:00 AM Slot | 2 Adult Tickets</dui-item-description>
            </dui-item-content>
        </dui-item>
    </dui-collapsible>
</div>

Usage

<dui-button commandfor="my-collapsible" command="--toggle">
    <!-- add the element that triggers the collapsible content here -->
</dui-button>
<dui-collapsible id="my-collapsible" hidden="">
    <!-- add the collapsible content here -->
</dui-collapsible>

Examples

Settings

<dui-card class="mx-auto w-[350px]" size="CardSize.Small">
  <dui-card-header>
    <dui-card-title>Radius</dui-card-title>
    <dui-card-description>
      Set the corner radius of the element.
    </dui-card-description>
  </dui-card-header>
  <dui-card-content>
    <div class="flex items-start gap-2 group/collapsible">
      <dui-field-group class="grid w-full grid-cols-2 gap-2">
        <dui-field>
          <dui-field-label for="radius-x-1" class="sr-only">
            Radius X
          </dui-field-label>
          <dui-input id="radius-x-1" placeholder="0"/>
        </dui-field>
        <dui-field>
          <dui-field-label for="radius-y-1" class="sr-only">
            Radius Y
          </dui-field-label>
          <dui-input id="radius-y-1" placeholder="0"/>
        </dui-field>
        <dui-collapsible id="collapsible-settings" hidden="" class="col-span-full grid grid-cols-subgrid gap-2">
          <dui-field>
            <dui-field-label for="radius-x-2" class="sr-only">
              Radius X
            </dui-field-label>
            <dui-input id="radius-x-2" placeholder="0"/>
          </dui-field>
          <dui-field>
            <dui-field-label for="radius-y-2" class="sr-only">
              Radius Y
            </dui-field-label>
            <dui-input id="radius-y-2" placeholder="0"/>
          </dui-field>
        </dui-collapsible>
      </dui-field-group>
      <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon" commandfor="collapsible-settings" command="--toggle">
        <dui-icon name="minimize" class="not-in-aria-expanded:hidden"/>
        <dui-icon name="maximize" class="in-aria-expanded:hidden"/>
      </dui-button>
    </div>
  </dui-card-content>
</dui-card>

API Reference

<dui-collapsible>

The <dui-collapsible> tag helper renders a <del-collapsible> custom element and has no attributes of its own; it forwards any standard global attributes (such as id, class, or hidden) to the rendered element. Give it an id (and the hidden attribute to start collapsed), and toggle it via the native Invoker Commands API using a button with command="--toggle" and commandfor referencing that id.

Breadcrumb

Breadcrumbs provide navigation context and allow users to quickly navigate the current page's hierarchy

Pagination

Allow users to navigate between multiple pages of data

On this page

UsageExamplesSettingsAPI Reference<dui-collapsible>