Perfect for businesses, directories, real estate platforms, and service-based websites that need to direct users to state-specific content with a single click. Whether you're building a state-by-state directory, showcasing regional services, or creating a location finder — this component delivers a polished, professional experience with zero coding required.
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
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
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)
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.)
Built-In Keyboard navigation support ARIA labels and roles Focus states for screen readers Semantic SVG structure
Pure SVG — no external dependencies
Optimized rendering for smooth interactions
Works seamlessly in Framer's visual editor
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 --- ##
Property Controls
Link Mode: CMS Collection or Manual LinksCMS Settings: Base Path, URL TemplateManual Links: Individual URL input for all 50 states + DCStyling: Fill, Hover, Active, Disabled colors; StrokeAnimation: Hover duration and easingLabels: Show/hide, font, colors, position overridesMobile: Enable dropdown, breakpoint, style, colorsActive State: Set via slug (great for CMS page binding)
Kevin James
