Dropdown Menu

Examples

Example with linkable menu

 
<vega-dropdown trigger='hover'>
	<vega-button icon="hb-menu">menu</vega-button>
</vega-dropdown-menu>

        
const dropdown = document.querySelector('vega-dropdown');
const sourceMap = {
	google: { label: 'Google', key: 'google', url: 'https://google.com', group: 'links' },
	vega: { label: 'Vega', key: 'vega', url: 'https://vega.hlprd.com/', group: 'links' },
    option3: { label: 'Option3', key: 'option3', url: '#', group: 'options', count: '5' },
}
dropdown.source = Object.values(sourceMap);
dropdown.addEventListener("vegaClick", (e) => {
window.open(sourceMap[e.detail].url, '_blank') })

Example with dynamic searchable menu

 
<vega-dropdown trigger="hover" searchable="true"  dynamic-option="true">
	<vega-button icon="hb-menu">menu</vega-button>
</vega-dropdown-menu>

        
const dropdown = document.querySelector('vega-dropdown');
const sourceMap = {
	google: { label: 'Google', key: 'google', url: 'https://google.com' },
	vega: { label: 'Vega', key: 'vega', url: 'https://vega.hlprd.com/' },
}
dropdown.source = Object.values(sourceMap);
dropdown.addEventListener("vegaClick", (e) => {
window.open(sourceMap[e.detail].url, '_blank') })

dropdown.addEventListener('vegaCreate', (e) => {
        dropdown.source.push({key: e.detail, label: e.detail}); 
        dropdown.value = [...comboBox.value, e.detail]
    })

Note: The above example uses Vanilla JS. If you would like to use React, Angular, or Vue, please consult Storybook.

Usage

The vega-dropdown is a container which creates a dropdown menu off of a button, to provide access to several links.

It can be triggered by using a hover or click mechanism, and will remain open until a user clicks elswehere on the page.

Properties

All Properties

<vega-dropdown
    trigger="hover|click"
    size="200 | {default: 200, M: 200}"
	min-width="100 | {default: 100, M: 200}"
	max-width="300 | {default: 200, M: 300}"
    translocation="{X: 10, Y: 10} | {default: {X: 10, Y: 10}, M: {X: 20, Y: 20}}"
    position-relative-to="#{id} | .{class} ..."
    source="[{label: 'Add', key: 'add', group: 'action', count: '5'} ...]"
    select-type="none|single"
    selected-source-key="add"
    max-height="400"
    searchable=true|false
	dynamic-option=true|false
    case-sensitive=true|false
    match-target-width=true|false
    match-container-height=true|false
	use-default-filter=true|false
	is-loading=true|false
>
    Child Elements
</vega-dropdown>

Create Item Workflow

If you would like the vega-dropdown component to create new items, set dynamic-option and searchable to be true. While searching items, if no proper item is found, “Add {search string}” will be displayed. Clicking “Add {search string}” with emit a vegaCreate event with the search string as the parameter.

While receiving this event, you can genearate a key and make it a DropdownSourceItem, or you may set it to source and push the key to the value.

Note: When pushing a new item to the array or to change the value, it is important to use a new array with the new item, or the UI will not update.

Example

<VegaDropdown
    source={this.source}
    selectedSourceKey={this.value}
    selectType='multiple'
    onVegaCreate={ (e) => {
        const key = "You should generate key by backend or other ways";
        this.source = [...this.source, {
            key: key,
            label: e.detail
        }];
        this.value = [...this.value, key];
    }}
    ...
></VegaDropdown>

Events

Various events can be called using the vega-dropdown.

• vegaClick which uses the key as parameter.
• vegaCreate which, when dynamicOption is set to true, will add a search string as a parameter.
• vegaShow which will display at item when callled.
• vegaHide which will hide an item when called.

document.getElementById("web-dropdown").addEventListener("vegaClick", (e) => { console.log(e.detail) })
document.getElementById("web-dropdown").addEventListener("vegaCreate", (e) => { console.log(e.detail) })
document.getElementById("web-dropdown").addEventListener("vegaShow", () => {})
document.getElementById("web-dropdown").addEventListener("vegaHide", () => {})

Methods

The following methods can be called using vega-dropdown.

• show displays the dropdown.
• hide hides the dropdown.
• search allows searching through the items listed in the dropdown.

<vega-dropdown id="vega-dropdown"></vega-dropdown>;
// display dropdown
document.querySelector('#vega-dropdown').show();
// hide dropdown
document.querySelector('#vega-dropdown').hide();
// search dropdown list
document.querySelector('#vega-dropdown').search('search-string');

Disabled Status

If you need to disable the dropdown, set trigger to be none and disable the content slot.

Example:

<vega-dropdown trigger={props.disabled ? 'none' : 'click'}>
    <vega-button icon="hb-menu" disabled={props.disabled}>menu</vega-button>
</vega-dropdown>

For more details, including examples using React and Vue, view in Storybook.

Accessibility

• Elements must only use allowed ARIA attributes
• ARIA attributes must conform to valid values
• ARIA attributes must conform to valid names
• Buttons must have discernible text
• Elements must have sufficient color contrast
• id attribute value must be unique
• Interactive controls must not be nested