Toolbar

Horizontal toolbar with start, center, and end slots.

Components

Toolbar

layout

hybrid

<arc-toolbar>

Overview

Toolbar is a horizontal action bar that groups related controls — buttons, dropdowns, search fields — into a consistent strip above or within a content region. It follows the classic start/center/end three-slot pattern: the start slot anchors left-aligned actions (like a file menu or back button), the center slot holds a title or contextual info, and the end slot pins right-aligned actions (like save, share, or settings). The component renders with `role="toolbar"` for accessibility, signaling to screen readers that the contained controls are a logically grouped set. Two size variants are available: the default `md` size (48px height) for primary toolbars and the `sm` size (36px height) for secondary or nested toolbars. The `border` prop (on by default) adds a subtle bottom border to visually separate the toolbar from the content below. When the `sticky` prop is set, the toolbar uses `position: sticky` with `top: 0` and a z-index of 50, keeping it visible as the user scrolls through long content. The toolbar background uses `--bg-card` to provide a slight elevation from the page surface. Combine Toolbar with SplitPane panels, code editors, or document viewers where contextual actions should remain accessible without scrolling.

Guidelines

When to use

Use Toolbar above content panels, editors, and detail views for contextual actions
Place the most important action (e.g. Save) in the end slot where users expect it
Use size="sm" for secondary toolbars nested inside panels or split panes
Enable sticky for long scrollable content where the toolbar should remain visible
Group related buttons together in each slot for visual clarity

When not to use

Do not use Toolbar as the primary site navigation — use TopBar or NavigationMenu instead
Do not overload the toolbar with more than five or six controls; move overflow into a DropdownMenu
Do not nest Toolbar inside another Toolbar — use a single toolbar with grouped slot content
Do not disable the border prop when the toolbar sits above content with the same background color
Do not use Toolbar for status information — use StatusBar for persistent informational displays

Features

Three-slot layout: start (left-pinned), center (flexible), end (right-pinned)
`role="toolbar"` for accessible grouping of related controls
Two size variants: md (48px) and sm (36px) for primary and secondary toolbars
Optional bottom border via the border prop (enabled by default)
Sticky positioning with top: 0 and z-index: 50 when sticky is set
Card-colored background (`--bg-card`) for subtle elevation above the page surface
Exposed CSS parts (base, start, center, end) for targeted ::part() styling
Consistent gap spacing (`--space-sm`) between slotted controls

Preview

File

Edit

View

Document.txt

Save

Document content area

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<arc-toolbar border>
  <div slot="start"><arc-button variant="ghost" size="sm">File</arc-button></div>
  <span>Document.txt</span>
  <div slot="end"><arc-button variant="ghost" size="sm">Save</arc-button></div>
</arc-toolbar>

<!-- Items that no longer fit collapse (from the end) into a "More" menu.
     Collapsed originals stay in the light DOM with the hidden attribute;
     the menu shows text-label proxies that forward clicks to them. -->
<arc-toolbar overflow>
  <arc-button slot="start" variant="ghost" size="sm">File</arc-button>
  <arc-button slot="start" variant="ghost" size="sm">Edit</arc-button>
  <arc-button slot="start" variant="ghost" size="sm">View</arc-button>
  <arc-button slot="start" variant="ghost" size="sm">Insert</arc-button>
  <arc-button slot="start" variant="ghost" size="sm">Format</arc-button>
  <arc-icon-button slot="end" name="share" label="Share"></arc-icon-button>
  <arc-button slot="end" variant="primary" size="sm">Save</arc-button>
</arc-toolbar>

<script>
  document.querySelector('arc-toolbar')
    .addEventListener('arc-overflow-change', (e) => {
      console.log('hidden items:', e.detail.hiddenCount);
    });
</script>

import { Button, Toolbar } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <Toolbar border>
      <div slot="start"><Button variant="ghost" size="sm">File</Button></div>
      <span>Document.txt</span>
      <div slot="end"><Button variant="ghost" size="sm">Save</Button></div>
    </Toolbar>
  );
}

<script setup>
import { Button, Toolbar } from '@arclux/arc-ui-vue';
</script>

<template>
  <Toolbar border>
    <div slot="start"><Button variant="ghost" size="sm">File</Button></div>
    <span>Document.txt</span>
    <div slot="end"><Button variant="ghost" size="sm">Save</Button></div>
  </Toolbar>
</template>

<script>
  import { Button, Toolbar } from '@arclux/arc-ui-svelte';
</script>

<Toolbar border>
  <div slot="start"><Button variant="ghost" size="sm">File</Button></div>
  <span>Document.txt</span>
  <div slot="end"><Button variant="ghost" size="sm">Save</Button></div>
</Toolbar>

import { Component } from '@angular/core';
import { Button, Toolbar } from '@arclux/arc-ui-angular';

@Component({
  imports: [Button, Toolbar],
  template: `
    <arc-toolbar border>
      <div slot="start"><arc-button variant="ghost" size="sm">File</arc-button></div>
      <span>Document.txt</span>
      <div slot="end"><arc-button variant="ghost" size="sm">Save</arc-button></div>
    </arc-toolbar>
  `,
})
export class MyComponent {}

import { Button, Toolbar } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <Toolbar border>
      <div slot="start"><Button variant="ghost" size="sm">File</Button></div>
      <span>Document.txt</span>
      <div slot="end"><Button variant="ghost" size="sm">Save</Button></div>
    </Toolbar>
  );
}

import { Button, Toolbar } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <Toolbar border>
      <div slot="start"><Button variant="ghost" size="sm">File</Button></div>
      <span>Document.txt</span>
      <div slot="end"><Button variant="ghost" size="sm">Save</Button></div>
    </Toolbar>
  );
}

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-toolbar — requires toolbar.css + base.css (or arc-ui.css) -->
<div class="arc-toolbar">
  <div class="toolbar" role="toolbar">
   <div class="toolbar__start">

   </div>
   <div class="toolbar__center">
   Toolbar
   </div>
   <div class="toolbar__end">

   </div>
   </div>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-toolbar — self-contained, no external CSS needed -->
<div class="arc-toolbar" style="display: block; font-family: 'Host Grotesk', system-ui, sans-serif">
  <div style="display: flex; align-items: center; height: 48px; padding: 0 16px; background: rgb(13, 13, 18); gap: 8px" role="toolbar">
   <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0">

   </div>
   <div style="display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center">
   Toolbar
   </div>
   <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto">

   </div>
   </div>
</div>

API

sticky boolean =false: When set, the toolbar uses position: sticky with top: 0 and z-index: 50, keeping it visible as the user scrolls through content below.
size 'md' | 'sm' ='md': Controls the toolbar height. The default md size is 48px for primary toolbars. The sm size is 36px for secondary or nested toolbars.
border boolean =true: Renders a subtle bottom border (--border-subtle) to visually separate the toolbar from the content below. Enabled by default.
overflow boolean =false: Enables responsive overflow collapse. A ResizeObserver measures available width; slotted items that do not fit are collapsed (hidden via the reversible hidden attribute) from the end of the item list, and a "More" trigger opens a menu of proxy items that re-dispatch clicks to the hidden originals. Note: because slotted nodes cannot be moved into the overflow panel, complex custom content is represented in the menu only by its text label (or the label attribute on arc-button / arc-icon-button).

Events

arc-overflow-change: Fired when the set of collapsed items changes (only with the overflow prop). detail: { hiddenCount: number }.

Toolbar

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight