---
title: "Totem Side Bar — Free Framer component · Best of Framer"
description: "Free Framer component · by Aprilia Gunawan · Buttons. A floating logo that opens into a nav."
canonical: "https://framer.elliotli.dev/component/totem-side-bar"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Totem Side Bar

# Totem Side Bar

A floating logo that opens into a nav.

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

![Totem Side Bar preview image 1](https://framer.elliotli.dev/og/component/totem-side-bar/d2a80f6a641d3e33/1600x1200.jpg)

## Summary

A floating logo that opens into a nav.

## Description

**A nav that hides inside your logo**

Your whole sidebar lives inside one floating button. The page stays clean — one logo, nothing else — until someone reaches for it. Hover the logo, and the pill unfurls into a stack of icons. Hover any icon, and its label slips out to the side.

It's the dock pattern, refined for a logo-first brand.

**What you get**

\- **One signature interaction.** Floating logo → vertical nav in a smooth spring morph, with icons cascading in.

\- **Hover-reveal labels.** Each icon stays minimal; the label slides out as its own pill on hover.

\- **Left and right side variants.** Built with Framer variants, so the label direction flips automatically with the side.

\- **Up to five links.** Each with its own label, URL, and upload any image.

\- **Full color control.** Fill, hover background, border, and label color are all customizable to match your brand.

\- **Solid surface.** No backdrop blur, so it sits cleanly over any page background — light, dark, photographic, or solid.

How to set it up

1\. Drop the component on your canvas, set it to **Fixed**, and pin to your chosen edge.

2\. Pick your variant — **Closed - Left** if the rail sits on the left side of the page, **Closed - Right** if it sits on the right. Labels emerge toward the center automatically.

3\. Set the **Trigger** to _On Hover_ so Framer animates between the closed and open variants.

4\. Fill in your five labels, links, and icons.

5\. Tune the colors to match your brand.

Best for

\- Portfolio sites that want one memorable interactive element

\- Landing pages where every pixel of layout matters

\- Brands with a strong logo mark they want centered in the experience

\- Dashboards with a tight set of primary destinations

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

-   All · #3921

## Details

- **Author**: Aprilia Gunawan
- **Published**: 2026-06-05
- **Updated**: 2026-06-05
- **Added**: 2026-06-02
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything