A dropdown lets you display toggleable, contextual menus to show lists of links and other additional content. In Kirki, you can use the Dropdown element to add clean, interactive dropdown menus anywhere on your page.

Add a Dropdown Element

To add a Dropdown element:

1. Open the Insert panel from the Left Sidebar.

2. Scroll down to the Base Elements section.

3. Click or drag the Dropdown element onto your canvas.

Dropdown Structure

The Dropdown element consists of two core components: the Dropdown Trigger and the Dropdown Target.

Dropdown Trigger

The interactive element users engage with to open the dropdown. Upon clicking or hovering over the Dropdown Trigger, the dropdown menu appears, showcasing available options for users to select.

By default, it includes a Text and an Icon element, but you can replace or extend these with any element you prefer.

Dropdown Target

The container that holds the dropdown’s content. It remains hidden until the Dropdown Trigger is activated. 

To view and edit it while designing, set the State option to Show in the Right Panel → Design Tab, under Dropdown settings.

Dropdown Interaction

Once the Dropdown is added, configure how users will trigger the dropdown content to appear. With the Dropdown element selected, the right panel exposes the following settings:

• Open On – Choose whether the dropdown opens on Hover or On Click.

• Animation – Select the entrance animation for the dropdown content.

• Easing – Control the smoothness of the animation. Options include linear, ease, ease-in, ease-out, and ease-in-out.

• Delay – Set a delay before the animation starts, in seconds.

• Duration – Define how long the animation lasts, in seconds.

Learn more about Interaction & Animation.

Change Dropdown Trigger Text

You can edit the Dropdown Trigger text anytime:

1. In the Layers panel, expand Dropdown Trigger and select the Text element.

2. Edit the text directly on the canvas or update it via the Text field in the Right Panel.

Learn more about Text & Typography.

Change Dropdown Trigger Icon

The Dropdown Trigger also includes a default icon that can be swapped or restyled:

1. In the Layers panel, expand the Dropdown Trigger and select the Icon element.

2. In the Right Panel, click the SVG Icon menu to browse and replace the icon.

3. Adjust its color, size, and other style properties from the same panel.

Learn more about Icons.

Add Content to Dropdown Target

The Dropdown Target comes with a Paragraph element to get you started:

1. In the Right Panel, set the State to Show to make the Dropdown Target visible on the canvas.

2. In the Layers panel, select the Paragraph element nested under Dropdown Target and start editing. You can update the text content, style, and even turn them into links.

3. Add any additional elements directly into the Dropdown Target container as needed.

Styling the Dropdown

Once your dropdown is configured, you can style each component – the Trigger, Icon, and Target – individually using the Style Panel on the right. Select any child element from the Layers panel to access its design settings.