---
title: "DropdownNavigation — Free Framer component · Best of Framer"
description: "Free Framer component · by madhoundes · Navigation. DropdownNavigation is a customizable dropdown select component for Framer with navigation support and animations."
canonical: "https://framer.elliotli.dev/component/dropdownnavigation"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/DropdownNavigation

# DropdownNavigation

[View on Framer](https://framer.com/marketplace/components/dropdownnavigation/?via=elliot-li)

![DropdownNavigation preview image 1](https://framer.elliotli.dev/og/component/dropdownnavigation/bac29d505fcf6bfc/1600x1200.jpg)

## Summary

DropdownNavigation is a customizable dropdown select component for Framer with navigation support and animations.

## Description

**DropdownNavigation** is a customizable dropdown select component for Framer with navigation support and animations.

### Features

**Navigation & selection**

-   Supports internal and external links (opens external links in new tabs)
    

-   Configurable initial selection via index
    

-   Custom placeholder text
    

-   Click-outside-to-close
    

**Animations**

-   Framer Motion transitions for open/close
    

-   Animated chevron rotation
    

-   Scale and fade transitions
    

-   Selected item checkmark animation
    

-   Hover state transitions
    

**Styling**

-   Font control (family, size, weight, line height) applied to trigger and options
    

-   Color controls: background, text, border, accent
    

-   Adjustable border radius (0–20px)
    

-   Configurable padding (4–32px)
    

-   Optional shadow
    

-   Hover effects with accent color highlights
    

-   Selected state with accent background and checkmark
    

**User experience**

-   Text overflow handling with ellipsis
    

-   Scrollable dropdown (max height 300px)
    

-   Visual feedback for hover and selected states
    

-   Accessible keyboard and mouse interactions
    

-   Static renderer support for previews
    

**Property controls**

-   Array of options (label + link)
    

-   Initial selected index
    

-   Placeholder text
    

-   Extended font controls
    

-   Color pickers for all elements
    

-   Border radius slider
    

-   Padding slider
    

-   Shadow toggle
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #3453

## Details

- **Author**: madhoundes
- **Published**: 2026-01-13
- **Updated**: 2026-01-13
- **Added**: 2025-12-25
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation