navigation.html.twig

Same filename and directory in other branches
  1. 10 core/modules/navigation/layouts/navigation.html.twig

Default theme implementation to display a navigation layout.

Available variables:

  • content: The content for this layout.
  • attributes: HTML attributes for the layout <div>.
  • settings: layout settings. The following are related to the logo:
    • hide_logo: Whether to hide the logo.
    • logo_path: The path to the logo image if logo_managed in navigation.settings configuration has been set.
    • logo_width: The width of the logo image. Available if logo_path points to a valid image file.
    • settings.logo_height: The height of the logo image. Available if logo_path points to a valid image file.
2 theme calls to navigation.html.twig
DemoUmamiHooks::navigationContentTop in core/profiles/demo_umami/src/Hook/DemoUmamiHooks.php
Implements hook_navigation_content_top().
DemoUmamiHooks::navigationContentTop in core/profiles/demo_umami/src/Hook/DemoUmamiHooks.php
Implements hook_navigation_content_top().

File

core/modules/navigation/layouts/navigation.html.twig

View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation to display a navigation layout.
  5. *
  6. * Available variables:
  7. * - content: The content for this layout.
  8. * - attributes: HTML attributes for the layout <div>.
  9. * - settings: layout settings. The following are related to the logo:
  10. * - hide_logo: Whether to hide the logo.
  11. * - logo_path: The path to the logo image if logo_managed
  12. * in navigation.settings configuration has been set.
  13. * - logo_width: The width of the logo image. Available if
  14. * logo_path points to a valid image file.
  15. * - settings.logo_height: The height of the logo image. Available if
  16. * logo_path points to a valid image file.
  17. * @ingroup themeable
  18. */
  19. #}
  20. {% set control_bar_attributes = create_attribute() %}
  21. <div {{ control_bar_attributes.addClass('admin-toolbar-control-bar').setAttribute('data-drupal-admin-styles', '') }}>
  22. <div class="admin-toolbar-control-bar__content">
  23. {% include 'navigation:toolbar-button' with {
  24. attributes: create_attribute({'aria-expanded': 'false', 'aria-controls': 'admin-toolbar', 'type': 'button'}),
  25. icon: { icon_id: 'burger' },
  26. text: 'Expand sidebar'|t,
  27. modifiers: ['small-offset'],
  28. extra_classes: [
  29. 'admin-toolbar-control-bar__burger',
  30. ],
  31. } only %}
  32. </div>
  33. </div>
  34. <aside
  35. {{ attributes.addClass('admin-toolbar').setAttribute('id', 'admin-toolbar').setAttribute('data-drupal-admin-styles', true) }}
  36. >
  37. {# This lil' div will get the Drupal.displace() attributes added to it via JS. #}
  38. <div class="admin-toolbar__displace-placeholder"></div>
  39. <div class="admin-toolbar__scroll-wrapper">
  40. {% set title_menu = 'admin-toolbar-title'|clean_unique_id %}
  41. {# @todo - We should get rid of this ID below. #}
  42. <nav {{ region_attributes.content.setAttribute('id', 'menu-builder').addClass('admin-toolbar__content').setAttribute('aria-labelledby', title_menu) }}>
  43. <h3 id="{{ title_menu }}" class="visually-hidden">{{ 'Administrative toolbar content'|t }}</h3>
  44. {# @todo - Needs to be placed here so we can have the header footer on mobile. #}
  45. <div class="admin-toolbar__header">
  46. {% if not settings.hide_logo %}
  47. <a class="admin-toolbar__logo" href="{{ path('<front>') }}">
  48. {% if settings.logo_path is not null %}
  49. <img alt="{{ 'Navigation logo'|t }}" src="{{ settings.logo_path }}" loading="eager" width="{{ settings.logo_width|default(40) }}" height="{{ settings.logo_height|default(40) }}">
  50. {% else %}
  51. {% include '@navigation/logo.svg.twig' with {
  52. label: 'Navigation logo'|t
  53. } only %}
  54. {% endif %}
  55. </a>
  56. {% endif %}
  57. {% include 'navigation:toolbar-button' with {
  58. attributes: create_attribute({ 'data-toolbar-back-control': true, 'tabindex': '-1' }),
  59. extra_classes: ['admin-toolbar__back-button'],
  60. icon: { icon_id: 'arrow-left' },
  61. text: 'Back'|t,
  62. } only %}
  63. {% include 'navigation:toolbar-button' with {
  64. action: 'Collapse sidebar'|t,
  65. attributes: create_attribute({ 'aria-controls': 'admin-toolbar', 'tabindex': '-1', 'type': 'button' }),
  66. extra_classes: ['admin-toolbar__close-button'],
  67. icon: { icon_id: 'cross' },
  68. } only %}
  69. </div>
  70. {{ content.content_top }}
  71. {{ content.content }}
  72. </nav>
  73. {% set title_menu_footer = 'admin-toolbar-footer'|clean_unique_id %}
  74. <nav {{ region_attributes.footer.setAttribute('id', 'menu-footer').addClass('admin-toolbar__footer').setAttribute('aria-labelledby', title_menu_footer) }}>
  75. <h3 id="{{ title_menu_footer }}" class="visually-hidden">{{ 'Administrative toolbar footer'|t }}</h3>
  76. {{ content.footer }}
  77. <button aria-controls="admin-toolbar" class="admin-toolbar__expand-button" type="button">
  78. {{ icon('navigation', 'chevron', { class: 'admin-toolbar__expand-button-chevron', size: 16 }) }}
  79. <span class="visually-hidden" data-toolbar-text>{{ 'Collapse sidebar'|t }}</span>
  80. </button>
  81. </nav>
  82. </div>
  83. </aside>
  84. <div class="admin-toolbar-overlay" aria-controls="admin-toolbar" data-drupal-admin-styles></div>
  85. <script>
  86. if (localStorage.getItem('Drupal.navigation.sidebarExpanded') !== 'false' && (window.matchMedia('(min-width: 1024px)').matches)) {
  87. document.documentElement.setAttribute('data-admin-toolbar', 'expanded');
  88. }
  89. </script>

Related topics


Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.