Toolbars

Summary

Toolbar2: a horizontal action bar with primary (inline-start) and secondary (inline-end) groups. Buttons inside use the normal button classes.

To space clusters of related actions, wrap them in .neura-buttons groups inside the primary / secondary slots; each group gets a 10px inline-end gap (the trailing group in the secondary slot drops it). Buttons inside a toolbar carry a 10px top margin, and .neura-button-link tightens its padding so text links baseline-align with the buttons beside them.

Examples

Primary and secondary slots

Grouped actions with dropdowns

A typical item-view toolbar: neura-buttons groups fuse related actions, and buttons double as dropdown2 triggers (More at the inline-start, Delete + Export at the inline-end):

HTML

Primary and secondary slots

<div class="neura-toolbar2" role="toolbar">
  <div class="neura-toolbar2-group neura-toolbar2-primary">
    <button class="neura-button">Edit</button>
    <button class="neura-button">Share</button>
  </div>
  <div class="neura-toolbar2-group neura-toolbar2-secondary">
    <button class="neura-button neura-button-subtle">
      <span class="neura-icon neura-icon-settings"></span> Tools
    </button>
  </div>
</div>

Grouped actions with dropdowns

<div class="neura-toolbar2" role="toolbar">
  <div class="neura-toolbar2-group neura-toolbar2-primary">
    <div class="neura-buttons">
      <button class="neura-button">Assign</button>
      <button class="neura-button">Comment</button>
    </div>
    <div class="neura-buttons">
      <button class="neura-button neura-dropdown2-trigger" aria-controls="tb-more">More</button>
      <div id="tb-more" class="neura-dropdown2 neura-style-default" aria-hidden="true">
        <ul>
          <li><a href="#">Log work</a></li>
          <li><a href="#">Attach files</a></li>
          <li><a href="#">Voters</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="neura-toolbar2-group neura-toolbar2-secondary">
    <div class="neura-buttons">
      <button class="neura-button">Delete</button>
    </div>
    <div class="neura-buttons">
      <button class="neura-button neura-dropdown2-trigger" aria-controls="tb-export">Export</button>
      <div id="tb-export" class="neura-dropdown2 neura-style-default" aria-hidden="true">
        <ul>
          <li><a href="#">XML</a></li>
          <li><a href="#">Word</a></li>
          <li><a href="#">Printable</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS classes

Class	Effect
`.neura-toolbar2`	The bar. Add `role="toolbar"`.
`.neura-toolbar2-group`	Slot wrapper; combine with a position class.
`.neura-toolbar2-primary` / `-secondary`	Inline-start / inline-end action groups. Cluster related actions inside with `.neura-buttons`.

AUI compatibility

aui-toolbar2* aliases onto the neura-toolbar2* rules. AUI's legacy v1 toolbar chrome is deliberately unported. CSS-only.