Unusual Dropdown Component

Copy component

Unusual Dropdown Component

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

Component

Unusual Dropdown Component

This is a cool dropdown concept by Oleg Frolov, implemented in Framer, with no code needed. Feel free to use this on your website if you'd like to add a unique touch to your dropdowns.

image of Nandi Muzsik
profile image of Oleg Frolov

Created by

Dropdown Component for Framer
Dropdown Component for Framer
Dropdown Component for Framer

About the resource

This component isn't too complex. It's made from a single component and uses multiple variants. These variants are linked with interactions.

A nice addition is that I applied a code override to the component so it scales down when clicked. You can find the code for that below, but it's also included in the remix.

Scale down on click code override

Feel free to copy the code and create the code override from scratch in any of your projects.

About the resource

This component isn't too complex. It's made from a single component and uses multiple variants. These variants are linked with interactions.

A nice addition is that I applied a code override to the component so it scales down when clicked. You can find the code for that below, but it's also included in the remix.

Scale down on click code override

Feel free to copy the code and create the code override from scratch in any of your projects.

About the resource

This component isn't too complex. It's made from a single component and uses multiple variants. These variants are linked with interactions.

A nice addition is that I applied a code override to the component so it scales down when clicked. You can find the code for that below, but it's also included in the remix.

Scale down on click code override

Feel free to copy the code and create the code override from scratch in any of your projects.

import type { ComponentType } from "react"
import { useState } from "react"

export function onClick(Component): ComponentType {
    return (props) => {
        const [isClicked, setIsClicked] = useState(false)

        return (
            <Component
                {...props}
                onMouseDown={() => setIsClicked(true)}
                onMouseUp={() => setIsClicked(false)}
                animate={
                    isClicked ? { scale: 0.95, y: 2.5 } : { scale: 1, y: 0 }
                }
                transition={{ duration: 0.1 }}
            />
        )
    }
}
import type { ComponentType } from "react"
import { useState } from "react"

export function onClick(Component): ComponentType {
    return (props) => {
        const [isClicked, setIsClicked] = useState(false)

        return (
            <Component
                {...props}
                onMouseDown={() => setIsClicked(true)}
                onMouseUp={() => setIsClicked(false)}
                animate={
                    isClicked ? { scale: 0.95, y: 2.5 } : { scale: 1, y: 0 }
                }
                transition={{ duration: 0.1 }}
            />
        )
    }
}
import type { ComponentType } from "react"
import { useState } from "react"

export function onClick(Component): ComponentType {
    return (props) => {
        const [isClicked, setIsClicked] = useState(false)

        return (
            <Component
                {...props}
                onMouseDown={() => setIsClicked(true)}
                onMouseUp={() => setIsClicked(false)}
                animate={
                    isClicked ? { scale: 0.95, y: 2.5 } : { scale: 1, y: 0 }
                }
                transition={{ duration: 0.1 }}
            />
        )
    }
}

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

  • The image displays a morphing tab navigation menu with "Home" highlighted in blue and a hover interaction over "Change"

    Morphing Tabs Interaction in Framer

    Component

    The image displays a morphing tab navigation menu with "Home" highlighted in blue and a hover interaction over "Change"

    Morphing Tabs Interaction in Framer

    Component

    The image displays a morphing tab navigation menu with "Home" highlighted in blue and a hover interaction over "Change"

    Morphing Tabs Interaction in Framer

    Component

  • Decorative store banner with icons and blue text pill design

    Magnetic Hover Component for Framer

    Component

    Decorative store banner with icons and blue text pill design

    Magnetic Hover Component for Framer

    Component

    Decorative store banner with icons and blue text pill design

    Magnetic Hover Component for Framer

    Component