Navigation | SP Page Builder (Pro) - Documentation | JoomShaper
SP Page Builder 6 is Here! Learn More →

SP Page Builder (Pro)

Updated Last: 15 October 2025

Navigation

The navigation addon is a simple, independent menu addon. Menu items with inserted links are managed by this addon. URL aliases are still generated by Joomla Menu Manager, and the navigation addon doesn't change that.

navigation addon preview

How to Add a Navigation Addon

You can add the Navigation addon to your page from the SP Page Builder sidebar. Simply drag the addon from the Addons panel and drop it on the section of the page where you want to add a Navigation addon.

Navigation Settings

When you click on the Navigation, the addon settings panel will open up from where you can customize it to fit your needs. 

Content

navigation content

Items: Add Items to your navigation menu

Enable Sticky: Enabling this option keeps your menu (navigation) visible, allowing users to move across other parts of the page easily without needing to scroll to the very top.

List Type: Choose whether you want the menu list type to be horizontally listed (Navigation) or vertically listed (List).

Alignment: Used to set the horizontal alignment of navigation links. You can choose: left, right, or centered.

Click on the +Add button to add a new navigation item. Click on the edit icon beside the item to open the item editing panel.

Title: Enter the text you want to display for your navigation item.

Link: Provide the URL where the menu item should direct users.

Icon: Choose an icon to represent the menu item visually.

Active Item: Mark this option to highlight the menu item as active.

CSS Class: Add a custom CSS class to style the menu item as desired.

Style

navigation style

Typography: Select the font type and settings for the menu item text.

Normal: Set the default appearance of the menu item.

Hover: Define the appearance of the menu item when hovered over.

Active: Specify how the menu item looks when it is the current active item.

Color: Choose the color for the menu item text.

Background: Set the background color or image for the menu item.

Icon

navigation addon icon

Configure the position, resize, and adjust the margins of your icon in this section.

Burger 

navigation burger items

Set the color settings for your Burger menu item texts and background and choose to change the color preferences in the case of Normal and Active.