dropdown_button¶

The dropdown_button macro is used to render a button that opens a dropdown on the page.

Definition¶

{% dropdown_button(content, options) %}

Input parameters¶

content¶

content parameter represents an object of attributes related to content of a dropdown button:

Option key	Type	Default	Required	Description
content.title	`string` or `html`	""	yes	The content of the button
content.main	`string` or `html`	""	yes	The content of the dropdown

options¶

options parameter represents an object of toggler button configuration options which consists of the following fields:

Option key	Type	Default	Required	Description
options.name	`string`	""	yes	A unique name of the dropdown
options.iconLeft	`string`	""	no	Name of the button icon that will appear on the left side of the title
options.iconRight	`string`	""	no	Name of the button icon that will appear on the right side of the title
options.classNames	`string`	""	no	Classes that will be appended to the `h-dropdown` element
options.contentClassNames	`string`	""	no	Classes that will be appended to the `h-dropdown-content` element
options.mobilePosition	`left` or `right`	""	no	A prop that determines on which side of the screen will the dropdown open on the mobile resolution. For more informations see h-dropdown documentation

Example¶

In this example we render a dropdown button with "Open a dropdown" text that holds some custom HTML inside.

{% from "@macros/dropdown_button.twig" import dropdown_button %}

{% set dropdownContent %}
    <h2>Attention</h2>
    <p>Here I have some important news</p>
    <button>Ok</button>
{% endset %}

{{
    dropdown_button(
        {
            title: 'Open a dropdown',
            main: dropdownContent
        },
        {
            name: 'my-dropdown-1'
        }
    ) 
}}

Example¶

In this example we render a dropdown button with custom HTML inside the button itself and some additional custom classes added to the content.

{% from "@macros/dropdown_button.twig" import dropdown_button %}

{% set buttonContent %}
    <h2>If i click here the button will open</h2>
    <p>If i click here the button will open as well</p>
{% endset %}

{{
    dropdown_button(
        {
            title: buttonContent,
            main: 'Example dropdown content'
        },
        {
            name: 'my-dropdown-2',
            contentClassNames: 'color_neutral-200 font_bold'
        }
    )
}}

Macro source code¶

{% macro dropdown_button(content, options) %}
    {% from "@macros/icon.twig" import icon %}

    {% set hasIcon = options.iconLeft or options.iconRight %}

    <h-dropdown
        class="dropdown-button {{ options.classNames|join(' ') }}"
        name="dropdown-button-{{ options.name }}"
        {% if options.mobilePosition %} mobile-position="{{ options.mobilePosition }}" {% endif %}
    >
        <h-dropdown-toggler>
            <button class="{{ html_classes('dropdown-button__toggler', {
                'btn-icon btn-icon_s btn-icon_outline': hasIcon,
                'btn btn_s btn_outline': not hasIcon
            }) }}">
                {% if options.iconLeft %}
                    {{ icon(options.iconLeft, {
                        classNames: ['btn__icon', 'btn__icon_left']
                    }) }}
                {% endif %}

                {{ content.title }}

                {% if options.iconRight %}
                    {{ icon(options.iconRight, {
                        classNames: ['btn__icon', 'btn__icon_right']
                    }) }}
                {% endif %}
            </button>
        </h-dropdown-toggler>
        <h-dropdown-content class="dropdown-button__content dropdown__content_right {{ options.contentClassNames|join(' ') }}">
            {{ content.main }}
        </h-dropdown-content>
    </h-dropdown>
{% endmacro %}

Webcomponents reference¶

h-dropdown