Dynamic Action Bar in Framer

Copy component

Dynamic Action Bar in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Interaction

Dynamic Action Bar in Framer

This is a dynamic action bar interaction in Framer, recreated from the amazing Henrik's original work. It's basically a dynamic island in the context of navigation. Feel free to remix the project to see how it's built without any code, or copy the component to your Framer project.

image of Nandi Muzsik
profile image of Henrik Ruscon

Created by

Dynamic Action Bar in Framer
Dynamic Action Bar in Framer
Dynamic Action Bar in Framer

About the resource

To create an interaction like this in Framer, we have to work with multiple components and variants.

When I start such projects, I try breaking down the element into smaller components that I can later assemble into the complete interaction.

So, I create components for the navigation items in the action bar, such as "Apps," "Components," and "Notes," with an active and a default variant.

About the resource

To create an interaction like this in Framer, we have to work with multiple components and variants.

When I start such projects, I try breaking down the element into smaller components that I can later assemble into the complete interaction.

So, I create components for the navigation items in the action bar, such as "Apps," "Components," and "Notes," with an active and a default variant.

About the resource

To create an interaction like this in Framer, we have to work with multiple components and variants.

When I start such projects, I try breaking down the element into smaller components that I can later assemble into the complete interaction.

So, I create components for the navigation items in the action bar, such as "Apps," "Components," and "Notes," with an active and a default variant.

menu item component

Menu item component with a "Default" and "Active" variant.

menu item component

Menu item component with a "Default" and "Active" variant.

menu item component

Menu item component with a "Default" and "Active" variant.

I create similar components for other repetitive parts of the elements, like the items seen in each category, such as "Apps Items," "Components Items," and "Notes Items." Each has a hover state and hover interaction so I don't have to deal with that later in the interaction. I also set up component variables for the title and other parts of the items so I can customize them easily from the canvas.

I create similar components for other repetitive parts of the elements, like the items seen in each category, such as "Apps Items," "Components Items," and "Notes Items." Each has a hover state and hover interaction so I don't have to deal with that later in the interaction. I also set up component variables for the title and other parts of the items so I can customize them easily from the canvas.

I create similar components for other repetitive parts of the elements, like the items seen in each category, such as "Apps Items," "Components Items," and "Notes Items." Each has a hover state and hover interaction so I don't have to deal with that later in the interaction. I also set up component variables for the title and other parts of the items so I can customize them easily from the canvas.

the componets for each item category

From top to bottom: the "Apps Items," "Components Items," and "Notes Items" components and their hover state interactions.

the componets for each item category

From top to bottom: the "Apps Items," "Components Items," and "Notes Items" components and their hover state interactions.

the componets for each item category

From top to bottom: the "Apps Items," "Components Items," and "Notes Items" components and their hover state interactions.

Once these smaller components are built, the main "Dynamic Action Bar" component can be created, where the 4 main variants are established. We need one state for the "Default" menu, where nothing is hovered. Then, 3 other variants are created for each hover state: "Apps," "Components," and "Notes."

These variants are then connected with mouse enter and mouse leave interactions. So, for example, when we hover over the "Apps" menu item, we switch to the "Apps" variant.

Once these smaller components are built, the main "Dynamic Action Bar" component can be created, where the 4 main variants are established. We need one state for the "Default" menu, where nothing is hovered. Then, 3 other variants are created for each hover state: "Apps," "Components," and "Notes."

These variants are then connected with mouse enter and mouse leave interactions. So, for example, when we hover over the "Apps" menu item, we switch to the "Apps" variant.

Once these smaller components are built, the main "Dynamic Action Bar" component can be created, where the 4 main variants are established. We need one state for the "Default" menu, where nothing is hovered. Then, 3 other variants are created for each hover state: "Apps," "Components," and "Notes."

These variants are then connected with mouse enter and mouse leave interactions. So, for example, when we hover over the "Apps" menu item, we switch to the "Apps" variant.

the main component in Framer

The main "Dynamic Action Bar" component and its variants.

the main component in Framer

The main "Dynamic Action Bar" component and its variants.

the main component in Framer

The main "Dynamic Action Bar" component and its variants.

To perfect the animation, we can check the transition on each variant and adjust the spring settings to get a nice, bouncy feel. You can see my settings for the transition of the main component below.

To perfect the animation, we can check the transition on each variant and adjust the spring settings to get a nice, bouncy feel. You can see my settings for the transition of the main component below.

To perfect the animation, we can check the transition on each variant and adjust the spring settings to get a nice, bouncy feel. You can see my settings for the transition of the main component below.

The spring transition settings in the main component.

The spring transition settings in the main component.

The spring transition settings in the main component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Hand holding a retro-inspired compact camera with side previews

    Fluid Album Viewer in Framer

    Interaction

    Hand holding a retro-inspired compact camera with side previews

    Fluid Album Viewer in Framer

    Interaction

    Hand holding a retro-inspired compact camera with side previews

    Fluid Album Viewer in Framer

    Interaction

  • Showcase of spatial 3D cards in a marketplace layout

    Spatial 3D Hero Section in Framer

    Interaction

    Showcase of spatial 3D cards in a marketplace layout

    Spatial 3D Hero Section in Framer

    Interaction

    Showcase of spatial 3D cards in a marketplace layout

    Spatial 3D Hero Section in Framer

    Interaction