Beaver Builder Component Class Dropdown Plugin

The Beaver Builder Component Class Dropdown plugin takes the power of Beaver Builder 2.10’s new Components feature and supercharges it with component-specific utility classes. While my original Beaver Builder Utility Class Dropdown Plugin handles global utility classes across your entire site, this new plugin lets you define utility classes that are specific to individual components, keeping your utility class organization clean and contextual.

How it works

When you create a component in Beaver Builder, you define which settings are globally managed and which are editable per instance. The Component Class Dropdown plugin adds a new “Component Classes” field in the Advanced tab where you define your utility classes using value : Label pairs (like bg-primary : Primary Background).

These classes then appear in a “Style Options” dropdown that’s unique to that specific component. Each module within your component can have one class selected from this dropdown, making it perfect for choosing between predefined variations without cluttering your interface with unrelated options.

The dropdown is labeled “Style Options” in the interface to make it intuitive for end users working with your components, while you (the component creator) define the actual utility classes behind the scenes.

Example Use Case

Let’s say you’ve created a button component for your site. With the BB Component Class Dropdown plugin, you can define button variations like:

• Outline Button (btn-outline) – A secondary button style with just a border
• Arrow Button (btn-arrow) – A button with an arrow icon

When you use this button component throughout your site, you’ll only see these relevant options in the dropdown. No more scrolling through font size classes, background utilities, or other unrelated options. Each component instance can use a different variation, but you maintain design consistency through your predefined classes.

If you nest this button component inside another component (like a card component), those same utility class options will be available for the nested button, giving you consistent styling options no matter where the component is used.

This approach is perfect for creating design systems where you want controlled variation within components. You get the flexibility to adapt components to different contexts while maintaining the consistency and efficiency that utility classes provide.

The plugin is designed for users who are already leveraging Beaver Builder’s Components feature and want to take their utility class workflow to the next level. It’s the perfect companion to the free Utility Class Dropdown plugin, giving you both global and component-specific class management in one powerful combination.

Setting up component-specific utility classes

Setting up component-specific utility classes is straightforward:

1. Create or Edit a Component: When working with a component in Beaver Builder, navigate to the Advanced tab
2. Define Component Classes: In the new “Component Classes” section, define your component-specific utility classes using the same format that ACF uses of value : Label pairs like this:
   btn-outline : Outline Button
btn-arrow : Arrow Button
3. Enable Per-Instance Editing: Click the plug icon next to the “Style Options” dropdown to make it editable on a per-instance basis
4. Use in Your Components: When you add an instance of this component to your page, you’ll see the “Style Options” dropdown with only the relevant class options you defined

The plugin works seamlessly alongside the original Beaver Builder Utility Class Dropdown Plugin. If you’ve enabled the global utility class field to be editable on a per-instance basis, you’ll have access to both your global utility classes (where you can select multiple) and your component-specific classes (where you select just one per module).