Documentation - Design System

Contextual floating toolbars that can be positioned anywhere on screen, perfect for media controls, tool palettes, and quick actions.

Overview

Floating toolbars provide non-intrusive, contextual controls that hover above your content. They’re ideal for applications where screen space is premium or when you need controls that can be repositioned by users.

Key Features

Flexible Positioning: Place toolbars at any edge or corner
Glass Morphism: Semi-transparent with backdrop blur
Contextual Actions: Show relevant tools based on context
Audio Controls: Built-in support for media playback
Responsive Design: Adapts orientation based on position
Keyboard Accessible: Full keyboard navigation support

Interactive Demo

Navigation Toolbar

Common navigation actions with hover states

Usage

<script>
import Icon from '$lib/shared/components/primitives/Icon.svelte';
</script>

<div class="floating-toolbar toolbar-horizontal toolbar-bottom">
	<button class="toolbar-item">
		<Icon src="/svg/navigation/home-smile.svg" size={20} />
	</button>
	<button class="toolbar-item">
		<Icon src="/svg/navigation/settings-minimalistic.svg" size={20} />
	</button>
	<button class="toolbar-item">
		<Icon src="/svg/user/login.svg" size={20} />
	</button>
</div>

<div class="floating-toolbar toolbar-horizontal toolbar-bottom">
	<button class="toolbar-item" onclick={previousTrack}>
		<Icon src="/svg/audio/skip-previous.svg" size={20} />
	</button>
	<button class="toolbar-item toolbar-item-active" onclick={togglePlay}>
		<Icon src="/svg/audio/play.svg" size={20} />
	</button>
	<button class="toolbar-item" onclick={nextTrack}>
		<Icon src="/svg/audio/skip-next.svg" size={20} />
	</button>
</div>

Zoom Controls

<div class="floating-toolbar toolbar-horizontal toolbar-zoom">
	<button class="toolbar-item" onclick={() => zoom('out')}>
		<Icon src="/svg/zoom/rounded-magnifer-zoom-out.svg" size={16} />
	</button>

	<div class="zoom-display-inline">
		<span class="zoom-text">100%</span>
	</div>

	<button class="toolbar-item" onclick={() => zoom('in')}>
		<Icon src="/svg/zoom/rounded-magnifer-zoom-in.svg" size={16} />
	</button>
</div>

Positioning System

Position Classes

The toolbar position is controlled by combining position and orientation classes:

Position Class	Orientation	Description
`toolbar-top`	`toolbar-horizontal`	Centered at top
`toolbar-right`	`toolbar-vertical`	Centered on right
`toolbar-bottom`	`toolbar-horizontal`	Centered at bottom
`toolbar-left`	`toolbar-vertical`	Centered on left

Custom Positioning

/* Top left corner */
.toolbar-top-left {
	top: var(--space-4);
	left: var(--space-4);
}

/* Bottom right corner */
.toolbar-bottom-right {
	bottom: var(--space-4);
	right: var(--space-4);
}

/* Custom position */
.toolbar-custom {
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}

Styling

Glass Effect

The floating toolbar uses a glass morphism effect:

.floating-toolbar {
	background: color-mix(in oklch, var(--surface) 95%, transparent);
	backdrop-filter: blur(10px);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

Item States

/* Default state */
.toolbar-item {
	background: transparent;
	color: var(--typography-body-color);
}

/* Hover state */
.toolbar-item:hover {
	background: var(--surface-secondary);
	color: var(--typography-heading-color);
}

/* Active state */
.toolbar-item-active {
	background: var(--primary);
	color: white;
}

/* Disabled state */
.toolbar-item:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

Patterns

Tool Palette

For design or drawing applications:

<div class="floating-toolbar toolbar-vertical toolbar-left">
	{#each tools as tool}
		<button
			class="toolbar-item"
			class:toolbar-item-active={selectedTool === tool.id}
			onclick={() => selectTool(tool.id)}
			title={tool.label}
		>
			<Icon src={tool.icon} size={20} />
		</button>
	{/each}
</div>

Media Controller

For video or audio players:

<div class="floating-toolbar toolbar-horizontal toolbar-bottom">
	<button class="toolbar-item">
		<Icon src="/svg/audio/skip-previous.svg" size={20} />
	</button>

	<button class="toolbar-item toolbar-item-active">
		<Icon src={isPlaying ? '/svg/audio/pause.svg' : '/svg/audio/play.svg'} size={20} />
	</button>

	<button class="toolbar-item">
		<Icon src="/svg/audio/skip-next.svg" size={20} />
	</button>

	<div class="toolbar-divider"></div>

	<button class="toolbar-item">
		<Icon src="/svg/audio/stop.svg" size={20} />
	</button>
</div>

Quick Actions

For frequently used actions:

<div class="floating-toolbar toolbar-horizontal toolbar-top">
	<button class="toolbar-item" onclick={save}>
		<Icon src="/svg/ui_icons/save.svg" size={20} />
	</button>

	<button class="toolbar-item" onclick={share}>
		<Icon src="/svg/ui_icons/share.svg" size={20} />
	</button>

	<button class="toolbar-item" onclick={print}>
		<Icon src="/svg/ui_icons/print.svg" size={20} />
	</button>
</div>

Accessibility

Tab: Navigate between toolbar items
Arrow Keys: Move between items in vertical/horizontal toolbars
Enter/Space: Activate buttons
Escape: Close or minimize toolbar (if applicable)

ARIA Attributes

<div class="floating-toolbar" role="toolbar" aria-label="Media controls">
	<button
		class="toolbar-item"
		aria-label="Play"
		aria-pressed={isPlaying}
	>
		<Icon src="/svg/audio/play.svg" size={20} />
	</button>
</div>

Provide descriptive aria-label attributes
Use role="toolbar" for the container
Include aria-pressed for toggle buttons
Add aria-disabled for disabled states

Best Practices

Positioning Guidelines

Consider Content: Don’t obstruct important content
Edge Awareness: Keep toolbars away from screen edges on mobile
Predictable Placement: Use consistent positions across your app
Allow Repositioning: Let users move toolbars if needed

Content Guidelines

Limit Items: 3-7 items per toolbar for optimal usability
Group Related: Use dividers to separate action groups
Clear Icons: Use recognizable, consistent iconography
Provide Tooltips: Add title attributes for clarity

Performance Tips

Use CSS Transforms: For smooth positioning animations
Backdrop Filter: Be mindful of performance on lower-end devices
Lazy Load: Only render toolbars when needed
Debounce Updates: For position changes during scroll/resize

Advanced Features

Draggable Toolbars

Make toolbars draggable with drag handles:

<div
	class="floating-toolbar"
	draggable="true"
	ondragstart={handleDragStart}
	ondragend={handleDragEnd}
>
	<div class="toolbar-handle">⋮⋮</div>
	<!-- Toolbar items -->
</div>

Auto-Hide

Hide toolbar when inactive:

<script>
let showToolbar = $state(true);
let hideTimer;

function resetHideTimer() {
	clearTimeout(hideTimer);
	showToolbar = true;
	hideTimer = setTimeout(() => showToolbar = false, 3000);
}
</script>

{#if showToolbar}
	<div
		class="floating-toolbar"
		onmouseenter={resetHideTimer}
		onmouseleave={resetHideTimer}
	>
		<!-- Toolbar items -->
	</div>
{/if}

Context-Sensitive

Show different tools based on selection:

{#if selectedType === 'text'}
	<TextToolbar />
{:else if selectedType === 'image'}
	<ImageToolbar />
{:else}
	<DefaultToolbar />
{/if}

Toolbar - Standard fixed toolbars
Navigation Tabs - Tab-based navigation
Popover - Contextual popover menus

Summary

Floating toolbars provide flexible, space-efficient controls that enhance user experience without cluttering the interface. With support for multiple positions, glass morphism effects, and full accessibility features, they’re perfect for modern web applications that need contextual, non-intrusive controls. The component’s modular design allows for easy customization while maintaining consistent styling across your application.

Floating Toolbar