Floating Toolbar

A customizable floating toolbar component with Modus icons, supporting buttons, toggles, dropdowns, and selects.

Examples

Default Text Editor Toolbar

A complete toolbar with text formatting, alignment, lists, insert options, and view controls.

Interactive Demo

Try the toolbar below. It's contained within this card to demonstrate positioning.

Interactive toolbar demo - click buttons to see active states

Content area with floating toolbar

Active States:

Click toolbar buttons to see active states

Vertical Toolbar

A compact vertical toolbar with 7 essential buttons for space-efficient layouts.

Vertical Toolbar Demo

A vertical toolbar positioned on the left side of the content area.

Content area with vertical toolbar

Active States:

Click toolbar buttons to see active states

Fixed Toolbar

A fixed toolbar that takes the full width of its container, perfect for app headers.

Fixed Toolbar Demo

A fixed toolbar positioned at the top of the content area, spanning full width.

Content area with fixed toolbar above

Active States:

Click toolbar buttons to see active states

Component Location

The floating toolbar component is located in the @/components/toolbars directory.

Project Structure

components/
├── toolbars/
│   ├── floating-toolbar.tsx          # Main toolbar component
│   └── index.ts                      # Export file
├── ui/
│   ├── button.tsx
│   ├── dropdown-menu.tsx
│   ├── toggle.tsx
│   ├── select.tsx
│   ├── separator.tsx
│   ├── tooltip.tsx
│   └── ...
└── ...

Usage:
import { FloatingToolbar, createDefaultToolbarSections } from "@/components/toolbars"

Custom Configuration

Create custom toolbar sections with different item types.

Custom sections example

const customSections = [
  {
    id: "formatting",
    items: [
      {
        id: "bold",
        label: "Bold",
        icon: <i className="modus-icons">text_bold</i>,
        shortcut: "Ctrl+B",
        type: "toggle"
      },
      {
        id: "colors",
        label: "Text Color",
        icon: <i className="modus-icons">palette</i>,
        type: "dropdown",
        items: [
          { id: "black", label: "Black" },
          { id: "red", label: "Red" },
          { id: "blue", label: "Blue" }
        ]
      }
    ]
  }
]

Vertical Toolbar Configuration

Use the pre-configured vertical toolbar with 7 essential buttons.

Vertical toolbar example

import { FloatingToolbar, createVerticalToolbarSections } from "@/components/toolbars"

function MyVerticalToolbar() {
  return (
    <FloatingToolbar
      sections={createVerticalToolbarSections()}
      position="contained"
      orientation="vertical"
      onAction={handleAction}
      activeStates={activeStates}
      showTooltips={true}
    />
  )
}

Fixed Toolbar Configuration

Use the fixed variant for toolbars that should take the full width of their container.

Fixed toolbar example

import { FloatingToolbar, createDefaultToolbarSections } from "@/components/toolbars"

function MyFixedToolbar() {
  return (
    <FloatingToolbar
      sections={createDefaultToolbarSections()}
      position="contained"
      variant="fixed"
      onAction={handleAction}
      activeStates={activeStates}
      showTooltips={true}
    />
  )
}

Positioning

The toolbar supports multiple positioning options.

Positioning examples

// Floating toolbar (default)
<FloatingToolbar position="top" sections={sections} />

// Fixed toolbar (full width)
<FloatingToolbar 
  position="contained" 
  variant="fixed"
  sections={sections} 
/>

// Vertical toolbar
<FloatingToolbar 
  position="contained" 
  orientation="vertical"
  sections={createVerticalToolbarSections()} 
/>

// Bottom positioning (fixed to viewport)
<FloatingToolbar position="bottom" sections={sections} />

// Contained positioning (relative to parent)
<FloatingToolbar position="contained" sections={sections} />

// Custom positioning
<FloatingToolbar 
  position="custom" 
  customPosition={{ top: "20px", right: "20px" }}
  sections={sections} 
/>

Usage

components/my-editor.tsx

import { FloatingToolbar, createDefaultToolbarSections } from "@/components/toolbars"

function MyEditor() {
  const [activeStates, setActiveStates] = useState({})
  
  const handleAction = (actionId: string) => {
    console.log('Action:', actionId)
    // Handle toolbar actions
  }

  return (
    <FloatingToolbar
      sections={createDefaultToolbarSections()}
      position="top"
      onAction={handleAction}
      activeStates={activeStates}
      showTooltips={true}
    />
  )
}

API Reference