---
title: Dropdown Header
nav_title: Dropdown Header
tags: demo
---


{% from "demo.njk" import demo %}
{% from "macro_config.njk" import config_table %}



{% set label %}
<label class="h2 mb-3">
	Example
</label>
{% endset %}

{% set html %}
<select id="select-code-language" class="demo-code-language" placeholder="Select a language..." autocomplete="off">
	<option value="txt">Text</option>
	<option value="md">Markdown</option>
	<option value="html">HTML</option>
	<option value="php">PHP</option>
	<option value="python">Python</option>
	<option value="java">Java</option>
	<option value="js" selected>JavaScript</option>
	<option value="c#">Ruby</option>
	<option value="c#">VHDL</option>
	<option value="c#">Verilog</option>
	<option value="c#">C#</option>
	<option value="c++">C/C++</option>
</select>
{% endset %}

<script>
{% set script %}
new TomSelect('#select-code-language',{
	sortField: 'text',
	hideSelected: false,
	plugins: {
		'dropdown_header': {
			title: 'Language'
		}
	}
});
{% endset %}
</script>

{{ demo( label, html, script) }}


<h2>Plugin Configuration</h2>

{{ config_table([
		{	name:'html',
			desc:'<p>An html string used to generate the header</p>',
			type:'callback',
			default:'function(data){\n	return `<div class="${data.headerClass}">\n				<div class="${data.titleRowClass}">\n					<span class="${data.labelClass}">${data.title}</span>\n					<a class="${data.closeClass}">&times;</a>\n				</div>\n			</div>`;\n}',
			highlight:true
		},
		{name:'title',desc:'<p>The text of the header</p>',type:'string',default:'Untitled'},
		{name:'headerClass',desc:'<p>The CSS class name of the header</p>',type:'string',default:'dropdown-header'},
		{name:'titleRowClass',desc:'<p>The CSS class name of the dropdown header title</p>',type:'string',default:'dropdown-header-title'},
		{name:'labelClass',desc:'<p>The CSS class name of the dropdown header label row</p>',type:'string',default:'dropdown-header-label'},
		{name:'closeClass',desc:'<p>The CSS class name of the dropdown header close button</p>',type:'string',default:'dropdown-header-close'}
	])
}}


{#


#}