CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

Dropdown

Dropdowns contain and give access to a list of buttons or other elements hidden by default. They are commonly used for menus in web applications.
  • Examples
  • Properties
  • Accessibility

Examples

A dropdown must be associated with an activator, commonly a button, which, at the time of being clicked, expands the dropdown. Activator and dropdown should be contained in a div with a chi-dropdown class, or otherwise, the activator must reference the dropdown with a data-target attribute. Use the chi-dropdown__trigger class on your activator button to make the chevron appear.

Menu

Icons

Dropdown component has been developed to support Chi icons in the menu items.

Checkboxes

Helpers

Web Component

JavaScript

Properties

Methods

Method
Description
Returns
hide() => void
Hides the dropdown
Type: void
show() => void
Shows the dropdown
Type: void
toggle() => void
Toggles active state (show/hide)
Type: void

Events

Event
Description
chiDropdownShow
Dropdown show has been triggered.
chiDropdownHide
Dropdown hide has been triggered.

Preventing memory leaks

Dropdown components have a dispose function to free all resources attached to the element, such as event listeners and object data. You must call this method when you want to remove the component.

It is safe to call the dropdown method more than once, as it will return any previously created dropdown component associated with the trigger.

Accessibility

Accessibility guidelines coming soon