Responsive Menu Block
Overview
The Responsive Menu Block (registered as "Dynamic Menu" in the block inserter) is a versatile navigation component in the Phenix Design System. It provides multiple menu types including classic WordPress menus, taxonomy-based menus, and post-based menus. The block features responsive behavior with configurable mobile display modes and supports customizable dropdown effects, icons, and styling options.
Key Features
- Multiple Menu Types: Support for classic WordPress menus, taxonomy-based navigation, and post-based navigation
- Responsive Design: Configurable mobile display with dropdown or offcanvas modes
- Interactive Options: Dropdown menus with hover or click activation
- Custom Icons: Configurable icons for menu items and dropdown indicators
- Animation Effects: Various transition effects for dropdown menus (slide, fade, custom)
- Direction Control: Support for both horizontal and vertical menu layouts
- Count Badges: Optional display of post count badges for taxonomy and post menus
- Server-Side Rendering: Menus are rendered on the server for optimal performance and SEO
How to Use
- In the WordPress editor, click the "+" button to add a new block
- Search for "Dynamic Menu" or find it in the "Phenix Blocks" category
- Add the Dynamic Menu block to your page
- From the toolbar, select the menu type (Classic, Taxonomy, or Posts)
- For Classic menus, select an existing WordPress menu from the dropdown
- For Taxonomy menus, select a taxonomy to display its terms as menu items
- For Posts menus, select a post type and set the number of items to display
- Configure additional options like responsive behavior, icons, and dropdown effects
Block Settings
General Options
Option | Description |
---|---|
HTML Tag | Select the HTML element to use for the menu wrapper (nav, div, main, aside) |
Menu Type | Choose between Classic (WordPress menu), Taxonomy (terms), or Posts |
Menu ID | For Classic type: select a WordPress menu; For Taxonomy: select a taxonomy; For Posts: select a post type |
Menu Display Options
Option | Description |
---|---|
Direction | Choose between vertical or horizontal menu layout |
Hover Mode | When enabled, dropdowns open on hover instead of click |
Responsive | Enable responsive behavior for mobile devices |
Items Icon | Enable and select icons to display before menu items |
Count Badge | Show post/term count badges next to menu items |
With Terms | For Post menus: include taxonomy terms in the menu structure |
Dropdown Options
Option | Description |
---|---|
Arrow Icon | Select the icon to indicate dropdown menus |
Items Count | For Post/Taxonomy menus: set the maximum number of items to display |
Responsive Options
Option | Description |
---|---|
Mobile Mode | Select how the menu behaves on mobile (dropdown or offcanvas) |
Effect | Choose the animation effect for mobile menu (slide, fade, custom) |
Trigger | Enable a toggle button for the mobile menu |
Style Options
Option | Description |
---|---|
Text Color | Set the color for menu item text |
Hover Color | Set the color for menu items on hover |
Background | Set the background color or gradient for the menu |
Hover Background | Set the background for menu items on hover |
Typography | Control font size, weight, and other text properties |
Technical Implementation
The Responsive Menu block is implemented with server-side rendering for optimal performance and SEO. The PHP rendering function handles different menu types:
Classic WordPress Menus: Uses
wp_nav_menu()
to render standard WordPress menusTaxonomy Menus: Dynamically generates menu items from taxonomy terms using
get_terms()
Post Menus: Creates menu items from posts of a selected post type using
WP_Query
Implementation Examples
The Dynamic Menu block can be used in various ways based on the menu type and configuration. Below are descriptions of common implementations based on the actual block functionality.
Classic WordPress Menu
This implementation uses an existing WordPress menu:
- Configuration:
- Menu Type: Classic
- Menu ID: Select an existing WordPress menu
- HTML Tag: nav
- Arrow Icon: far fa-angle-down
- Hover Mode: Enabled for dropdown on hover
Taxonomy-Based Navigation
This implementation creates a menu from taxonomy terms:
- Configuration:
- Menu Type: Taxonomy
- Menu ID: Select a taxonomy (e.g., category, tag, custom taxonomy)
- Direction: Horizontal or Vertical
- Count Badge: Enabled to show post counts
- With Terms: Enabled to show child terms as dropdown items
Post-Based Navigation
This implementation creates a menu from posts:
- Configuration:
- Menu Type: Posts
- Post Type: Select a post type (e.g., post, page, custom post type)
- Items Count: Set number of posts to display
- Items Icon: Enabled with custom icon (e.g., far fa-file)
Responsive Mobile Menu
This implementation focuses on mobile display options:
- Configuration:
- Responsive: Enabled
- Mobile Mode: Dropdown or Offcanvas
- Effect: Slide or Fade
- Trigger: Enabled to show toggle button
Common Use Cases
Main Site Navigation
A classic WordPress menu used for primary site navigation with responsive behavior:
- Configuration:
- Menu Type: Classic
- Menu ID: primary-menu
- Responsive: Enabled
- Mobile Mode: Dropdown
- Direction: Horizontal
- Arrow Icon: far fa-angle-down
Category Navigation
A taxonomy-based menu showing blog categories with post counts:
- Configuration:
- Menu Type: Taxonomy
- Menu ID: category
- Count Badge: Enabled
- Items Icon: far fa-folder
- Direction: Vertical
Recent Posts Navigation
A post-based menu showing recent posts:
- Configuration:
- Menu Type: Posts
- Post Type: post
- Items Count: 5
- Items Icon: far fa-file-alt
Best Practices
Mobile-First Approach: Design your menu with mobile users in mind first, then enhance for larger screens
Clear Navigation: Keep menu items clear and concise, avoiding overly complex nested structures
Visual Feedback: Provide clear visual cues for active items, hover states, and dropdown indicators
Accessibility: Ensure the menu is fully keyboard navigable and includes proper ARIA attributes
Performance: Be mindful of animation effects that might impact performance, especially on mobile devices
Testing: Test your menu thoroughly across different devices and screen sizes
Consistency: Maintain consistent styling and behavior with the rest of your site's design system
Related Blocks
- Container Block - For positioning the menu within layouts
- Grid Row Block - For creating header layouts with menus
- Logo Block - For adding a logo alongside the menu