Dropdown
Wrap the trigger element (such as an <IButton>) and provide a <template #body> inside an <IDropdown> component to create a dropdown.
<template>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
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:
toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
<template>
<IDropdown placement="top">
<IButton>Top Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
<IDropdown placement="bottom">
<IButton>Bottom Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
<IDropdown placement="left">
<IButton>Left Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
<IDropdown placement="right">
<IButton>Right Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
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.
<script>
export default {
data() {
return {
visible: false
};
}
};
</script>
<template>
<IDropdown events="click">
<IButton>Click Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
<IDropdown events="hover">
<IButton>Hover Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
<IDropdown events="focus">
<IButton type="submit">Focus Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
<IDropdown :events="['focus', 'hover']">
<IButton>Multiple Events Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
<IDropdown v-model:visible="visible" events="manual">
<IButton @click="visible = !visible">Manual Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
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.
<template>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<div class="_padding:1">This is a freeform dropdown example.</div>
</template>
</IDropdown>
</template>
You can provide an optional header or footer for your dropdown menus using slots.
<template>
<IDropdown>
<IButton>Dropdown</IButton>
<template #header> Dropdown Header </template>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
<template #footer> Dropdown Footer </template>
</IDropdown>
</template>
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.
<template>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<IDropdownItem href="https://inkline.io">Link</IDropdownItem>
<IDropdownItem :to="{ path: '/docs/components/dropdown' }">Router Link</IDropdownItem>
</template>
</IDropdown>
</template>
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.
<template>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<IDropdownItem :to="{ path: '/docs/components/dropdown' }" exact-active-class="-active">
Active Router Link
</IDropdownItem>
<IDropdownItem active>Active Item</IDropdownItem>
</template>
</IDropdown>
</template>
You can choose a light or dark color for your dropdown using the color modifier.
<template>
<IDropdown color="light">
<IButton color="light">Light Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
<IDropdown color="dark">
<IButton color="dark">Dark Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
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.
<template>
<IDropdown size="sm">
<IButton>Small Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
<IDropdown size="md">
<IButton>Medium Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
<IDropdown size="lg">
<IButton>Large Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
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.
<template>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<IDropdown placement="right">
<IDropdownItem>Dropdown here</IDropdownItem>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
IDropdown
IDropdownItem
IDropdown
IDropdownItem
IDropdown
IDropdown
IDropdownItem
IDropdownDivider