Dropdowns are contextual overlays toggled through clicking or hovering, used for displaying a list of links.
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.
Trigger dropdown menus at the
right of elements by adding the
placement property to the parent
Each of the positions also has a
-end variant (
bottom-end, etc.) that sets the dropdown to the start or end of the placement instead of centering it.
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
You can use the
trigger property to trigger the dropdown on
click. By default, dropdowns are triggered on
click, a design decision made to improve user experience.
You're able to use the
size modifier to control the size of your dropdown menus, using one of the available sizes:
The default size is set to
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
dark. By default, dropdown menus use the
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.
|disabled||Sets the dropdown state as disabled.|| || |
|hideOnClick||Determines whether to hide the dropdown when clicking it.|| || |
|id||Sets the identifier of the dropdown.|| |
|keymap||Sets the keymap of the dropdown component.|| |
|placement||Sets the placement of the dropdown.|| || |
|variant||Sets the color variant of the collapsible component.|| || |
|arrow||Sets whether to attach an arrow to the dropdown menu.|| || |
|transformOrigin||Sets the transform origin of the dropdown menu.|| |
|popperOptions||Sets custom options for the Popper.js plugin.|| |
|action||Set an action to be emitted by the || |
|disabled||Set the state of the dropdown item component as disabled.|| || |
|tag||Sets the tag to be used for the component. If || |