Dropdown

Description here

Purpose: text here

Usage & Examples:

Basic Dropdown:

<div class="joomla-dropdown-container">
    <button class="btn btn-secondary" data-target="dropdownId">Dropdown with text</button>
    <joomla-dropdown for="dropdownId">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </joomla-dropdown>
</div>

Dropdown List:

<div class="joomla-dropdown-container">
	<a href="#" class="btn btn-secondary" data-target="dropdownList1">Dropdown with list</a>
	<joomla-dropdown for="dropdownList1">
		<ul>
			<li class="has-submenu" data-action="click">
				<a class="dropdown-item" >Item 1</a>
				<ul class='submenu'>
					<li><a class="dropdown-item" href="#" title="Sub Menu">Sub Menu 1</a></li>
					<li><a class="dropdown-item" href="#" title="Sub Menu">Sub Menu 2</a></li>
					<li><a class="dropdown-item" href="#" title="Sub Menu">Sub Menu 3</a></li>
					<li><a class="dropdown-item" href="#" title="Sub Menu">Sub Menu 4</a></li>
				</ul>
			</li>
			<li class="has-submenu">
				<a class="dropdown-item" >Item 2</a>
				<ul class='submenu'>
					<li><a class="dropdown-item" href="#" title="Sub Menu">Sub Menu 1</a></li>
					<li><a class="dropdown-item" href="#" title="Sub Menu">Sub Menu 2</a></li>
					<li><a class="dropdown-item" href="#" title="Sub Menu">Sub Menu 3</a></li>
					<li><a class="dropdown-item" href="#" title="Sub Menu">Sub Menu 4</a></li>
				</ul>
			</li>
			<li><a class="dropdown-item" href="#">Item 3</a></li>
		</ul>
	</joomla-dropdown>
</div>

Attributes:

Attribute	Value	Descripton
position	left/right	Default is right, you can use left also, TODO: CONTENT REVIEW
data-action	click/hover	Default is hover Note: data-action must be no list item