Dropdown

Wrap the trigger element (such as an <IButton>) and provide a <template #body> inside an <IDropdown> component to create a dropdown.

Placement

Trigger dropdowns at the top, bottom, left or right of elements by using the placement property.

Each position also has a -start or -end variant that sets the dropdown to the start or end of the placement instead of centering it. The possible placements are:

  • top
  • top-start
  • top-end
  • bottom
  • bottom-start
  • bottom-end
  • left
  • left-start
  • left-end
  • right
  • right-start
  • right-end

Trigger Type

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

Freeform Dropdown

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

You can provide an optional header or footer for your dropdown menus using slots.

Linking and Routing

Dropdown items will be automatically converted to link anchors <a> when providing a href property. You can also specify target and rel properties.

The <IDropdownItem> component is well integrated with the Vue Router plugin and will be converted to a <RouterLink> when using the to property.

Active State

You can control the active state of your <IDropdownItem> using the active property. If you're providing a :to property, converting it into a router-link, you can use the active-class and exact-active-class properties and set them to -active.

Color Variants

You can choose a light or dark color for your dropdown using the color modifier.

Size Variants

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

Nested Dropdowns

Inkline allows you to have virtually infinite recursive dropdown submenus structure by defining a <IDropdown> inside of another dropdown's body. This awesome feature gives you great design flexibility.

Props

IDropdown
IDropdownItem

Slots

IDropdown
IDropdownItem

Events

IDropdown

Design Tokens

IDropdown
IDropdownItem
IDropdownDivider