ToolbarX

A premium, configurable toolbar library with golden glow animation, 60+ built-in icons, and full dark/light theme support. Zero dependencies — pure vanilla JS & CSS.

Features

• 🌗 Dark & Light themes with animated golden glow
• 📐 Horizontal & vertical orientation
• 📏 Fully configurable dimensions (item size, icon size, padding, radii, etc.)
• 🎨 60+ built-in SVG icons across 10 categories
• 🔌 Custom icon support — bring your own SVGs
• 📱 Responsive auto-scaling via ResizeObserver
• ✨ Sliding pill with spring-eased golden ring animation
• 🪶 Zero dependencies, < 20 KB total

Quick Start

1. Include the files

<link rel="stylesheet" href="toolbar-x/src/toolbar.css">
<script src="toolbar-x/src/icons.js"></script>
<script src="toolbar-x/src/toolbar.js"></script>

2. Create a container

<div id="toolbar-container"></div>

3. Initialize

const toolbar = new ToolbarX({
  container: '#toolbar-container',
  theme: 'dark',
  items: [
    { id: 'home',      icon: 'home',     label: 'Home' },
    { id: 'analytics', icon: 'chart',    label: 'Analytics' },
    { id: 'layers',    icon: 'layers',   label: 'Layers' },
    { id: 'settings',  icon: 'settings', label: 'Settings' },
  ],
  onSelect: (item) => console.log('Selected:', item.id),
});

Configuration Options

| Option | Type | Default | Description | |---|---|---|---| | container | string \| Element | — | Required. CSS selector or DOM element | | theme | string | 'dark' | 'dark' or 'light' | | orientation | string | 'horizontal' | 'horizontal' or 'vertical' | | items | Array | [] | Menu items { id, icon, label } | | activeItem | string | first item | Initially active item ID | | showThemeToggle | boolean | true | Show the built-in theme toggle | | responsive | boolean | true | Auto-scale when container is small | | customIcons | object | {} | Custom icon map { name: svgString } | | onSelect | function | null | Callback (item) => {} | | onThemeChange | function | null | Callback (theme) => {} |

Dimension Options

| Option | Default | Description | |---|---|---| | itemSize | 72 | Item cell size (px) | | iconSize | 30 | SVG icon size (px) | | outerPadding | 10 | Outer container padding | | innerPadding | 6 | Inner track padding | | outerRadius | 28 | Outer border radius | | innerRadius | 20 | Inner track border radius | | itemRadius | 18 | Item / pill border radius | | glowSpread | 5 | Golden glow spread | | sectionGap | 10 | Gap between track and toggle |

Size Presets Example

// Small toolbar
toolbar.setDimensions({
  itemSize: 48, iconSize: 20,
  outerPadding: 7, innerPadding: 4,
  outerRadius: 20, innerRadius: 14, itemRadius: 12,
  glowSpread: 3, sectionGap: 7,
});

// X-Large toolbar
toolbar.setDimensions({
  itemSize: 88, iconSize: 36,
  outerPadding: 12, innerPadding: 8,
  outerRadius: 32, innerRadius: 24, itemRadius: 22,
  glowSpread: 6, sectionGap: 12,
});

Public API

| Method | Description | |---|---| | setActive(id) | Slide pill to an item | | setTheme('dark' \| 'light') | Switch theme | | toggleTheme() | Toggle dark ↔ light | | setOrientation('horizontal' \| 'vertical') | Switch orientation | | setDimensions({ ... }) | Update dimensions live | | registerIcon(name, svg) | Register a custom icon (instance) | | getAvailableIcons() | List all icon names (built-in + custom) | | getTheme() | Get current theme | | getActiveItem() | Get active item ID | | getOrientation() | Get current orientation | | destroy() | Clean up and remove toolbar |

Vertical Orientation

const toolbar = new ToolbarX({
  container: '#sidebar',
  orientation: 'vertical',
  // ...
});

// Or switch at runtime
toolbar.setOrientation('vertical');

Icons

60+ Built-in Icons

ToolbarX ships with 60+ SVG icons organized in 10 categories:

| Category | Icons | |---|---| | Navigation | home, grid, menu, compass, map, arrow-left, arrow-right | | Search | search, filter | | User & Social | user, users, user-plus, heart, thumbs-up, share | | Communication | bell, mail, message-circle, phone, send | | Commerce | wallet, credit-card, shopping-cart, shopping-bag, tag, dollar-sign, gift | | Data | chart, bar-chart, pie-chart, trending-up, activity, layers | | Files | folder, file, clipboard, download, upload, image | | Media | play, pause, music, camera, video, mic | | Dev & Tools | settings, sliders, terminal, code, database, cloud, lock, unlock, key | | Misc | star, bookmark, flag, alert-circle, check-circle, clock, calendar, globe, link, external-link, trash, edit, plus, minus, x, refresh, eye, print |

Custom Icons

There are three ways to use your own icons:

1. Via constructor options

const toolbar = new ToolbarX({
  customIcons: {
    'my-icon': '<svg width="24" height="24" viewBox="0 0 24 24">...</svg>',
  },
  items: [
    { id: 'custom', icon: 'my-icon', label: 'Custom' },
  ],
});

2. Register at runtime

// Instance level (only this toolbar)
toolbar.registerIcon('rocket', '<svg>...</svg>');

// Global level (all toolbars)
ToolbarXIcons.register('rocket', '<svg>...</svg>');

3. Function-based icons (dynamic sizing)

ToolbarXIcons.register('diamond', (size) =>
  `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" stroke-width="1.8">
    <polygon points="12 2 22 12 12 22 2 12"/>
  </svg>`
);

List available icons

toolbar.getAvailableIcons();
// → ['home', 'grid', 'menu', 'compass', ...]

ToolbarXIcons.list();
// → ['home', 'grid', 'menu', 'compass', ...]

Callbacks

const toolbar = new ToolbarX({
  // ...
  onSelect: (item) => {
    console.log('Selected:', item.id, item.label);
  },
  onThemeChange: (theme) => {
    document.body.className = theme;
  },
});

License

MIT