Dropdown

Example

Wrap both the dropdown's trigger element (such as an <i-button>) and the <i-dropdown-menu> inside a <i-dropdown> component. The dropdown component will always choose the first child element as a trigger and the last child element as the defined dropdown menu.

Dropdown Example

Placement

Trigger dropdown menus at the top, bottom, left or right of elements by adding the placement property to the parent <i-dropdown> element.

Each of the positions also has a -start or -end variant (top-start, top-end, bottom-start, bottom-end, etc.) that sets the dropdown to the start or end of the placement instead of centering it.

Dropdown Placement

Freeform Dropdown

You're not required to use any dropdown-specific components inside of <i-dropdown-menu>. You can add your own HTML markup without any issues. You might need additional size styles to constrain the content width

Freeform Dropdown
 

Trigger type

You can use the trigger property to trigger the dropdown on hover or click. By default, dropdowns are triggered on click, a design decision made to improve user experience.

Dropdown Trigger

Sizes

You're able to use the size modifier to control the size of your dropdown menus, using one of the available sizes: sm, md, and lg. The default size is set to md.

Dropdown Sizes

Variants

Inkline includes two predefined dropdown styles, each serving its own semantic purpose. You can set the style of a <i-dropdown-menu> using the variant property, which can have a value of light or dark. By default, dropdown menus use the light variant.

Dropdown Variants

Recursive Dropdowns

Inkline allows you to have virtually infinite recursive dropdown submenus structure by defining another <i-dropdown> inside of a <i-dropdown-menu>. This awesome feature gives you great design flexibility.

Recursive Dropdown

API

Dropdown API <i-dropdown>
Property Description Type Accepted Default
disabled Sets the dropdown state as disabled. Boolean true, false false
hideOnClick Determines whether to hide the dropdown when clicking it. Boolean true, false false
id Sets the identifier of the dropdown. String dropdown-<uid>
keymap Sets the keymap of the dropdown component. Object { navigate: ['up', 'down'], select: ['enter', 'space'], show: ['enter', 'space'], hide: ['esc', 'tab'] }
placement Sets the placement of the dropdown. String top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end bottom
variant Sets the color variant of the collapsible component. String light, dark light
Dropdown Menu API <i-dropdown-menu>
Property Description Type Accepted Default
arrow Sets whether to attach an arrow to the dropdown menu. Boolean true, false true
transformOrigin Sets the transform origin of the dropdown menu. Boolean, String true
popperOptions Sets custom options for the Popper.js plugin. Object
Dropdown Item API <i-dropdown-item>
Property Description Type Accepted Default
action Set an action to be emitted by the IDropdown parent when the dropdown item is clicked. String, Number, Boolean
disabled Set the state of the dropdown item component as disabled. Boolean true, false false
tag Sets the tag to be used for the component. If to or href attribute is provided, an a tag will be used. String div