BUILDER

Features

Developers

Documentation

Pricing

Github

Docs

App

This page was made in Builder!

USER GUIDES

Creating Content

Learning the visual editor

Responsive design tricks

Saving layers as templates

Importing your site pages

Connecting custom data

Interactive pages with state and actions

Creating reusable components with Symbols

Targeting and scheduling content

Building custom forms

How To

Sidebar Menu

Dropdown Menu

Launch Modal

Instagram templates

Platforms

Shopify

Wordpress

Custom

DEVELOPER GUIDES

Guides

Quick start

SEO optimizing Builder.io content

Creating custom models

Using custom fields

Enable on-site previewing and editing

Dynamic URLs and advanced data fetching

Adding Custom Code

Using 3rd party libraries

Import HTML

Extending Builder.io with plugins

REST API

HTML API

Content API

GraphQL API

Webhooks

Write API

React

Getting started

Using Next.js

Using Gatsby

Using your React components in Builder

New!

Components-only mode

Triggering custom actions

Angular

Ruby on rails

Webcomponents

Github

Dropdown Menu

Learn how to use and customize the Builder dropdown menu!

How to use the dropdown menu

On your Builder page, select the "block templates" button. Select the template called "dropdown menu." If you do not see it this template, you can use the search bar to find it.

When to use the dropdown menu

The dropdown menu is best used in desktop mode. For devices without a mouse (tablet/mobile), it may be best to switch to the sidebar (hamburger) menu. After you select the dropdown menu, drag and drop it where you want it on your page. In this example we added it to the navigation bar. You can also choose to show the dropdown menu only for certain devices (such as desktop), by using Builder's "hidden" functionality that can be found on the style tab for any element.

To edit and customize the contents of the dropdown menu, you can hover over and then select the content in the dropdown content box. Another way you can edit/select the content in the dropdown menu is by going to the “Layers” tab and selecting the element you want to edit.

Personalizing the dropdown menu

The dropdown menu is fully customizable. You can edit and customize the look and functionality to fit the aesthetic of your page. For example, if you would like to change the font color of the links, you can select the link you’d like to modify and choose a new color. Another example is if you would like the links to change font or background color when hovered over, you can add this animation in the “animations” tab.

Customizing the animation

You can also choose to change the animation of the dropdown menu. For example, you can go to the “Data” tab and change the “mouseover” to “click”, then the dropdown menu won’t appear until a user clicks on the link. You can also change the transition of the dropdown menu.