Ember addon that manages toolbars, designed to support in-page-editing

License: MIT

Language: JavaScript


This addon manages animated, fixed-position toolbars on any edge of the viewport. What you put inside the toolbars and how you style them are entirely up to you.


  • ember install ember-toolbars


Wrap your content inside the toolbar-manager component. Most often you will want to do this within application.hbs, like:


Then whenever you want to display a toolbar, use any of these components:

  • in-left-toolbar
  • in-top-toolbar
  • in-right-toolbar
  • in-bottom-toolbar

Each one accepts a show argument that should be a component to show in that toolbar. For example:

{{in-left-toolbar show=(component "your-component-name")}}

Since you're using Ember's built-in component helper, you can also pass arbitrary arguments or actions to your component, just as if it was rendering in place:

{{in-bottom-toolbar show=(component "media-chooser" images=model.images choseImage=(action "saveImage"))}}

Making Horizontal Space for Toolbars

The toolbar-manager component adapts its margins to make room for whatever toolbars are on screen. This means that the content inside of it will have less room when the sidebars are present. For vertical space, this is relatively easy. The top toolbar pushes your content downward, and the bottom toolbar adds a margin to your content so that users can always scroll to the bottommost content without it being obscured.

Horizontal space is subject to more tradeoffs, so you have several choices for how you want to adapt.

If you do nothing special, your content will simply get resized smaller. Text will reflow, etc.

If you give you content a fixed width (like 100vw or 800px or 40em), it will slide to the right to make room for the left sidebar. For example:

  <div style="width: 100vw">

If you give you content a fixed width and float: right, it will slide to the left to make room for the right sidebar. You should clear the float so that toolbar-manager bottom margin will still work correctly, like:

  <div style="width: 100vw; float: right">
  <div style="clear: both"></div>

If you want your content to scale down to match the available space, you can use the squishable-container addon:


Project Statistics

Sourcerank 6
Repository Size 142 KB
Stars 21
Forks 5
Watchers 3
Open issues 2
Dependencies 937
Contributors 6
Tags 16
Last updated
Last pushed

Top Contributors See all

Edward Faulkner Ilya Radchenko Alex Speller Alex DiLiberto Jeffrey Biles ember-tomster

Packages Referencing this Repo

Ember toolbar manager
Latest release 0.5.0 - Updated - 21 stars

Recent Tags See all

v0.5.0 August 13, 2018
v0.4.2 November 14, 2017
v0.4.1 November 01, 2017
v0.4.0 September 06, 2017
v0.3.1 April 07, 2017
v0.3.0 March 27, 2017
v0.2.7 March 17, 2017
v0.2.6 March 17, 2017
v0.2.5 March 17, 2017
v0.2.4 March 17, 2017
v0.2.3 March 16, 2017
v0.2.2 March 16, 2017
v0.2.1 March 16, 2017
v0.2.0 March 16, 2017
v0.1.0 October 20, 2016

Something wrong with this page? Make a suggestion

Last synced: 2018-08-13 18:37:43 UTC

Login to resync this repository