navigation.html.twig
Same filename in other branches
Default theme implementation to display a navigation layout.
Available variables:
- content: The content for this layout.
- attributes: HTML attributes for the layout <div>.
- content.settings.hide_logo: Whether to hide the logo.
- content.settings.logo_path: The path to the logo image if logo_managed in navigation.settings configuration has been set.
- content.settings.logo_width: The width of the logo image. Available if logo_path points to a valid image file.
- content.settings.logo_height: The height of the logo image. Available if logo_path points to a valid image file.
File
-
core/
modules/ navigation/ layouts/ navigation.html.twig
View source
- {#
- /**
- * @file
- * Default theme implementation to display a navigation layout.
- *
- * Available variables:
- * - content: The content for this layout.
- * - attributes: HTML attributes for the layout <div>.
- * - content.settings.hide_logo: Whether to hide the logo.
- * - content.settings.logo_path: The path to the logo image if logo_managed
- * in navigation.settings configuration has been set.
- * - content.settings.logo_width: The width of the logo image. Available if
- * logo_path points to a valid image file.
- * - content.settings.logo_height: The height of the logo image. Available if
- * logo_path points to a valid image file.
- * @ingroup themeable
- */
- #}
- {% set control_bar_attributes = create_attribute() %}
-
- <div {{ control_bar_attributes.addClass('admin-toolbar-control-bar').setAttribute('data-drupal-admin-styles', '') }}>
- <div class="admin-toolbar-control-bar__content">
- {% include 'navigation:toolbar-button' with {
- attributes: create_attribute({'aria-expanded': 'false', 'aria-controls': 'admin-toolbar', 'type': 'button'}),
- icon: 'burger',
- text: 'Expand sidebar'|t,
- modifiers: ['small-offset'],
- extra_classes: [
- 'admin-toolbar-control-bar__burger',
- ],
- } only %}
- </div>
- </div>
-
- <aside
- {{ attributes.addClass('admin-toolbar').setAttribute('id', 'admin-toolbar').setAttribute('data-drupal-admin-styles', true) }}
- >
- {# This lil' div will get the Drupal.displace() attributes added to it via JS. #}
- <div class="admin-toolbar__displace-placeholder"></div>
-
- <div class="admin-toolbar__scroll-wrapper">
- {% set title_menu = 'admin-toolbar-title'|clean_unique_id %}
- {# @todo - We should get rid of this ID below. #}
- <nav {{ region_attributes.content.setAttribute('id', 'menu-builder').addClass('admin-toolbar__content').setAttribute('aria-labelledby', title_menu) }}>
- <h3 id="{{ title_menu }}" class="visually-hidden">{{ 'Administrative toolbar content'|t }}</h3>
- {# @todo - Needs to be placed here so we can have the header footer on mobile. #}
- <div class="admin-toolbar__header">
- {% if not content.settings.hide_logo %}
- <a class="admin-toolbar__logo" href="{{ path('<front>') }}">
- {% if content.settings.logo_path is not null %}
- <img alt="{{ 'Navigation logo'|t }}" src="{{ content.settings.logo_path }}" loading="eager" width="{{ content.settings.logo_width|default(40) }}" height="{{ content.settings.logo_height|default(40) }}">
- {% else %}
- {% include '@navigation/logo.svg.twig' with {
- label: 'Navigation logo'|t
- } only %}
- {% endif %}
- </a>
- {% endif %}
- {% include 'navigation:toolbar-button' with {
- attributes: create_attribute({ 'data-toolbar-back-control': true, 'tabindex': '-1' }),
- extra_classes: ['admin-toolbar__back-button'],
- icon: 'back',
- text: 'Back'|t,
- } only %}
- {% include 'navigation:toolbar-button' with {
- action: 'Collapse sidebar'|t,
- attributes: create_attribute({ 'aria-controls': 'admin-toolbar', 'tabindex': '-1', 'type': 'button' }),
- extra_classes: ['admin-toolbar__close-button'],
- icon: 'cross',
- } only %}
- </div>
-
- {{ content.content }}
- </nav>
-
- {% set title_menu_footer = 'admin-toolbar-footer'|clean_unique_id %}
- <nav {{ region_attributes.footer.setAttribute('id', 'menu-footer').addClass('admin-toolbar__footer').setAttribute('aria-labelledby', title_menu_footer) }}>
- <h3 id="{{ title_menu_footer }}" class="visually-hidden">{{ 'Administrative toolbar footer'|t }}</h3>
- {{ content.footer }}
- <button aria-controls="admin-toolbar" class="admin-toolbar__expand-button" type="button">
- <span class="visually-hidden" data-toolbar-text>{{ 'Collapse sidebar'|t }}</span>
- </button>
- </nav>
- </div>
- </aside>
- <div class="admin-toolbar-overlay" aria-controls="admin-toolbar" data-drupal-admin-styles></div>
- <script>
- if (localStorage.getItem('Drupal.navigation.sidebarExpanded') !== 'false' && (window.matchMedia('(min-width: 1024px)').matches)) {
- document.documentElement.setAttribute('data-admin-toolbar', 'expanded');
- }
- </script>
Related topics
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.