> For the complete documentation index, see [llms.txt](https://docs.babelshark.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.babelshark.net/dev/api-reference/language-drop-down-specs.md).

# Language drop-down specs

To embed an automatic language drop-down to your page use the following HTML element:

```html
<span 
    class="bs-activator" 
    [data-drop="auto|right|left|right-top|left-top"]
    [data-theme="light|dark"]
    [data-css="https://...."]
    [data-dialog-style="...."]
    ></span>
```

The minimal code snippet is `<span class="bs-activator"></span>`.

### Configuration attributes

<details>

<summary>class</summary>

"bs-activator"

To adjust the language selector button, use this class in your css.

</details>

<details>

<summary>data-drop</summary>

The direction to open the language drop-down:

* auto - automatically select the direction
* right - drop down to the right and below the language selector
* left - drop down to the left and below
* right-top - open to the right and over the language selector
* left-top - open to the left and over the language selector

</details>

<details>

<summary>data-theme</summary>

Overall coloring theme of the widget and its activator:

* light (default) - light background, dark text
* dark - dark background, light text

</details>

<details>

<summary>data-css</summary>

Embed the speficic CSS file in to the drop-down iframe.

</details>

<details>

<summary>data-dialog-style</summary>

CSS inline styles for widget dialog (iframe). Useful to set `z-index` and similar properties.

Note: `data-drop` attribute controls widget position.

</details>