Dropdown examples

Show params

Params

params:
- name: text
  type: string
  required: true
  description: If `html` is set, this is not required. Text for the dropdown. If `html` is provided, the `text` argument will be ignored.
- name: html
  type: string
  required: true
  description: If `text` is set, this is not required. HTML for the dropdown. If `html` is provided, the `text` argument will be ignored.
- name: hiddenText
  type: string
  required: false
  description: Text for screenreaders only after the dropdown element.
- name: classesContainer
  type: string
  required: false
  description: Classes to add to the container div of dropdown and tooltip elements.
- name: classesTooltip
  type: string
  required: false
  description: Classes to add to the tooltip content.
- name: classes
  type: string
  required: false
  description: Classes to add to the dropdown element.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the dropdown element.
- name: caller
  type: nunjucks-block
  required: false
  description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire dropdown component in a `call` block.

default

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Default",
  "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
})  %}
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall %}

Markup



<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown" data-module="c-dropdown-button" aria-haspopup="true" >
    <span class="inline-flex self-center max-w-xs align-middle truncate">Default</span>
      <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></button>
  <div class="-ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip" >
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
  </div>
</div>
<!-- /dropdown -->

with active state

Simulate triggering the :active CSS pseudo-class, not available in the production build.

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Active",
  "classes": "ds-active",
  "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
})  %}
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall %}

Markup



<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown ds-active" data-module="c-dropdown-button" aria-haspopup="true" >
    <span class="inline-flex self-center max-w-xs align-middle truncate">Active</span>
      <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></button>
  <div class="-ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip" >
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
  </div>
</div>
<!-- /dropdown -->

with hover state

Simulate triggering the :hover CSS pseudo-class, not available in the production build.

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Hovered",
  "classes": "ds-hover",
  "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
})  %}
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall %}

Markup



<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown ds-hover" data-module="c-dropdown-button" aria-haspopup="true" >
    <span class="inline-flex self-center max-w-xs align-middle truncate">Hovered</span>
      <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></button>
  <div class="-ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip" >
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
  </div>
</div>
<!-- /dropdown -->

with focus state

Simulate triggering the :focus CSS pseudo-class, not available in the production build.

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Focussed",
  "classes": "ds-focus",
  "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
})  %}
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall %}

Markup



<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown ds-focus" data-module="c-dropdown-button" aria-haspopup="true" >
    <span class="inline-flex self-center max-w-xs align-middle truncate">Focussed</span>
      <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></button>
  <div class="-ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip" >
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
  </div>
</div>
<!-- /dropdown -->

Primary

A button for primary actions

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Primary button",
  "classes": "c-dropdown--primary",
  "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
})  %}
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall %}

Markup



<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown c-dropdown--primary" data-module="c-dropdown-button" aria-haspopup="true" >
    <span class="inline-flex self-center max-w-xs align-middle truncate">Primary button</span>
      <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></button>
  <div class="-ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip" >
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
  </div>
</div>
<!-- /dropdown -->

Transparent

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Transparent",
  "classes": "c-dropdown--transparent",
  "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
})  %}
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall %}

Markup



<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown c-dropdown--transparent" data-module="c-dropdown-button" aria-haspopup="true" >
    <span class="inline-flex self-center max-w-xs align-middle truncate">Transparent</span>
      <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></button>
  <div class="-ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip" >
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
  </div>
</div>
<!-- /dropdown -->

Header

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Header",
  "classes": "c-dropdown--header",
  "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
})  %}
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall %}

Markup



<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown c-dropdown--header" data-module="c-dropdown-button" aria-haspopup="true" >
    <span class="inline-flex self-center max-w-xs align-middle truncate">Header</span>
      <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></button>
  <div class="-ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip" >
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
  </div>
</div>
<!-- /dropdown -->

Small

A small button

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Small button with a very long text",
  "classes": "c-dropdown--sm",
  "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
})  %}
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall %}

Markup



<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown c-dropdown--sm" data-module="c-dropdown-button" aria-haspopup="true" >
    <span class="inline-flex self-center max-w-xs align-middle truncate">Small button with a very long text</span>
      <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></button>
  <div class="-ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip" >
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
  </div>
</div>
<!-- /dropdown -->

Small has selection

A button with selection applied

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Small button with a very long text",
  "classes": "c-dropdown--has-selection c-dropdown--sm",
  "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
})  %}
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall %}

Markup



<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown c-dropdown--has-selection c-dropdown--sm" data-module="c-dropdown-button" aria-haspopup="true" >
    <span class="inline-flex self-center max-w-xs align-middle truncate">Small button with a very long text</span>
      <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></button>
  <div class="-ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip" >
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
  </div>
</div>
<!-- /dropdown -->

Disabled

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Disabled button",
  "disabled": true,
  "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
})  %}
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall %}

Markup



<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown" data-module="c-dropdown-button" aria-haspopup="true"  disabled="disabled" aria-disabled="true">
    <span class="inline-flex self-center max-w-xs align-middle truncate">Disabled button</span>
      <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></button>
  <div class="-ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip" >
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
  </div>
</div>
<!-- /dropdown -->

Classes applied to container element

Both button and tooltip elements are wrapped in an outer container div

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Classes in container",
  "classesContainer": "inline-block p-base bg-warning-light",
  "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
})  %}
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall %}

Markup



<!-- dropdown -->
<div data-module="c-dropdown" class="inline-block p-base bg-warning-light">
  <button class="c-dropdown" data-module="c-dropdown-button" aria-haspopup="true" >
    <span class="inline-flex self-center max-w-xs align-middle truncate">Classes in container</span>
      <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></button>
  <div class="-ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip" >
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
  </div>
</div>
<!-- /dropdown -->

Classes applied to tooltip content

Tooltip content can have additional classes applied

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Classes in tooltip content",
  "classesTooltip": "max-h-64 overflow-y-auto",
  "caller": "<div class=\" w-64 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-64 \"></div></div>"
})  %}
    <div class=" w-64 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-64 "></div></div>
{% endcall %}

Markup



<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown" data-module="c-dropdown-button" aria-haspopup="true" >
    <span class="inline-flex self-center max-w-xs align-middle truncate">Classes in tooltip content</span>
      <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></button>
  <div class="-ml-sm mt-2 border border-neutral-base shadow-md bg-white max-h-64 overflow-y-auto" data-module="c-dropdown-tooltip" >
    <div class=" w-64 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-64 "></div></div>
  </div>
</div>
<!-- /dropdown -->

Classes applied to various elements

The content width generates the tooltip width in this example

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Dropdown full width",
  "classes": "w-full justify-between",
  "classesTooltip": "w-max max-h-64 overflow-y-auto",
  "caller": "<div class=\" p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-64 \"><div style=\" width:900px \"></div></div></div>"
})  %}
    <div class=" p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-64 "><div style=" width:900px "></div></div></div>
{% endcall %}

Markup



<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown w-full justify-between" data-module="c-dropdown-button" aria-haspopup="true" >
    <span class="inline-flex self-center max-w-xs align-middle truncate">Dropdown full width</span>
      <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg></button>
  <div class="-ml-sm mt-2 border border-neutral-base shadow-md bg-white w-max max-h-64 overflow-y-auto" data-module="c-dropdown-tooltip" >
    <div class=" p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-64 "><div style=" width:900px "></div></div></div>
  </div>
</div>
<!-- /dropdown -->