---
title: "SelectToolbar — Free Framer component · Best of Framer"
description: "Free Framer component · by Evixel Studio · Text. Toolbar that appears on selection"
canonical: "https://framer.elliotli.dev/component/selecttoolbar"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/SelectToolbar

# SelectToolbar

Floating text selection toolbar

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

![SelectToolbar preview image 1](https://framer.elliotli.dev/og/component/selecttoolbar/459bd4a60068faca/1600x1200.jpg)

## Summary

Toolbar that appears on selection

## Description

SelectBar is a zero-friction text interaction layer for Framer. Highlight any text and a polished floating toolbar appears instantly — copy, share, search, or speak, right in context. Invisible in the editor, active on preview and publish only.

### Use Cases

-   **Blogs & editorial** — Let readers share quotes to X, WhatsApp, or Telegram in one tap
    
-   **Docs & knowledge bases** — Copy and Google search for quick reference
    
-   **Landing pages** — AI search keeps visitors exploring without bouncing
    

### Prop Controls

-   **Scope** — Global watches the whole page; Parent restricts to the containing layer only
    
-   **Actions** — Pick and reorder up to 7 actions: Copy, Highlight, Read Aloud, Search, AI Search, X, Share
    
-   **Mobile Menu** — Custom Only, Default Only, or Both for touch device handling
    

### Quick Guide

-   Drop it once on your canvas with **Scope → Global** for most use cases, or switch to **Parent** to target a specific section like a blog body
    
-   Use the **Appearance** controls to match your brand — background, icon color, radius, and shadow are all adjustable
    
-   Remove or reorder **Actions** to prioritize what matters, then hit Preview and select any text to see it live
    

### A note on Mobile Menu

_On mobile, selecting text already triggers the device's native menu — the one with Cut, Copy, Paste and so on. The Mobile Menu prop lets you decide how SelectBar behaves alongside it._ _Use_ **_Custom Only_** _to suppress the native menu and show just your toolbar,_ **_Default Only_** _to keep the native menu and hide your custom one, or_ **_Both_** _to show them together. Custom Only is recommended for most sites since it gives you full control over the experience._

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

-   All · #6811

## Details

- **Author**: Evixel Studio
- **Published**: 2026-03-12
- **Updated**: 2026-09-19
- **Added**: 2026-03-08
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing