5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:T7dd,

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

59:[["$","$L5c",null,{"post":{"id":"019e98af-ce7f-775b-b9e2-b180e3c2083f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"488e6f12-179d-48dd-a27d-dff837475402","name":"Aprilia Gunawan","slug":"byaoril","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1210889/avatar-mk2JPxVxi5Cg2adNKMkphUcWyHjS7m.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"vqmp8j9pE7xjAN7AJacS","resolved":true,"title":"Totem Side Bar","body":"$5d","bodyJson":null,"introduction":"A floating logo that opens into a nav.","slug":"totem-side-bar","author":{"framerUserId":"488e6f12-179d-48dd-a27d-dff837475402","name":"Aprilia Gunawan","slug":"byaoril","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1210889/avatar-mk2JPxVxi5Cg2adNKMkphUcWyHjS7m.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/vqmp8j9pE7xjAN7AJacS/totem-side-bar-yjy1jbf3iJZ7bWsbkXEPqr5U8wL3v7","metadata":{"tint":"hsl(0 0% 9%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-06-02T17:50:32.096Z","updatedAt":"2026-06-05T16:37:22.224Z","publishedAt":"2026-06-05T16:48:39.039Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Totem-Side-Bar-Component-wRr7YW.js@3C0HF17XKQ5exFUg4lDT","previewUrl":"https://totembar.framer.website","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"3C0HF17XKQ5exFUg4lDT"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":20,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-05T16:48:39.039Z","updatedAt":"2026-06-05T16:48:39.039Z","reported":false}}],"$L5e"]

Suggested for you