On page load I need to

  • show the toolbar on the left / in vertical mode when in admin theme
  • collapse/minimize the toolbar when in frontend theme

I'm looking for the event and the function to trigger those actions programmatically, e.g. something like

$(document).on('toolbar.loaded', Drupal.toolbar.setOrientationLeft);


$(document).on('toolbar.loaded', Drupal.toolbar.closeToolbar);

(I'm using the Admin Toolbar plugin)

Please note that I'm looking a solution that does not check CSS classes or triggers DOM clicks, in order to avoid timing problems due to asynchronous loading or exisiting toolbar settings.

  • If don't need admin toolbar at frontend theme, you can unset page_top in preprocess_html function. – MrD Oct 13 '17 at 2:59
  • I nieed it in frontend too, just minimized. Updated my question for clarification. – Hudri Oct 13 '17 at 5:44

Try please this code:

Drupal.behaviors.changeToolbar = {
  attach: function (context, settings) {
    // Your code (if) ...
    $(context).find('#toolbar-bar').click('.toolbar-toggle-orientation button'); // Change orientation.
    $(context).find('#toolbar-bar').click('.toolbar-item-administration'); // Close.
  • This generates an error Uncaught TypeError: Cannot create property 'guid' on string '.toolbar-toggle-orientation button' at Object.add... Besides the code error the solution can not work by concept, because the toolbar has a different default orientation depending on screen size and stores the position in the user session. The concept would work only on large screens and only on the very first load, but would trigger unwanted toggles afterwards in any other case. – Hudri Oct 13 '17 at 10:07

If you go through its possible to make it as horizontal. Try this code wherever needed:

jQuery('#toolbar-bar button').each(function(){
  if(jQuery(this).html() === 'Vertical orientation'){
  if(jQuery(this).find('span.label').text() === 'Tools'){
    var open = jQuery(".toolbar-box").find('.open').length;
    if (open > 0) {

For checking try this in the console first and add snippet to your JS file.

  • As I've already commented on Ruslan's answer, any solution that doesn't check the current INTERNAL state of the toolbar cannot work by concept. The Admin toolbar loads asynchronously, so checking css classes (or even language dependent strings) will never work reliably. – Hudri Oct 13 '17 at 10:26

If you look into the js file in the toolbar core module , there is no event like this triggered.

I you want this event, i think you'll have to override or extend the toolbar behaviors.

For exemple :

(function ($, Drupal, drupalSettings) {
    var behaviorsToolbar = Drupal.behaviors.toolbar;

    Drupal.behaviors.toolbar = {
        attach: function attach(context) {
    //this is just a exemple but it worked for me, to force horizontal toolbar
    $(document).on('toolbar.loaded', function () { 
        if ($('.toolbar-toggle-orientation button').hasClass('toolbar-icon-toggle-vertical'))
            $('.toolbar-toggle-orientation button').trigger('click');


})(jQuery, Drupal, drupalSettings);

We have to be sure that this script is call every time a toolbar is created, so we attach it on the toolbar itself :

 * Implements hook_toolbar_alter().
function mymodule_toolbar_alter(&$items) { 
    $items['administration']['#attached']['library'][] = 'nameOfYourLibrary';

This is the cleanest and most reliable solution I've found so far. It uses localStorage and view models like the core toolbar itself. These are the important parts of my module:


name: 'Toolbar always vertical on the left'
type: module
description: 'Shows the toolbar by default in vertical mode, on the left side and hide it on frontend pages.'
core: 8.x
  - toolbar


  version: 0.0.1
    js/toolbar.js: {}
    - toolbar/toolbar


function toolbar_always_vertical_preprocess_html(&$variables) {
  $variables['#attached']['library'][] = 'toolbar_always_vertical/toolbar';


(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.toolbarAlwaysVerticalSetToolbarDefaults = {
    attach: function (context, settings) {
      if (Drupal.toolbar.views.toolbarVisualView) {
        // this forces the vertical orientation
        localStorage.setItem('Drupal.toolbar.trayVerticalLocked', 'true');
        Drupal.toolbar.views.toolbarVisualView.model.set({locked: true, orientation: 'vertical'}, {validate: true, override: true});
        if (drupalSettings.path.currentPathIsAdmin && Drupal.toolbar.views.toolbarVisualView.model.attributes.isFixed) {
          // show administration toolbar when in admin and not collapsed
          Drupal.toolbar.views.toolbarVisualView.model.set({activeTab: $('#toolbar-item-administration')});
        else {
          // hide toolbar when on frontend page
          Drupal.toolbar.views.toolbarVisualView.model.set({activeTab: null});
})(jQuery, Drupal, drupalSettings);

There is a critical point all other answers missed: it has to be done in a module and not in a theme, because only modules can add dependencies to other modules and guarantee that the code is exectued after the core toolbar.


In the top-right corner of the Admin section there is a left-facing arrow, which, when you hover over it says "Vertical orientation". Is this not an easy way to achieve this?


I used this path from core. That give you the option to set the default position as you wish. https://www.drupal.org/project/drupal/issues/2395797#comment-12867953

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.