Dropdown

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.

<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

<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.

<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>

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.

<i-dropdown>
    <i-button>Dropdown</i-button>
    <template #body>
        <div class="_padding:1">This is a freeform dropdown example.</div>
    </template>
</i-dropdown>

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

<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.

<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.

<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.

<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.

<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.

<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