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.

HTML

<i-dropdown>
    <i-button>Dropdown</i-button>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-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

HTML

<i-dropdown placement="top">
    <i-button>Top Dropdown</i-button>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-dropdown>

<i-dropdown placement="bottom">
    <i-button>Bottom Dropdown</i-button>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-dropdown>

<i-dropdown placement="left">
    <i-button>Left Dropdown</i-button>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-dropdown>

<i-dropdown placement="right">
    <i-button>Right Dropdown</i-button>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-dropdown>

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.

HTML

<i-dropdown trigger="click">
    <i-button>Click Dropdown</i-button>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-dropdown>

<i-dropdown trigger="hover">
    <i-button>Hover Dropdown</i-button>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-dropdown>

<i-dropdown trigger="focus">
    <i-button type="submit">Focus Dropdown</i-button>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-dropdown>

<i-dropdown :trigger="['focus', 'hover']">
    <i-button>Multiple Events Dropdown</i-button>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-dropdown>

<i-dropdown trigger="manual" v-model="visible">
    <i-button @click="visible = !visible">Manual Dropdown</i-button>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-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.

HTML

<i-dropdown>
    <i-button>Dropdown</i-button>
    <template #header>
        Dropdown Header
    </template>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
    <template #footer>
        Dropdown Footer
    </template>
</i-dropdown>

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.

HTML

<i-dropdown>
    <i-button>Dropdown</i-button>
    <template #body>
        <i-dropdown-item href="https://inkline.io">Link</i-dropdown-item>
        <i-dropdown-item :to="{ name: 'index' }">Router Link</i-dropdown-item>
    </template>
</i-dropdown>

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.

HTML

<i-dropdown>
    <i-button>Dropdown</i-button>
    <template #body>
        <i-dropdown-item :to="{ name: 'docs-components-dropdown' }" exact-active-class="-active">Active Router Link</i-dropdown-item>
        <i-dropdown-item active>Active Item</i-dropdown-item>
    </template>
</i-dropdown>

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.

HTML

<i-dropdown size="sm">
    <i-button>Small Dropdown</i-button>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-dropdown>

<i-dropdown size="md">
    <i-button>Medium Dropdown</i-button>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-dropdown>

<i-dropdown size="lg">
    <i-button>Large Dropdown</i-button>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-dropdown>

Color Variants

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

HTML

<i-dropdown color="light">
    <i-button color="light">Light Dropdown</i-button>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-dropdown>

<i-dropdown color="dark">
    <i-button color="dark">Dark Dropdown</i-button>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-dropdown>

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.

HTML

<i-dropdown>
    <i-button>Dropdown</i-button>
    <template #body>
        <i-dropdown placement="right">
            <i-dropdown-item>Dropdown here</i-dropdown-item>
            <template #body>
                <i-dropdown-item>Action</i-dropdown-item>
                <i-dropdown-item>Another action</i-dropdown-item>
                <i-dropdown-item disabled>Disabled action</i-dropdown-item>
                <i-dropdown-divider />
                <i-dropdown-item>Separated item</i-dropdown-item>
            </template>
        </i-dropdown>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-dropdown>

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

Dropdowns are contextual overlays toggled through clicking or hovering, usually used for displaying a list of links.

Basic Example

Placement

Trigger Type

Freeform Dropdown

Header and Footer

Linking and Routing

Active State

Size Variants

Color Variants

Nested Dropdowns

Configuration

Props

Slots

Events

CSS Variables