Dropdown
Dropdowns are contextual overlays toggled through clicking or hovering, usually used for displaying a list of links.
Basic Example
Wrap the trigger element (such as an <i-button>
) and provide a <template #body>
inside an <i-dropdown>
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 <i-dropdown>
body. You can add your own HTML markup without any issues. You might need additional size styles to control the content width.
Header and Footer
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 <i-dropdown-item>
component is well integrated with the Vue Router plugin and will be converted to a <router-link>
when using the to property.
Active State
You can control the active state of your <i-dropdown-item>
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
.
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
.
Color Variants
You can choose a light or dark color for your dropdown using the color
modifier.
Nested Dropdowns
Inkline allows you to have virtually infinite recursive dropdown submenus structure by defining a <i-dropdown>
inside of another dropdown’s body. This awesome feature gives you great design flexibility.
Configuration
Props
Use props to modify the component’s design and behavior.
- Property
animationDuration
TypeNumber
Default300
Description The duration of the hide and show animation - Property
color
Type'light' | 'dark'
Default'light'
Description The color variant of the dropdown - Property
disabled
TypeBoolean
Defaultfalse
Description The disabled state of the dropdown - Property
hideOnItemClick
TypeBoolean
Defaultfalse
Description Used to hide the dropdown when clicking or selecting a dropdown item - Property
keydownTrigger
Typestring[]
Default'up, down, enter, space, tab, esc'
Description The keydown events bound to the trigger element - Property
keydownItem
Typestring[]
Default'up, down, enter, space, tab, esc'
Description The keydown events bound to the dropdown item elements - Property
modelValue
TypeBoolean
Defaultfalse
Description Used to manually control the visibility of the dropdown - Property
arrow
TypeBoolean
Defaulttrue
Description Displays an arrow on the dropdown pointing to the trigger element - Property
placement
Type'top' | top-start | top-end | 'bottom' | bottom-start | bottom-end | 'left' | left-start | left-end | 'right' | right-start | right-end
Defaultfalse
Description The placement of the dropdown - Property
trigger
Type'hover' | 'focus' | 'click' | 'manual'
Default'click'
Description The events used to trigger the dropdown - Property
offset
TypeNumber
Default6
Description The offset of the dropdown relative to the trigger element - Property
popperOptions
TypeObject
Default''
Description Used to override the popper.js options used for creating the dropdown - Property
size
Type'sm' | 'md' | 'lg'
Default'md'
Description The size variant of the dropdown
Slots
Use slots to insert custom content into well-defined component locations.
- Property
default
Description Slot for dropdown trigger - Property
header
Description Slot for dropdown header content - Property
body
Description Slot for dropdown body content - Property
footer
Description Slot for dropdown footer content
Events
Use events to react to something happening inside the component.
- Property
update:modelValue
Description Event emitted for setting the modelValue
CSS Variables
Read more about configuring Inkline’s Design System variables to update the look and feel of the component.
- Property
----background
Valuecolor('white')
Description The background of the dropdown component - Property
----background--active
Valuecolor('light-25')
Description The background of the dropdown component when active - Property
----background--disabled
Valuetransparent
Description The background of the dropdown component when disabled - Property
----background--hover
Valuecolor('light-25')
Description The background of the dropdown component when hovered or focused - Property
----border-top-color
Valuecolor('light')
Description The border top color of the dropdown component - Property
----border-right-color
Valuecolor('light')
Description The border right color of the dropdown component - Property
----border-bottom-color
Valuecolor('light')
Description The border bottom color of the dropdown component - Property
----border-left-color
Valuecolor('light')
Description The border left color of the dropdown component - Property
----border-color
Valuevar(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)
Description The border color of the dropdown component - Property
----border-style
Valuevar(--border-style)
Description The border style of the dropdown component - Property
----border-top-width
Valuevar(--border-top-width)
Description The border top width of the dropdown component - Property
----border-right-width
Valuevar(--border-right-width)
Description The border right width of the dropdown component - Property
----border-bottom-width
Valuevar(--border-bottom-width)
Description The border bottom width of the dropdown component - Property
----border-left-width
Valuevar(--border-left-width)
Description The border left width of the dropdown component - Property
----border-width
Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
Description The border width of the dropdown component - Property
----border-top-left-radius
Valuevar(--border-top-left-radius)
Description The border top left radius of the dropdown component - Property
----border-top-right-radius
Valuevar(--border-top-right-radius)
Description The border top right radius of the dropdown component - Property
----border-bottom-right-radius
Valuevar(--border-bottom-right-radius)
Description The border bottom right radius of the dropdown component - Property
----border-bottom-left-radius
Valuevar(--border-bottom-left-radius)
Description The border bottom left radius of the dropdown component - Property
----border-radius
Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
Description The border radius of the dropdown component - Property
----box-shadow-offset-x
Valuevar(--box-shadow-offset-x)
Description The box shadow horizontal offset of the dropdown component - Property
----box-shadow-offset-y
Valuevar(--box-shadow-offset-y)
Description The box shadow vertical offset of the dropdown component - Property
----box-shadow-blur-radius
Valuevar(--box-shadow-blur-radius)
Description The box shadow blur radius of the dropdown component - Property
----box-shadow-spread-radius
Valuevar(--box-shadow-spread-radius)
Description The box shadow spread radius of the dropdown component - Property
----box-shadow-color
Valuevar(--box-shadow-color)
Description The box shadow spread radius of the dropdown component - Property
----box-shadow
Valuevar(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)
Description The box shadow of the dropdown component - Property
----color
Valuecontrast-color($color-white)
Description The color of the dropdown component item - Property
----color--active
Valuevar(--dropdown-color-variant-light-color)
Description The color of the dropdown component item when active - Property
----color--disabled
Valuecolor('light-65')
Description The color of the dropdown component item when disabled - Property
----color--hover
Valuevar(--dropdown-color-variant-light-color)
Description The color of the dropdown component item when hovered or focused - Property
----font-weight
Valuefont-weight('normal')
Description The font weight of the dropdown component - Property
----font-size
Valuefont-size()
Description The font size of the dropdown component - Property
----line-height
Valuevar(--line-height)
Description The line height of the dropdown component - Property
----min-width
Value240px
Description The minimum width of the dropdown component - Property
----max-width
Value90vw
Description The maximum width of the dropdown component - Property
----padding-top
Valuevar(--padding-top)
Description The padding top of the dropdown component items - Property
----padding-right
Valuevar(--padding-right)
Description The padding right of the dropdown component items - Property
----padding-bottom
Valuevar(--padding-bottom)
Description The padding bottom of the dropdown component items - Property
----padding-left
Valuevar(--padding-left)
Description The padding left of the dropdown component items - Property
----padding
Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
Description The padding of the dropdown component items - Property
----z-index
Value2000
Description The z-index of the dropdown component - Property
----divider--margin-top
Valuecalc(var(--margin-top) / 2)
Description The margin top of the dropdown component divider - Property
----divider--margin-bottom
Valuecalc(var(--margin-bottom) / 2)
Description The margin bottom of the dropdown component divider - Property
----item--padding-top
Valuecalc(var(----padding-top) / 2)
Description The padding top of the dropdown component item - Property
----item--padding-right
Valuevar(----padding-right)
Description The padding right of the dropdown component item - Property
----item--padding-bottom
Valuecalc(var(----padding-bottom) / 2)
Description The padding bottom of the dropdown component item - Property
----item--padding-left
Valuevar(----padding-left)
Description The padding left of the dropdown component item - Property
----item--padding
Valuevar(----item--padding-top) var(----item--padding-right) var(----item--padding-bottom) var(----item--padding-left)
Description The padding of the dropdown component item - Property
----header--background
Valuecolor('gray-05')
Description The background of the dropdown component header - Property
----header--padding-top
Valuevar(----padding-top)
Description The padding top of the dropdown component header - Property
----header--padding-right
Valuevar(----padding-right)
Description The padding right of the dropdown component header - Property
----header--padding-bottom
Valuevar(----padding-bottom)
Description The padding bottom of the dropdown component header - Property
----header--padding-left
Valuevar(----padding-left)
Description The padding left of the dropdown component header - Property
----header--padding
Valuevar(----header--padding-top) var(----header--padding-right) var(----header--padding-bottom) var(----header--padding-left)
Description The padding of the dropdown component header - Property
----body--padding-top
Valuevar(----padding-top)
Description The padding top of the dropdown component body - Property
----body--padding-right
Value0
Description The padding right of the dropdown component body - Property
----body--padding-bottom
Valuevar(----padding-bottom)
Description The padding bottom of the dropdown component body - Property
----body--padding-left
Value0
Description The padding left of the dropdown component body - Property
----body--padding
Valuevar(----body--padding-top) var(----body--padding-right) var(----body--padding-bottom) var(----body--padding-left)
Description The padding of the dropdown component body - Property
----footer--background
Valuecolor('gray-05')
Description The background of the dropdown component footer - Property
----footer--padding-top
Valuevar(----padding-top)
Description The padding top of the dropdown component footer - Property
----footer--padding-right
Valuevar(----padding-right)
Description The padding right of the dropdown component footer - Property
----footer--padding-bottom
Valuevar(----padding-bottom)
Description The padding bottom of the dropdown component footer - Property
----footer--padding-left
Valuevar(----padding-left)
Description The padding left of the dropdown component footer - Property
----footer--padding
Valuevar(----footer--padding-top) var(----footer--padding-right) var(----footer--padding-bottom) var(----footer--padding-left)
Description The padding of the dropdown component footer