Moving location treeview from side panel to top on to website?

Question

I'm not sure this is the best place to post, but here goes.

We have a classifieds website where the left-hand part is divided into three sections: items categories, search criteria, location. I've posted a mockup of the general design.

The issue is that the Categories section will always tend to grow, and the search section will also grow. So most times it will be difficult for the user to view the location section unless they scroll down.

I was thinking of moving the location treeview to the top but using some horizontal pattern. Basically. the same functionality of the location treeview to the top.

I can easily add something like this (Todo la isla > Santo domingo > Santo domingo > Santo domingo este) but I also need the functionality of being able to change locations.

I've been trying to find websites that make use of something similar, but have not found anything.

Any help is appreciated.

Answer 1

One idea is to use a series of horizontally aligned dropdown lists for your Location breadcrumb. When the user selects a location item, you dynamically create the next dropdown list to the right of it.

You may be able to use this as an example or inspiration for your final approach:

http://getbootstrap.com/components/#btn-dropdowns-split

Edit: I just checked craigslist, and it uses a similar approach, although it mixes location along with other search criteria:

http://sandiego.craigslist.org/search/sss