Live Preview š
āØ Key Features
š Flexible Link Modes
CMS Mode ā Connect to your Framer CMS collection and auto-generate URLs from state slugs (e.g.,
/states/california)Manual Mode ā Set individual URLs for each state directly in the property panel ā perfect for linking to external sites or custom pages
š± Mobile-Ready Dropdown
Automatically switches to a clean dropdown selector on mobile devices
Fully customizable breakpoint (default: 768px)
Three dropdown styles: Outlined, Filled, or Minimal
Custom placeholder text, colors, fonts, and border radius
šØ Fully Customizable Styling
Default, hover, active, and disabled state colors
Adjustable stroke color and width
Smooth hover animations with customizable duration and easing
Disabled states appear grayed out when no link is set (Manual Mode)
š·ļø Smart State Labels
Toggle labels on/off
Customize font, size, weight, and colors
Per-state label position overrides via JSON for perfect placement
Leader lines for small states (DE, CT, RI, etc.)
āæ Accessibility Built-In
Keyboard navigation support
ARIA labels and roles
Focus states for screen readers
Semantic SVG structure
ā” Lightweight & Fast
Pure SVG ā no external dependencies
Optimized rendering for smooth interactions
Works seamlessly in Framer's visual editor
šÆ Perfect For
š¢ Service area directories ā "Find a location near you"
š Real estate platforms ā Browse properties by state
š¼ Business directories ā State-by-state listings
š Compliance & legal sites ā State-specific regulations
š„ Healthcare networks ā Find providers by region
š Education portals ā Campus or program locators
š Data visualization ā Regional statistics display
š E-commerce ā Shipping zones or store locators
š ļø Easy Setup
Drop the component onto your Framer canvas
Choose your mode:
CMS Mode ā Set your base path and URL template
Manual Mode ā Enter URLs for each state you want to link
Customize colors, labels, and mobile dropdown settings
Publish ā You're done!
Get it for$20.00
BuyTags
Framer
Product created by
Kevin James ProGainesville, USA
- $10k+
- Earned
- 6
- Paid projects
- 5.00
- Rating
- 21
- Followers
Get it for$20.00
BuyTags
Framer
Live Preview š
āØ Key Features
š Flexible Link Modes
CMS Mode ā Connect to your Framer CMS collection and auto-generate URLs from state slugs (e.g.,
/states/california)Manual Mode ā Set individual URLs for each state directly in the property panel ā perfect for linking to external sites or custom pages
š± Mobile-Ready Dropdown
Automatically switches to a clean dropdown selector on mobile devices
Fully customizable breakpoint (default: 768px)
Three dropdown styles: Outlined, Filled, or Minimal
Custom placeholder text, colors, fonts, and border radius
šØ Fully Customizable Styling
Default, hover, active, and disabled state colors
Adjustable stroke color and width
Smooth hover animations with customizable duration and easing
Disabled states appear grayed out when no link is set (Manual Mode)
š·ļø Smart State Labels
Toggle labels on/off
Customize font, size, weight, and colors
Per-state label position overrides via JSON for perfect placement
Leader lines for small states (DE, CT, RI, etc.)
āæ Accessibility Built-In
Keyboard navigation support
ARIA labels and roles
Focus states for screen readers
Semantic SVG structure
ā” Lightweight & Fast
Pure SVG ā no external dependencies
Optimized rendering for smooth interactions
Works seamlessly in Framer's visual editor
šÆ Perfect For
š¢ Service area directories ā "Find a location near you"
š Real estate platforms ā Browse properties by state
š¼ Business directories ā State-by-state listings
š Compliance & legal sites ā State-specific regulations
š„ Healthcare networks ā Find providers by region
š Education portals ā Campus or program locators
š Data visualization ā Regional statistics display
š E-commerce ā Shipping zones or store locators
š ļø Easy Setup
Drop the component onto your Framer canvas
Choose your mode:
CMS Mode ā Set your base path and URL template
Manual Mode ā Enter URLs for each state you want to link
Customize colors, labels, and mobile dropdown settings
Publish ā You're done!
$20.00