A WordPress plugin that generates BEM-compliant CSS classes for navigation menus, replacing WordPress's default menu markup.
WordPress BEM Menu is a PHP plugin that replaces WordPress's default navigation menu HTML output with clean, BEM (Block Element Modifier) syntax CSS classes. It solves the problem of inconsistent, poorly named menu classes in WordPress themes, making CSS styling more predictable and maintainable for developers.
WordPress theme developers and frontend engineers who want to implement BEM methodology in their navigation menus and improve CSS architecture.
Developers choose this plugin because it provides a simple, drop-in solution for generating BEM-compliant menu markup without modifying core WordPress files, offering better CSS organization and reducing styling conflicts compared to default WordPress menu classes.
Better menu implementation for Wordpress using BEM syntax
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Replaces WordPress's bloated, inconsistent default classes with logical BEM syntax (e.g., .my-menu__item), making CSS more predictable and scalable, as demonstrated in the HTML output examples.
Allows custom modifiers for the menu <ul> via string or array, enabling easy theme variations without inheriting bloat, as shown in the usage examples with multiple modifiers.
Provides specific classes like .my-menu__sub-menu--x for sub-menus by depth, allowing precise CSS targeting of nested structures without complex selectors.
Automatically converts custom CSS classes added in wp-admin Menus into BEM modifiers, ensuring consistency between admin input and frontend output without extra code.
Requires dropping PHP code into functions.php and modifying theme templates directly, which is more error-prone and less portable than a standard WordPress plugin installation.
Forces BEM syntax without support for other CSS architectures, making it unsuitable for teams using different conventions or those needing flexible class naming.
Outputs only class names without any pre-built CSS, so developers must write all styles from scratch, adding to frontend development time and effort.