The layered navigation in Magento is a powerful tool that allows customers the convenience of filtering the catalog by filterable product attributes such as price range, color, etc. This is a great way to increase sales by making it easier for customers to find what they want, faster.

A common drawback to this feature is that catalogs with many attributes and attribute sets will generate a very long list in the layered navigation. Many Magento ecommerce shop owners would rather use this space to add callouts for advertisements or sales promotions, but they don't want to lose the powerful functionality that comes with the layered navigation.

An excellent solution to condense the space occopied by the layered navigation is to convert each list of attribute options into a drop-down menu. This will preserve the powerful functionality of the layered navigation while allowing you more vertical space in your sidebar, and even making the layered navigation options more readable. The result should look like this:



Making this change is quick and simple. First, open the file /app/design/frontend/default/your-magento-template/template/catalog/layer/filter.phtml For Magento templates that do not have this file, you may simply create the file at the specified location. Then, replace the content of this file with the following code:

<select onchange="setLocation(this.value)">
<option value=""><?php echo 'Choose an Option...' ?></option>
<?php foreach ($this->getItems() as $_item): ?>
<option
<?php if ($_item->getCount() > 0): ?>
value="<?php echo $this->urlEscape($_item->getUrl()) ?>"><?php echo $_item->getLabel() ?>
<?php else: echo '>' . $_item->getLabel() ?>
<?php endif; ?>
(<?php echo $_item->getCount() ?>)
</option>
<?php endforeach ?>
</select>
As always, after editing any PHTML file in your Magento template, don't forget to refresh Magento's cache via System > Cache Management to see your changes.

To learn more about the Magento Layered Navigation, check out this Magento Screencast