Priority Plus Navigation

常見問題集

How does the Priority Plus pattern work?

The Priority Plus pattern prioritizes the most important navigation items by keeping them visible in the main navigation bar. When there isn’t enough horizontal space for all items, less important items are automatically moved into a “More” dropdown menu. As the viewport width changes, items dynamically move in and out of the dropdown.

Can I customize the “More” button text?

Yes! In the block inspector panel, you can customize both the “More” button label (default: “Browse”) and choose from different icons: none (default), chevron down, plus, or menu symbols.

Does it work with nested navigation items?

Yes! Items with submenus in the dropdown are converted to accessible accordions that respect the Core Navigation “Open submenus on click” setting.

How does it work with WordPress’s responsive overlay menu?

Priority Plus Navigation intelligently integrates with WordPress core navigation overlay menu settings:

• Never: Priority Plus is always active across all screen sizes
• Mobile: Priority Plus works on desktop and automatically disables when the hamburger menu activates
• Always: Not compatible – Priority Plus is automatically disabled and the “Always” option appears greyed out in the editor

Is it accessible?

Yes, the block is built with accessibility in mind, supporting keyboard navigation and providing proper ARIA labels for screen readers.

Can I style the dropdown menu?

Absolutely! The dropdown menu can be fully customized through the block inspector or your theme’s theme.json file. You can control:

• Background color, item text color, and hover colors
• Separate submenu colors for nested accordion items
• Item spacing and hover effects
• Multi-level navigation indentation
• Box shadow, border radius, and item separators

Example configuration in your theme’s theme.json:

{
  "version": 3,
  "settings": {
    "custom": {
      "priorityPlusNavigation": {
        "dropdown": {
          "backgroundColor": "#f0f0f0",
          "borderColor": "#999999",
          "itemHoverBackgroundColor": "rgba(0, 0, 0, 0.08)"
        }
      }
    }
  }
}

The plugin provides sensible defaults, and you only need to specify the properties you want to customize. For complete styling documentation, see the GitHub repository.