23 Oct 2026
Drupal.org aggregator
DXPR: Drupal dropdown menus: how to build them in Drupal 11
Drupal dropdown menus: how to build them in Drupal 11 Jurriaan
A dropdown menu in Drupal 11 always starts in the same place: the core menu system, where you nest links under a parent. What turns that structure into a dropdown is either your theme or a menu module. This post walks through both routes, shows what the result looks like on desktop and on a phone, and compares the menu modules that are maintained for Drupal 11 today.
The screenshots come from a Drupal 11.4 site with DXPR Theme 8.2.2, taken in October 2026; the module details come from drupal.org on 23 October 2026.
In short: build the menu under Structure, Menus, nest the links, and tick Show as expanded on every parent. A theme with dropdown support, such as Olivero (one dropdown level) or DXPR Theme (three levels, automatic columns), then renders the dropdowns. Add a module such as Superfish or The Better Mega Menu only when the theme cannot do what you need.
Let an AI agent build the menu. A menu is a list of links with a hierarchy, the kind of structured task a coding agent does well. With the Drush Webmaster skill, an agent creates and orders the menu links from a short brief, and with DXPR Theme's agent skill it sets the header layout and menu colors to match the brand. You review the result on the site.
1. Create the menu structure in Drupal core
Go to Structure, Menus, and edit the menu that sits in your header, usually Main navigation. Add the links with Add link, then drag each child under its parent so it indents one level, and press Save.
Next, edit every parent link and tick Show as expanded. Without it, Drupal only renders a parent's children on that parent's own page, so the dropdown stays empty everywhere else. To expand every parent at once, tick Expand all menu links in the settings of the menu block instead. For a parent that should only open its dropdown, enter <button> or <nolink> as the link instead of a page.
2. Let the theme render the dropdowns
Most current Drupal themes turn a nested menu into dropdowns on their own; how deep they go and how the dropdown looks differs per theme.
- Olivero, Drupal core's default front-end theme up to Drupal 11.4, places its main menu block with a depth of two: the top level plus one dropdown level, with a button next to each parent.
- DXPR Theme renders three levels. A dropdown with 8 or more links splits into columns, and from 15 links it spans the full width of the header, which gives you a mega menu without a module. On a mouse, dropdowns open on hover, and when any dropdown has a third level they open on click. Below the mobile breakpoint, 1200 pixels by default, the menu folds into a hamburger menu that expands each level in place. The mega menu guide covers every setting.
3. Or add a menu module
A module makes sense when the theme cannot render what you need, for example images or blocks inside the dropdown, or a separate off-canvas menu for phones. These are the maintained options for Drupal 11:
| Module | What it does | Latest stable release | Reported sites |
|---|---|---|---|
| Superfish Dropdown Menu | Dropdowns from the jQuery Superfish plugin, with multi-column sub-menus and right-to-left support; needs the Superfish library in /libraries |
8.x-1.17, 16 Oct 2026, Drupal 9 to 11 | 64,556 |
| The Better Mega Menu | An admin interface for dropdowns that combine menu links with images, videos and blocks | 8.x-1.10, 28 Aug 2025, Drupal 8 to 11 | 18,522 |
| Responsive and off-canvas menu | A horizontal menu on wide screens and an off-canvas menu on phones, through the mmenu library | 4.4.5, 4 Feb 2025, Drupal 9.3 to 11 | 10,647 |
| Drupal Mega Menu | A drag-and-drop mega menu builder with layout styles and animations; minimally maintained | 8.x-1.17, 22 Sep 2026, Drupal 10.3 and 11 | 5,067 |
| Simple Mega Menu | Foundations for a mega menu you build yourself with Twig and content entities | 2.2.0, 9 Sep 2024, Drupal 10.3 and 11 | 1,655 |
To show only part of a menu elsewhere on the page, for example the children of the current section in a sidebar, core's menu blocks have Initial visibility level and Number of levels to display settings, and the Menu Block module adds options such as rooting the block at a specific menu item.
Which option should you pick?
- Links only, one dropdown level: core menus and your theme, nothing to install.
- Three levels, columns or a full-width mega menu, and a mobile menu: a theme that renders them, such as DXPR Theme, so the menu stays plain Drupal configuration.
- Images, videos or blocks inside the dropdown: The Better Mega Menu or Drupal Mega Menu. Each one adds its own configuration screen and markup to maintain.
- A dedicated off-canvas menu on phones: Responsive and off-canvas menu.
Questions about Drupal dropdown menus
A mega menu without a module.
DXPR Theme turns your Drupal menu into multi-level dropdowns, full-width mega menus and a mobile menu, styled from its settings. Try it in the live demo or read the step-by-step guide.
23 Oct 2026 8:27am GMT
DXPR: Drupal 11 Layout Builder tutorial: sections, blocks and overrides
Drupal 11 Layout Builder tutorial: sections, blocks and overrides Jurriaan
Layout Builder is Drupal's own page layout tool. It ships with Drupal 11 core, it works on any content type, and it lets a site builder define a default layout once and let editors adjust the layout of a single page when they need to. This tutorial walks through the whole thing on Drupal 11.4: enabling the module, giving a content type a layout, adding sections and blocks, saving the default, overriding it on one page, and the two contributed modules that make it workable for editorial teams.
Every screenshot was taken on a Drupal 11.4 site in October 2026, with Claro as the administration theme and DXPR Theme on the front end. Layout Builder opens in the front-end theme, so on your site its buttons and tray may look slightly different.
Layout Builder gives you the frame. AI fills the page.
Layout Builder arranges blocks in regions. It does not write the headline, the three feature cards or the call to action, and it will not draft the Dutch version. That part of the work is where most of the time goes, and it is what DXPR Builder adds inside your Layout Builder layouts.
DXPR Builder runs as a formatter on a text field, so a DXPR Builder field sits inside a Layout Builder section like any other block. Layout Builder keeps the overall page structure; inside the field, an editor describes the page in a brief and gets an editable draft with sections, text, images and buttons, then refines it in the visual editor or by asking for changes in context. Translations start as AI drafts for a local editor to review. Nothing publishes on its own; the page goes through the permissions and moderation your site already has.
The free Personal plan includes DXPR Builder and 10,000 AI credits a month for one production website. Compare DXPR Builder with Layout Builder in detail, or see how it fits an existing Drupal platform.
Try it inside a layout
The live demo is a Drupal site with Layout Builder, DXPR Builder and AI switched on. Build a page from a brief inside a Layout Builder section and keep the result. How AI page building works.
1. Enable Layout Builder
Go to Extend (/admin/modules), filter on "layout" and tick Layout Builder. Drupal enables Layout Discovery with it: the module through which core, contributed modules and themes register layouts. From the command line, drush en layout_builder does the same.
Leave Layout Builder Expose All Field Blocks switched off. It is deprecated, and it offers every field of every entity type as a block, which slows down sites with many content types.
2. Turn it on for a content type
Open Structure, Content types, your content type, Manage display, and pick the view mode; Default covers full pages. Under Layout options, tick Use Layout Builder. Tick Allow each content item to have its layout customized as well if editors may change the layout of a single page; leave it off for content types that must stay uniform. Overrides are only offered on the Default or Full content display.
After saving, the field table disappears: from now on the display is a layout, and the Manage layout button opens it.
3. Open the default layout
Manage layout opens the layout every page of this content type shares. Drupal starts it with one section that holds the fields that were visible on the display, each as a block: here Featured image, Moderation control, Content and Tags. With Show content preview off, blocks show their labels instead of sample content, which makes arranging them easier.
The editor opens in your front-end theme, so its buttons take the theme's look (DXPR Theme in these screenshots). Nothing is stored until you press Save layout; Discard changes throws the draft away.
4. Add a section and choose its layout
Click Add section above or below an existing section. The tray on the right lists every layout registered on the site: core's one, two, three and four column layouts, plus the layouts your theme and modules add. The DXPR layouts in this screenshot, in fluid and container variants, come from the DXPR CMS Layouts module.
Pick a layout and Configure section asks for its settings. For core's two column layout these are the column widths (50/50, 33/67, 67/33, 25/75 or 75/25) and an optional administrative label that only site builders see. Press Add section. When the blocks of the old one-column section have a new home, remove that section with the cross next to its Configure Section link.
5. Add blocks to the regions
Every region of a section has an Add block link. The Choose a block tray lists the fields of the content type under Content fields, then the blocks of every module: menus, views, forms and custom blocks. Create content block at the top makes a one-off inline block that belongs to this layout. Type in Filter by block name instead of scrolling.
Each block has a short configuration form. A field block asks for the label position and the formatter; most other blocks ask for a title you can show or hide. In this example the Content field goes in the wide column with its label hidden, and the Main navigation menu goes in the narrow column with the title "Explore the faculty".
When the section holds the Content field next to the menu, press Save layout, and every page of the content type uses this layout.
6. Override the layout of one page
When the content type allows overrides, every page gets a Layout tab next to View and Edit. It opens the same editor for that page only, with a Revert to defaults button above the layout. Here the annual report gets an extra Search block under the menu; every other page of the content type keeps the default layout.
From that moment the page has its own copy of the layout. Later changes to the default no longer reach it, until someone presses Revert to defaults.
7. Two contributed modules every editorial team ends up installing
Core Layout Builder offers every layout and every block to every editor, which is more freedom than most teams want. Two contributed modules close the gap:
- Layout Builder Restrictions limits which layouts and which blocks are available per content type and per region, so an editor picks from the handful of options that fit the design.
- Layout Builder Styles lets a site builder define named styles (a background, a spacing variant, a width) that editors apply to a section or a block from a dropdown instead of writing CSS classes.
Install either with Composer, enable it, and its settings appear under the content type's Manage display and in the Layout Builder tray.
8. Things to know before you roll it out
- Overrides are stored on the node. Once a node has its own layout, changes to the default layout no longer reach it until someone presses Revert to defaults. Decide early which content types allow per-node overrides.
- Inline blocks live in the layout. A custom block created inside Layout Builder belongs to that node's layout and is not reusable elsewhere; use a block from the Block library when several pages need it.
- Permissions. Overrides have a permission per content type, for example Content - Article: Configure layout overrides for content items that the user can edit, or the wider Configure all layout overrides. Configure any layout also covers the default layouts, so keep it for site builders.
- Revisions and moderation. Layout changes are part of the node revision, so content moderation applies to them like to any other field; editors can save a draft layout and publish it later.
- Themes. Layout Builder offers the layouts registered by core, your theme and your modules. Core's layouts bring their own CSS and work in any theme; modules such as DXPR CMS Layouts add Bootstrap 5 layouts in fluid and container widths.
Questions about Layout Builder.
Planning a site that needs more than core? Talk to Sales.
Next step
Set up Layout Builder on one content type, restrict it to the layouts your design needs, and put a DXPR Builder field inside it for the content. Your editors get a fixed frame and a visual, AI-assisted editor inside it.
23 Oct 2026 7:12am GMT
DXPR: Drupal website examples: 16 sites running on Drupal in 2026
Drupal website examples: 16 sites running on Drupal in 2026 Jurriaan
Drupal runs some of the busiest public websites in the world, and most of them do not look like each other. That is the point of this list. Every site below runs Drupal today, checked on 23 October 2026 against the markup the sites serve, and together they cover universities, governments, global manufacturers, biotech, security companies and libraries.
Most of them are DXPR customers, so for those we can tell you what was built, not only what it looks like: the team behind it, the problem they solved and, where the case study states them, the numbers. A few well-known Drupal sites are included for breadth. Where the old version of this article listed sites that have since moved to other platforms, they are gone; Drupal website examples are only useful when they are current.
How pages like these get built in 2026: with AI, inside Drupal.
Every site on this list has an editorial team that publishes without a developer in the loop. In 2026 that team starts a page with a brief.
DXPR Builder turns a brief into an editable page: describe the audience, the message and the page structure, then shape the result in the visual editor. The draft is normal DXPR Builder content, so an author can rewrite a headline, move a section or swap an image without touching AI again. Translations start as AI drafts and finish with a local editor, with Drupal keeping the language editions connected. Nothing publishes on its own: the page goes through the permissions and moderation your Drupal site already has.
The free Personal plan includes DXPR Builder and 10,000 AI credits a month for one production website, with no card and no time limit. Teams that work with a coding agent can go further with the DXPR agent skills: the agent builds pages, configures the theme and sets up Views from a brief, and hands the result to a human editor.
See it on a site of your own
The live demo gives you a Drupal site with DXPR Builder, DXPR Theme and the AI features switched on. Build a page from a brief and keep the result. How AI page building works.
1. Synaptics
Synaptics, headquartered in San Jose, California, makes the touch, display, biometrics, video, audio and speech technologies that sit between people and their devices. The corporate site is a semiconductor catalogue and a newsroom in one: a hero carousel for the current whitepaper, a dated news row, and product navigation grouped under Products, Applications, Support, Careers and Company, in English with a Simplified Chinese edition. The server announces itself as Drupal 10.
The marketing team runs the site on DXPR Builder, with DXPR Theme holding the brand, and publishes product launches, security content and campaign pages without an IT ticket. The case study counts 369 pages across the technical portfolio and twelve editors. Visit synaptics.com or read the Synaptics case study.
2. HackerOne
HackerOne runs the largest community of security researchers and combines it with AI to find and fix vulnerabilities across the development lifecycle. Its marketing site is the classic security-platform layout done well: a dark hero with two calls to action, a logo strip of customers (GM, IBM, PayPal, Shopify, Snap, TikTok), and navigation for Platform, Solutions, Partners, Researchers, Resources and Company, with a Leaderboard and a "Contacted by a hacker?" link for the people who matter most to a bug bounty company. The markup serves its files from Drupal's /sites/default/files/.
Marketers assemble campaign pages from reusable DXPR Builder sections and preview them before review; the case study puts the customer base at 1,300+ organizations. Visit hackerone.com or read the HackerOne case study.
3. SWARCO
SWARCO is an Austrian group with more than 50 years in mobility management and road safety, from traffic signals to the glass beads in road markings. The group site publishes twelve language editions (Czech, Danish, German, English, Spanish, Finnish, French, Hungarian, Dutch, Norwegian, Romanian and Swedish) and sends visitors to their language by location; Drupal Commerce is installed alongside. The server reports Drupal 10.
DXPR Builder runs across the subsidiary sites on one shared Drupal platform, with DXPR Theme keeping the group identity while regional editors publish product pages and news in their own language: 7 brands, 6 countries and 13 editors at the time of the case study. Visit swarco.com or read the SWARCO case study.
4. Vanderbilt University Medical Center
VUMC in Nashville, Tennessee, is home to the region's Level I trauma centre and a top-ranked children's hospital. Its homepage is a hub for everyone who deals with the medical centre: patients, referring providers, job seekers, donors and staff, with a news hero, price transparency and employee resources in the navigation, and quick tiles to the resources directory, email and MyWorkday. The server reports Drupal 10.
Five department websites, from internal medicine to dermatology, run DXPR Builder inside VUMC's Drupal estate, with DXPR Theme enforcing the identity so clinical faculty and communications staff publish without IT support. One handbook alone holds 306 clinical topics across 26 specialties. Visit vumc.org or read the VUMC case study.
5. Universidad de los Andes
Colombia's Universidad de los Andes describes itself as an autonomous, innovative university built on critical and ethical education, with more than 14,000 students. The Spanish-language site leads with an admissions bar for the next intake, a news hero and navigation for the university, its academic offer, admissions, research and academic life. It is one of the Drupal 11 sites on this list.
The engineering faculty websites run DXPR Builder, so department coordinators publish programme pages, research showcases and faculty profiles within the university's brand framework, across three or more faculty sites. Visit uniandes.edu.co or read the Universidad de los Andes case study.
6. WHO Regional Office for Africa
The World Health Organization's Regional Office for Africa serves 47 Member States, and its portal is built for emergencies: the hero carries the current outbreak story, the navigation covers health topics, countries, the newsroom, emergencies and data, and every country has its own page. It publishes in English, French and Portuguese on Drupal 10.
DXPR Builder brings visual page production into the site, where saved layouts give the next bulletin its structure while Drupal's permissions keep review with the health specialists. Visit afro.who.int or read the WHO Africa case study.
7. Veolia Water Technologies UK
Veolia Water Technologies' UK team draws on a portfolio of more than 350 water treatment technologies, and its country site sells them to engineers: a six-slide hero, an "Explore Water Treatment" tile section, customer services, careers, news and resources, and an online shop, all on Drupal 10.
With DXPR the team brings a buyer's water problem, the proposed solution and the useful resources together on one page, and adapts that structure to other sectors without commissioning a new layout each time. Visit veoliawatertechnologies.co.uk or read the Veolia case study.
8. Vicat Group
Vicat is a French, family-run cement manufacturer founded more than 165 years ago, with an international footprint. The corporate site runs in French and English on Drupal 11, with a live stock ticker in the header, a "You are" audience selector and news tagged by publication, innovation and finance.
The DXPR story at Vicat is its three product-brand sites, Solutions Vicat, Décoffrage and Chape Vicat, which share one Drupal platform with DXPR Builder and DXPR Theme so the product teams publish technical content and service pages on their own. Visit vicat.com or read the Vicat case study.
9. Arteche
The Arteche Group has 75 years in the electric power industry and a catalogue of instrument transformers, relays, protection and measurement equipment and substation automation, with its equipment in more than 150 countries. The site is deliberately quiet, a logo, a hamburger menu and a two-slide mission hero, and runs in German, English, Spanish, French and Portuguese on Drupal 10.
Every page of the five language editions is built visually with DXPR Builder under one brand, with the same Builder-built hero structure carried across the editions. Visit arteche.com or read the Arteche case study.
10. FONPLATA
FONPLATA is the development bank of the River Plate Basin, formed by Argentina, Bolivia, Brazil, Paraguay and Uruguay and headquartered in Santa Cruz de la Sierra. Its site speaks Spanish, English and Brazilian Portuguese, with a country hero carousel, a latest-news row and per-country operations pages, served from Drupal's files directory.
The communications team publishes institutional news, investor information and country operations from one Drupal platform built with DXPR Builder and DXPR Theme, assembling country heroes, news cards and listing pages visually. Visit fonplata.org or read the FONPLATA case study.
11. Nucleus Financial
Nucleus is one of the UK's leading independent groups for investment platforms, products and wealthtech software, with more than 160,000 underlying customers and 5,000 advisers. The site splits by audience the moment you arrive: a top bar for advisers and for customers, a hero for the new Nucleus platform, and two large entry cards, "I'm an Adviser" and "I'm a Customer". Drupal 10, with a platform login kept separate.
The Edinburgh marketing team publishes adviser and customer content with DXPR Builder, preparing and reviewing pages on staging before release to the live site. Visit nucleusfinancial.com or read the Nucleus case study.
12. City of Los Angeles, Bureau of Contract Administration
The Bureau of Contract Administration is the City of Los Angeles's inspector for construction in the public realm and administers the city's business certifications. The site is a service desk: the official city banner, a Google Translate menu, navigation for contracting, inspection and wage standards, and four featured services, from Raise The Wage LA to requesting an inspection. It runs on Drupal 11.
With Drupal and DXPR the service owners maintain the certification, inspection and wage-information pages themselves, grouping requirements, documents and application links on a repeatable service-page layout. Visit bca.lacity.gov or read the City of Los Angeles case study.
13. City of Boston
Boston.gov is the model many city portals copy: a plain "welcome" hero, information and services first, public notices, and a daily status strip for City Hall hours, trash and recycling, street cleaning, parking meters and the tow lot. It publishes in nine languages, from Spanish and Haitian Creole to Vietnamese and Simplified Chinese, on Drupal 10.
Not a DXPR site, but a good answer to anyone who asks whether Drupal can run a city. Visit boston.gov.
14. State of Georgia
Georgia.gov calls itself the starting place for living, growing and thriving in the Peach State. The portal leads with a services A-Z, how-to guides, an organizations directory and a panel of the most-accessed services, SNAP benefits first, under a photo of the gold-domed Capitol. Drupal 10.
State portals are where Drupal's structured content earns its keep: hundreds of agencies, one search, one design. Visit georgia.gov.
15. European Commission
The European Commission's site is Drupal at the scale of a continent: 24 language editions, from Bulgarian to Swedish, a common header from the Europa Component Library, and navigation for priorities, news, topics and resources. The root sends you to a language choice first; the English edition reports Drupal 11.
If your question is whether Drupal handles multilingual publishing, this is the reference site. Visit commission.europa.eu.
16. UNICEF
UNICEF works in the world's toughest places to reach the most disadvantaged children. Its global site publishes in English, French, Spanish, Arabic and Chinese, with a press centre and a donate button never more than a glance away, and a full-width story hero that changes with the news. The pages are served from Drupal's files directory.
Five scripts, including right-to-left Arabic, on one platform, with the same editorial team behind every edition. Visit unicef.org.
What these Drupal websites have in common
- Structured content, not pages. Programmes, products, publications, events and people are content types with fields, and the listings, filters and feeds are Views over that content. It is why these sites can grow to thousands of pages without losing their shape.
- Many languages, one site. Several of the sites publish in two or more languages from one Drupal installation, with every translation connected to its source.
- Editorial teams in control. Permissions, moderation and revisions are part of Drupal core, so a department or a regional team can publish within rules the organisation sets once.
- Public-sector and accessibility requirements. Governments, universities and health organisations choose Drupal for its accessibility track record and its security process, and several sites here are exactly that kind of organisation.
Questions about Drupal websites.
Have a project in mind? Talk to Sales.
Build the next one
If one of these sites looks like the one you need, the quickest way to find out is to build a page: the live demo gives you a Drupal site with DXPR Builder, DXPR Theme and AI in place. If you already have a Drupal site, add DXPR Builder to it without replacing your platform.
23 Oct 2026 7:00am GMT