Understanding Twig namespaces

What are Twig namespaces?

Twig natively offers a feature called “template namespaces”. Drupal core registers many Twig namespaces so that you can reference the Twig templates from specific modules or themes. For example, you may have seen this:

{% extends "@classy/block/block--system-menu-block.html.twig" %}

The text, @classy, indicates the Twig namespace we wish to use when getting the twig template.

Why use a custom Twig namespace?

Modern front-end development techniques means a website needs a library of components where each component is concerned about a specific design element.

But Drupal core does not yet provide a component library for its design. Instead, Drupal core registers a Twig namespace for every module and theme in your installation (@bartik, @system, etc.) And all of those Twig templates are designed for specific Drupal theme hooks and data (nodes, comments, views, etc.) and must be placed in a /templates directory inside a module or theme.

Ideally, we would put our component library's Twig templates in a separate directory from the Drupal-style Twig templates. But Drupal core makes it very difficult to use Twig templates not placed in a /templates directory.

The Components module allows you to specify a different directory for your component library's Twig files and allows you to register a unique Twig namespace for those files.