BLACK FRIDAY: 50% OFF all Pro plans Code: BLACKFRIDAY50
Pro from $10 a year or $30 lifetime, no code needed: Code: BLACKFRIDAY50
Ends Cyber Monday, 30 Nov. Lock in the price today. Code: BLACKFRIDAY50
Get 50% Off

Nav Menu Pro block guide

Pro

How to add the Nav Menu Pro block and what every setting does. It comes with Bright Addons Blocks Pro, which also includes every free block.

Start

Add the block

A WordPress menu with mega panels, badges, descriptions and images, sticky and mobile off-canvas styles.

  1. Install the plugin

    Install Bright Addons Blocks Pro from your account and activate your licence. It includes every free block.
  2. Add the block

    Open a page or post in the block editor, press +, and search for “Nav Menu Pro”. It is in the Bright Addons Pro category.
  3. Set it up

    Open the block sidebar and work through Menu, Mega panels, Mega panel 2, Mobile menu and Badges.
  4. Publish

    Preview the page on desktop, tablet and phone, then publish. The block loads its own CSS and JavaScript only on pages that use it.

Panel 1 of 5

Menu

Open the block sidebar and find the Menu panel.

Setting What it does Choices
Menu Menus are managed in Appearance > Menus. –
Layout Choose one. Horizontal, Vertical
Alignment Choose one. Start, Center, End, Spread
Submenus Choose one. Open to the side, Open below (accordion)
Open submenus on The arrow next to an item always opens its submenu, also by keyboard and on touch screens. Hover, Click
Menu levels Choose one. All, 1, 2, 3, 4
Submenu arrow Choose one. Chevron, Triangle, Plus
Hover effect Choose one. None, Underline, Overline, Line from center, Background, Frame
Submenu animation Choose one. None, Fade, Slide up, Slide down, Zoom
Name for screen readers Give each menu on a page its own name. –

Panel 2 of 5

Mega panels

Open the block sidebar and find the Mega panels panel.

Setting What it does Choices
Show panels in the mobile menu Off: on small screens the item is a normal link. –

Panel 3 of 5

Mega panel 2

Open the block sidebar and find the Mega panel 2 panel.

Setting What it does Choices
Use mega panel 2 A template chosen in Mega Panels for the same item comes first. –
Layout Choose one. Groups, links and live preview, Columns with headings, Image cards, Icon list with descriptions
Columns Choose one. 1, 2, 3, 4, 5, 6
Panel width Choose one. Width of the surrounding container, Width of the menu, Full width (edge to edge of the screen), Custom
Width (px) From 280 to 1600. –
Position Choose one. Starts at the menu item, Centered under the menu item, Centered on the screen
Content width (px) Keeps the panel content at this width inside a wide panel, for example 1200 on a full width panel. Empty or 0: no limit. –
Images On or off. –
Use featured images An item without its own image shows the featured image of the page or post it links to. –
Image shape Choose one. Square, 4:3, 3:2, 16:9, Portrait 3:4
Image resolution Choose one. Thumbnail, Medium, Medium large, Large
Descriptions On or off. –
Badges On or off. –
Preview link text Optional link under the preview description. –
Show group headings as links On or off. –

Panel 4 of 5

Mobile menu

Open the block sidebar and find the Mobile menu panel.

Setting What it does Choices
Switch to the mobile menu Choose one. On phones, On tablets and phones, On every screen, Never
Opens as Choose one. Dropdown below the button, Panel from the left, Panel from the right
Dropdown as wide as the screen On or off. –
Button text Optional, shown next to the icon. –
Button alignment Choose one. Start, Center, End
Close after a link is chosen Useful for links that jump to a section of the same page. –

Panel 5 of 5

Badges

Open the block sidebar and find the Badges panel.

Setting What it does Choices
Show badges in the menu On or off. –
Badge position (top level) Choose one. On top of the item, Next to the text

Questions

Good to know

Is the Nav Menu Pro block free?

Nav Menu Pro is a Pro block. It comes with Bright Addons Blocks Pro, which has the same plans and prices as Bright Addons Pro for Elementor and includes all 62 free blocks.

Do I need Elementor for this block?

No. It is a block for the WordPress block editor (Gutenberg). Elementor is not needed. If you use Bright Addons Pro for Elementor on the same site, both plugins work side by side.

Will it slow down my pages?

No. Each block loads only its own small CSS and JavaScript, and only on pages where it is used. Blocks you do not need can be switched off in Bright Blocks.

Does it work with my theme?

Yes. The blocks work with block themes and classic themes, and follow your theme fonts. Wide and full width alignment are supported.

Bright Addons Blocks

Build with every block

Blocks Pro adds 99 Pro blocks, Pro effects for every block, Theme Templates and popups to the 62 free blocks.