# Ejemplo de código de Desplegable. DESY. Sistema de diseño del Gobierno de Aragón.

## Componentes Índice de páginas

Componentes

# Desplegable

Mostrar y ocultar

Es un componente que nos permite desplegar un contenedor de contenido para realizar otras acciones.

# Dropdown

Mostrar parámetros

## Parámetros Nunjucks del componente: "Dropdown"

```yaml
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.
```

### Por defecto [#](#por-defecto)

Mostrar códigodel ejemplo: Por defecto

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Por defecto"
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}
```

##### HTML

```html
<!-- 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 align-middle">Por defecto</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="c-dropdown__tooltip min-w-auto! -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 -->
```

### Con estado activo [#](#con-estado-activo)

Simula activar la pseudo-clase de CSS `:active`. En realidad sólo se usa para documentar estos ejemplos.

Mostrar códigodel ejemplo: Con estado activo

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Activo",
  "classes": "ds-active"
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}
```

##### HTML

```html
<!-- 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 align-middle">Activo</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="c-dropdown__tooltip min-w-auto! -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 -->
```

### Con estado hover [#](#con-estado-hover)

Simula activar la pseudo-clase de CSS `:hover`. En realidad sólo se usa para documentar estos ejemplos.

Mostrar códigodel ejemplo: Con estado hover

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Hover",
  "classes": "ds-hover"
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}
```

##### HTML

```html
<!-- 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 align-middle">Hover</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="c-dropdown__tooltip min-w-auto! -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 -->
```

### Con estado focus [#](#con-estado-focus)

Simula activar la pseudo-clase de CSS `:focus`. En realidad sólo se usa para documentar estos ejemplos.

Mostrar códigodel ejemplo: Con estado focus

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Focus",
  "classes": "ds-focus"
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}
```

##### HTML

```html
<!-- 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 align-middle">Focus</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="c-dropdown__tooltip min-w-auto! -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 -->
```

### Primario [#](#primario)

Para acciones primarias.

Mostrar códigodel ejemplo: Primario

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Primario",
  "classes": "c-dropdown--primary"
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}
```

##### HTML

```html
<!-- 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 align-middle">Primario</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="c-dropdown__tooltip min-w-auto! -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 -->
```

### Transparente [#](#transparente)

Mostrar códigodel ejemplo: Transparente

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Transparente",
  "classes": "c-dropdown--transparent"
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}
```

##### HTML

```html
<!-- 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 align-middle">Transparente</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="c-dropdown__tooltip min-w-auto! -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 -->
```

### Con estilos de cabecera [#](#con-estilos-de-cabecera)

Mostrar códigodel ejemplo: Con estilos de cabecera

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Header",
  "classes": "c-dropdown--header"
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}
```

##### HTML

```html
<!-- 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 align-middle">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="c-dropdown__tooltip min-w-auto! -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 -->
```

### Grande [#](#grande)

Mostrar códigodel ejemplo: Grande

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Grande",
  "classes": "c-dropdown--lg"
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}
```

##### HTML

```html
<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown c-dropdown--lg" data-module="c-dropdown-button" aria-haspopup="true">
    <span class="inline-flex self-center align-middle">Grande</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="c-dropdown__tooltip min-w-auto! -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 -->
```

### Peque [#](#peque)

Mostrar códigodel ejemplo: Peque

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Botón pequeño con texto muy largo",
  "classes": "c-dropdown--sm"
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}
```

##### HTML

```html
<!-- 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 align-middle">Botón pequeño con texto muy largo</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="c-dropdown__tooltip min-w-auto! -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 -->
```

### Peque tiene selección [#](#peque-tiene-seleccin)

Un botón con una selección aplicada se muestra con color.

Mostrar códigodel ejemplo: Peque tiene selección

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Botón pequeño con texto muy largo",
  "classes": "c-dropdown--has-selection c-dropdown--sm"
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}
```

##### HTML

```html
<!-- 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 align-middle">Botón pequeño con texto muy largo</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="c-dropdown__tooltip min-w-auto! -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 -->
```

### Deshabilitado [#](#deshabilitado)

Mostrar códigodel ejemplo: Deshabilitado

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Deshabilitado",
  "disabled": true
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}
```

##### HTML

```html
<!-- 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 align-middle">Deshabilitado</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="c-dropdown__tooltip min-w-auto! -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 -->
```

### Con clases de css aplicadas al container [#](#con-clases-de-css-aplicadas-al-container)

Tanto el botón como los elementos del tooltip están rodeados de un div contenedor al que se le pueden aplicar estilos de CSS.

Mostrar códigodel ejemplo: Con clases de css aplicadas al container

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Clases en container",
  "classesContainer": "inline-block p-base bg-primary-light"
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}
```

##### HTML

```html
<!-- dropdown -->
<div data-module="c-dropdown" class="inline-block p-base bg-primary-light">
  <button class="c-dropdown" data-module="c-dropdown-button" aria-haspopup="true">
    <span class="inline-flex self-center align-middle">Clases en 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="c-dropdown__tooltip min-w-auto! -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 -->
```

### Clases aplicadas al contenido del tooltip [#](#clases-aplicadas-al-contenido-del-tooltip)

El contenido del tooltip puede tener clases adicionales aplicadas. En este ejemplo se le ha aplicado una altura máxima y scroll vertical si el contenido se desborda.

Mostrar códigodel ejemplo: Clases aplicadas al contenido del tooltip

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Clases al contenido del tooltip",
  "classesTooltip": "max-h-64 overflow-y-auto"
}) %}
<div class=' w-64 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-64 '></div></div>
{% endcall  %}
```

##### HTML

```html
<!-- 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 align-middle">Clases al contenido del tooltip</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="c-dropdown__tooltip min-w-auto! -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 -->
```

### Clases aplicadas a varios elementos [#](#clases-aplicadas-a-varios-elementos)

En este ejemplo, usando clases de CSS, la anchura del contenido establece la anchura del tooltip.

Mostrar códigodel ejemplo: Clases aplicadas a varios elementos

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Dropdown anchura completa",
  "classes": "w-full justify-between",
  "classesTooltip": "w-max max-h-40 overflow-y-auto"
}) %}
<div class=' p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-64 '><div style=' width:120px '></div></div></div>
{% endcall  %}
```

##### HTML

```html
<!-- 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 align-middle">Dropdown anchura completa</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="c-dropdown__tooltip min-w-auto! -ml-sm mt-2 border border-neutral-base shadow-md bg-white w-max max-h-40 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:120px '></div>
      </div>
    </div>
  </div>
</div>
<!-- /dropdown -->
```

### Con role dialog [#](#con-role-dialog)

Usa los atributos `data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Información adicional"` para abrir un desplegable que no contenga un menú, por ejemplo un panel informativo.

Mostrar códigodel ejemplo: Con role dialog

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Marta Pérez",
  "attributes": {
    "data-aria-haspopup": "dialog",
    "data-role": "dialog",
    "data-aria-modal": "false",
    "data-aria-label": "Información adicional"
  }
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}
```

##### HTML

```html
<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown" data-module="c-dropdown-button" aria-haspopup="true" data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Información adicional">
    <span class="inline-flex self-center align-middle">Marta Pérez</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="c-dropdown__tooltip min-w-auto! -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 -->
```