block--system-menu-block.html.twig 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. {#
  2. /**
  3. * @file
  4. * Bartik's theme implementation for a menu block.
  5. *
  6. * Available variables:
  7. * - plugin_id: The ID of the block implementation.
  8. * - label: The configured label of the block if visible.
  9. * - configuration: A list of the block's configuration values.
  10. * - label: The configured label for the block.
  11. * - label_display: The display settings for the label.
  12. * - provider: The module or other provider that provided this block plugin.
  13. * - Block plugin specific settings will also be stored here.
  14. * - content: The content of this block.
  15. * - attributes: HTML attributes for the containing element.
  16. * - id: A valid HTML ID and guaranteed unique.
  17. * - title_attributes: HTML attributes for the title element.
  18. * - content_attributes: HTML attributes for the content element.
  19. * - title_prefix: Additional output populated by modules, intended to be
  20. * displayed in front of the main title tag that appears in the template.
  21. * - title_suffix: Additional output populated by modules, intended to be
  22. * displayed after the main title tag that appears in the template.
  23. *
  24. * Headings should be used on navigation menus that consistently appear on
  25. * multiple pages. When this menu block's label is configured to not be
  26. * displayed, it is automatically made invisible using the 'visually-hidden' CSS
  27. * class, which still keeps it visible for screen-readers and assistive
  28. * technology. Headings allow screen-reader and keyboard only users to navigate
  29. * to or skip the links.
  30. * See http://juicystudio.com/article/screen-readers-display-none.php and
  31. * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
  32. */
  33. #}
  34. {%
  35. set classes = [
  36. 'block',
  37. 'block-menu',
  38. 'navigation',
  39. 'menu--' ~ derivative_plugin_id|clean_class,
  40. ]
  41. %}
  42. {% set heading_id = attributes.id ~ '-menu'|clean_id %}
  43. {% set show_anchor = "show-" ~ attributes.id|clean_id %}
  44. {% set hide_anchor = "hide-" ~ attributes.id|clean_id %}
  45. <nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes.addClass(classes)|without('role', 'aria-labelledby') }}>
  46. {# Label. If not displayed, we still provide it for screen readers. #}
  47. {% if not configuration.label_display %}
  48. {% set title_attributes = title_attributes.addClass('visually-hidden') %}
  49. {% endif %}
  50. {{ title_prefix }}
  51. <h2{{ title_attributes.setAttribute('id', heading_id) }}>{{ configuration.label }}</h2>
  52. {{ title_suffix }}
  53. {# Menu. #}
  54. {% block content %}
  55. <div{{ content_attributes.addClass('content') }}>
  56. {# When rendering a menu without label, render a menu toggle. #}
  57. <div class="menu-toggle-target menu-toggle-target-show" id="{{ show_anchor }}"></div>
  58. <div class="menu-toggle-target" id="{{ hide_anchor }}"></div>
  59. <a class="menu-toggle" href="#{{ show_anchor }}">{% trans %} Show &mdash; {{ configuration.label }}{% endtrans %}</a>
  60. <a class="menu-toggle menu-toggle--hide" href="#{{ hide_anchor }}">{% trans %} Hide &mdash; {{ configuration.label }}{% endtrans %}</a>
  61. {{ content }}
  62. </div>
  63. {% endblock %}
  64. </nav>