---
title: "Sidebar Pro — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Aidan Looker · Navigation. What is Sidebar Pro?"
canonical: "https://framer.elliotli.dev/component/sidebar-pro"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Sidebar Pro

# Sidebar Pro

Slide-out sidebar with search.

[View on Framer](https://framer.com/marketplace/components/sidebar-pro/?via=elliot-li)

![Sidebar Pro preview image 1](https://framer.elliotli.dev/og/component/sidebar-pro/1b766ad3e0a79211/1600x1200.jpg)

## Summary

What is Sidebar Pro?

## Description

## What is Sidebar Pro?

Sidebar Pro is a premium slide-out navigation panel that overlays your entire page with smooth spring-driven animations. It features multi-level accordion menus, a real-time search filter, and a morphing trigger icon fixed to the viewport edge. Ideal for dashboards, documentation sites, e-commerce stores, and any project that needs powerful off-canvas navigation without compromising page layout.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Animated slide-out panel with configurable spring physics for stiffness, damping, and mass
    
-   Multi-level accordion navigation with nested sub-items and automatic expand on active route
    
-   Real-time search filtering that highlights matching items across all menu levels
    
-   Hamburger-to-close icon morphing animation on the trigger tab
    
-   Glassmorphism panel with backdrop blur and configurable overlay blur on background content
    
-   20 built-in SVG icons, custom image upload per item, or no icon mode
    
-   Full color theming with Dark, Light, and Custom presets including six individual color overrides
    
-   Responsive image support for header logo
    
-   Badge labels per item for notifications, counts, or status tags
    
-   Keyboard dismiss with Escape key and click-outside-to-close overlay
    

## Controls inside Framer

### Menu Items

-   Label, icon mode (Preset, Custom, None), icon picker or image upload
    
-   Link URL with optional new tab
    
-   Badge text
    
-   Divider after toggle
    
-   Nested sub-items array with the same controls
    

### Header

-   Show/hide header
    
-   Title and subtitle text
    
-   Header logo image
    
-   Accent line toggle
    

### Search Bar

-   Show/hide real-time search filter
    

### Trigger Tab

-   Show/hide trigger
    
-   Side placement (Left or Right)
    
-   Vertical position along viewport edge
    
-   Size, color, and border radius
    

### Sidebar Style

-   Theme preset (Dark, Light, Custom)
    
-   Panel width and border radius
    
-   Accent color for active states, badges, and highlights
    
-   Panel Background, Primary Text, Secondary Text, Borders, Item Hover, and Dividers color overrides (visible in Custom mode)
    
-   Panel blur intensity
    
-   Overlay opacity and blur
    

### Animation

-   Spring stiffness, damping, and mass
    

### Font

-   Font family and weight
    

## Best use cases

-   Dashboard and administrator panel navigation with nested sections and notification badges
    
-   Documentation and knowledge base sites with searchable, multi-level menus
    
-   E-commerce stores needing off-canvas category browsing with sub-category drill-down
    
-   Portfolio and agency sites that want premium hidden navigation without sacrificing page real estate
    

Ship polished, interactive navigation in minutes — with the depth and control to match any brand.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

## Rank history [How rankings work →](/terms#rankings)

-   All · #9280

## Details

- **Author**: Aidan Looker
- **Price**: $9.00
- **Published**: 2026-04-22
- **Updated**: 2026-06-13
- **Added**: 2026-04-06
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation