Cordwainer Theme

Cordwainer Theme is a base theme that builds a site's header, navigation and footer from Cordwainer Elements web components. It uses the single-directory components (SDCs) provided by the Cordwainer Elements Drupal module.

Drupal's menus, blocks and regions are turned into cw-header, cw-primary-navigation, cw-footer and cw-social-link on every front-end page. You don't need Drupal Canvas for this. Menu choice, depth and visibility are all still set in the Block layout UI.

Features

• A page.html.twig that places cw-header, main and cw-footer around your content. Everything is rendered through the Cordwainer Elements SDCs, so the component library and its import map are attached automatically.
• Menu templates are chosen by region, not by menu name. Any menu block you place in the Primary menu region renders as primary navigation, with one level of dropdowns.
• A menu placed in Footer menu renders as footer links. A menu placed in Footer social links renders as social icons, and each link's platform is detected from its URL.
• The logo comes from the active theme's logo setting. An extra setting lets you add a separate logo for dark mode.
• The base layout CSS uses only Cordwainer design tokens. It sets no colors or branding, so those come from your subtheme.
• The footer copyright notice uses your site name.

Regions

• Primary menu: a menu block, rendered as cw-primary-navigation in the header
• Header search panel and Header user panel: content for the header's search and user panels (planned)
• Content
• Footer menu: a menu block, rendered as top-level footer links
• Footer about: any block, shown in the footer's about area
• Footer social links: a menu block, rendered as cw-social-link icons

Requirements

• Drupal 11 or 12
• Cordwainer Elements, at the exact release listed below

Version pairing

The templates use the prop and slot names generated in Cordwainer Elements. A mismatch doesn't fail loudly: it just renders nothing. To prevent that, each Cordwainer Theme release requires exactly one Cordwainer Elements release, both in composer.json and in the theme's .info.yml.

• Cordwainer Theme 1.0.x: Cordwainer Elements 1.0.1, built from @cordwainer/cw-elements 1.5.4

Each new Cordwainer Elements release gets a matching Cordwainer Theme release. The README has the full table.

Installation

composer require drupal/cordwainer_theme
drush theme:enable cordwainer_theme

You can use the theme as-is, but it's meant to be a base theme. For site branding, create a subtheme with base theme: cordwainer_theme. Copy the full regions: list into your subtheme's .info.yml. Drupal doesn't pass a base theme's regions down to its subthemes. See the README for a starter subtheme.

Known limitations

• Primary navigation supports two levels: top-level items and one dropdown.
• A top-level item with children opens its dropdown rather than linking anywhere. Its own link is added as the first entry in the dropdown.
• Navigation links always get rel="noreferrer noopener", including internal ones. This is the generated components' default.

Project status

Under active development. A first alpha release will come once the header and footer are working.

Related projects

• Cordwainer Elements: the components this theme renders
• CEM SDC Generator: generates Cordwainer Elements from the web component library's Custom Elements Manifest