Skip to main content
Take a look at the live Drupal demo site. 🚀
Webhaven

Main navigation

  • Home
  • Who it's for
    • For Experts
    • For Agencies
    • For Starters
  • ROI calculator
  • Docs
  • Get launch notified

Breadcrumb

  1. Home
  2. Webhaven documentation
  3. Theming
  4. Single Directory Components (SDC)

Documentation

  • Documentation
    • Welcome
  • Get started
    • What is Webhaven?
    • Install with DDEV
    • Install without DDEV
    • Webhaven commands
    • Deploying your site
  • Configuration
    • Drupal Canvas
    • Multilingual
    • Site settings
  • Theming
    • Introduction
    • Theme structure
    • Create a custom theme
    • Single Directory Components (SDC)
    • Component structure
    • An example component
  • Handy resources
    • Roadmap
    • What are Drupal recipes?
    • What is a Drupal site template?
    • What is Drupal Canvas?
    • Drupal Canvas vs Layout Builder vs Paragraphs
    • What is DDEV?
    • Useful DDEV commands
    • What is Drush?
    • Useful Drush commands

Single Directory Components (SDC)

Webhaven is component-based leveraging Drupal's Single Directory Components (SDC) structure.

This is a modern approach to that groups a component's template, look & feel and logic in one folder. This improves maintainability, reusability, and performance.

Maintainability

Each Webhaven component lives in its own self-contained directory, making it easier to understand and update without affecting other parts of the system.

When design or logic changes are needed, you can work directly within a single folder which reduces the risk of breaking unrelated components and improving overall code clarity.

Reusability

Webhaven components are designed to be modular and adaptable.

Once a component is built, it can be reused across multiple pages. This reduces duplication and ensures visual and functional consistency throughout your Webhaven project.

Performance

By isolating logic and templates within components, Webhaven ensures that only the necessary assets are loaded for each page.

This streamlined approach minimizes unnecessary dependencies, improves caching efficiency, and leads to faster page rendering times.

Previous page Create a custom theme Next page Component structure

You've seen how it works. Now see what it's worth.

See how much time and money Webhaven saves on every Drupal project.
Calculate my savings
Webhaven
Ship your best Drupal work, faster.

Links

  • Who it's for
  • Get launch notified
  • Demo
  • Docs
  • Free tools
  • Blog
  • Get in touch

Follow on

  • Our Drupal profile
  • Our LinkedIn profile
  • Our X profile
© 2026 Webhaven.
All rights reserved.

Legal

  • Privacy policy
  • Terms of service
  • Accessibility
  • Login
Built with