Toolbar

A flexible toolbar component with a three-section grid layout system for organizing controls, titles, and actions in headers, modals, and panels.

Overview

The Toolbar component provides a structured layout for interface controls with left, center, and right sections. It’s commonly used in modal headers, panel controls, mobile app bars, and anywhere you need organized horizontal controls.

Key Features

• Three-Section Grid: Left-aligned, centered, and right-aligned content areas
• Flexible Content: Use any combination of sections or leave them empty
• Multiple Variants: Default, glass effect, and minimal styles
• Draggable Handle: Optional handle indicator for draggable surfaces
• Responsive Design: Adapts spacing and sizing for mobile devices
• Snippet-Based: Uses Svelte 5 snippets for maximum flexibility

Interactive Demo

Usage

Basic Implementation

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

<Toolbar>
	{#snippet left()}
		<button class="toolbar-btn" aria-label="Menu">
			<Icon name="menu" size={20} />
		</button>
	{/snippet}
	
	{#snippet center()}
		<h2>Page Title</h2>
	{/snippet}
	
	{#snippet right()}
		<button class="toolbar-btn" aria-label="Settings">
			<Icon name="settings" size={20} />
		</button>
	{/snippet}
</Toolbar>

With Variants

<!-- Glass effect for overlays -->
<Toolbar variant="glass">
	{#snippet center()}
		<span>Floating Panel</span>
	{/snippet}
</Toolbar>

<!-- Minimal for subtle headers -->
<Toolbar variant="minimal">
	{#snippet left()}
		<span>Section Name</span>
	{/snippet}
</Toolbar>

<!-- With draggable handle -->
<Toolbar showHandle={true}>
	{#snippet center()}
		<span>Drag to Move</span>
	{/snippet}
</Toolbar>

Layout System

Three-Section Grid

The toolbar uses CSS Grid with three columns:

grid-template-columns: 1fr auto 1fr;

• Left Section: Flex-start alignment, typically for navigation/menu
• Center Section: Auto-width, centered content
• Right Section: Flex-end alignment, typically for actions/close

Section Usage

You can use any combination of sections:

<!-- All three sections -->
<Toolbar>
	{#snippet left()}</>
	{#snippet center()}</>
	{#snippet right()}</>
</Toolbar>

<!-- Just left and right -->
<Toolbar>
	{#snippet left()}</>
	{#snippet right()}</>
</Toolbar>

<!-- Center only -->
<Toolbar>
	{#snippet center()}</>
</Toolbar>

API Reference

Props

CSS Classes

The component provides global CSS classes for toolbar buttons:

.toolbar-btn {
	width: 2.25rem;
	height: 2.25rem;
	/* Consistent button styling */
}

Variants

Default

Standard toolbar with solid background:

<Toolbar variant="default">
	<!-- Content -->
</Toolbar>

Glass

Translucent with backdrop blur for overlay effects:

<Toolbar variant="glass">
	<!-- Content -->
</Toolbar>

Properties:

• Light mode: 10% opacity white
• Dark mode: 20% opacity black
• 8px backdrop blur

Minimal

Transparent background with no borders:

<Toolbar variant="minimal">
	<!-- Content -->
</Toolbar>

Common Patterns

Modal Header

<Toolbar>
	{#snippet left()}
		<h3 class="modal-title">{title}</h3>
	{/snippet}
	{#snippet right()}
		<button class="toolbar-btn" onclick={close}>
			<Icon name="close" />
		</button>
	{/snippet}
</Toolbar>

Mobile App Bar

<Toolbar>
	{#snippet left()}
		<button class="toolbar-btn" onclick={toggleMenu}>
			<Icon name="menu" />
		</button>
	{/snippet}
	{#snippet center()}
		<span class="app-title">My App</span>
	{/snippet}
	{#snippet right()}
		<button class="toolbar-btn" onclick={showNotifications}>
			<Icon name="bell" />
		</button>
	{/snippet}
</Toolbar>

Panel Controls

<Toolbar>
	{#snippet left()}
		<div class="button-group">
			<button class="toolbar-btn">
				<Icon name="add" />
			</button>
			<button class="toolbar-btn">
				<Icon name="edit" />
			</button>
		</div>
	{/snippet}
	{#snippet right()}
		<button class="toolbar-btn">
			<Icon name="more-vertical" />
		</button>
	{/snippet}
</Toolbar>

Draggable Surface

<Toolbar showHandle={true} variant="glass">
	{#snippet center()}
		<span>Floating Panel</span>
	{/snippet}
</Toolbar>

Styling

Custom Styles

Override default styles with custom classes:

<Toolbar class="custom-toolbar">
	<!-- Content -->
</Toolbar>

<style>
.custom-toolbar {
	--toolbar-height: 64px;
	--toolbar-padding: var(--space-4);
	background: var(--custom-bg);
}
</style>

Button Styling

The .toolbar-btn class provides consistent button styling:

:global(.toolbar-btn) {
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
}

:global(.toolbar-btn:hover) {
	background: var(--surface-secondary);
}

Accessibility

ARIA Labels

Always provide proper ARIA labels for icon-only buttons:

<button class="toolbar-btn" aria-label="Open menu">
	<Icon name="menu" />
</button>

Keyboard Navigation

• All interactive elements should be keyboard accessible
• Use semantic HTML elements (button, not div)
• Provide focus indicators
• Support Escape key for close actions

Screen Readers

• Use heading elements for titles
• Provide text alternatives for icons
• Use semantic landmarks when appropriate

Best Practices

Content Guidelines

1. Keep it Simple: Don’t overcrowd the toolbar
2. Group Related Actions: Use the section layout logically
3. Prioritize Actions: Most important actions on the edges
4. Consistent Icons: Use the same icon set throughout

Implementation Tips

1. Use Snippets: Leverage Svelte 5’s snippet syntax for flexibility
2. Responsive Design: Test on mobile devices
3. Touch Targets: Maintain 44px minimum for mobile
4. Loading States: Consider skeleton states for async content

Related Components

• Floating Toolbar - Contextual floating toolbars
• Table of Contents - Document navigation sidebar
• Navigation Tabs - Horizontal tab navigation
• Pagination - Page navigation controls

Summary

The Toolbar component provides a flexible, three-section layout system for organizing interface controls. With multiple visual variants, responsive design, and snippet-based content slots, it adapts to various use cases from modal headers to mobile app bars. The component maintains consistent spacing and alignment while allowing complete customization of content in each section.