This project is not covered by Drupal’s security advisory policy.
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.twigthat placescw-header,mainandcw-footeraround 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-navigationin 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-linkicons
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-elements1.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
Project information
- Ecosystem: Cordwainer Elements
- By matthand on , updated
This project is not covered by the security advisory policy.
Use at your own risk! It may have publicly disclosed vulnerabilities.
Releases
First alpha release: renders the site header, primary navigation, footer and social links with Cordwainer Elements web components, using menus chosen in the theme settings.
