UnoCSS Starter Theme - Page header SDC

Every site needs a header, typically featuring a logo and navigation.

Using SDC for the header makes it easier to swap in pre-made layouts and styles.

Here is a basic component with slots for Branding, Primary Menu, and Secondary Menu.

<div class="flex flex-wrap align-baseline justify-between">
  {% block branding %}
    {{ branding }}
  {% endblock %}

  {% block secondary_menu %}
    {{ secondary_menu }}
  {% endblock %}

  <div class="flex-basis-full">
    {% block primary_menu %}
      {{ primary_menu }}
    {% endblock %}
  </div>
</div>

Here's how it looks:

In page.html.twig, call the component and pass in regions containing the blocks.

{{ include('unocss_starter_demo:header', {
  branding: page.header,
  secondary_menu: page.secondary_menu,
  primary_menu: page.primary_menu
}) }}

With this syntax, props and slots are passed in the same way.

You can also use the embed syntax, which would allow you to customize further within page.html.twig.

You may want to do this with components that are intended to be reused. For a custom site specific header, you can still use SDC to encapsulate CSS and make it easier to maintain.

{% embed 'unocss_starter_demo:header' %}

  {% block branding %}
    {{ page.header }}
  {% endblock %}

  {% block secondary_menu %}
    {{ page.secondary_menu }}
  {% endblock %}

  {% block primary_menu %}
    {{ page.primary_menu }}
  {% endblock %}

{% endembed %}

Template Variables/Blocks & Regions

One of the things that makes Drupal theming hard is getting the variables you need, formatted in the right way, into the templates you're working with.

In this example, {{ page.header }} is printing the entire header region, including extra wrappers.

It's important for blocks to be placed into regions as expected for the styles to support them correctly.

You may want to place the blocks in the header region and include the component in that template. That would let you specify which blocks to pass in as slots.