Build Your Map

Table of Content

Step 5: Add a sidebar

Let visitors browse and search your locations in a list next to the map.

The sidebar is a list of your locations on top of the map. Turn it on with Show in the Sidebar group.

 Sidebar controls.


Choose a layout


Image Cards

Category List

What visitors see

A photo, title, rating, price and address for each location

First your categories, then the locations inside one

Search

Yes (names only)

No

Filter pills

Yes, with Group markers ("All" plus one per category)

No

Distance

No

Yes, if Auto Distance is on

Works with

Standard and Group markers

Group markers only

Default for

Standard markers

Group markers


Image Cards show a photo, title, rating, price and address for each location, with a search box.

Image Cards sidebar


Category List first shows your categories. Choosing one shows its locations, with distance if Auto Distance is on. It needs Group markers.

Category List sidebar


Standard markers always use Image Cards. Group markers use Category List unless you pick Image Cards.


Colors you can change on the sidebar:

Setting

What it colors

Background

The sidebar panel

Accent

The active pill and buttons

Border

The pill borders, the search box and its icon

Search and filters

Search finds locations by name only. Choosing a pill or typing in search hides the other markers and fits the map to what is left.

Make it yours

  • Title: the heading at the top

  • Width and Max Width: the sidebar size

  • Background, Accent and Border: colors of the panel, the active pill and the outlines

  • Collapsible: adds a small tab to hide the sidebar

Mobile: on narrow components, Image Cards become a bottom sheet with a handle.

Next: Step 6, design your popup.

MapFlow

·

©

2026

All rights reserved

MapFlow

·

©

2026

All rights reserved

Create a free website with Framer, the website builder loved by startups, designers and agencies.