Skip to main content

Manage navigation menus

Create navigation menus, add and arrange links, assign menus to pages, add a dropdown to a header, and show links only to logged-in customers.

The Navigation tab is where you build the menus that guide visitors around your site. Kajabi includes default menus, such as the Main Menu and Footer, that appear on your pages until you assign a different menu.

Create custom menus when different pages need different links. On a sales page, for example, a custom menu can link only to the pages that help sell your Offer.

Add a navigation menu

  1. From the Dashboard, click Website, then Navigation.

  2. Click + New Navigation Menu in the top-right corner.

  3. Enter a Title for the menu. Only you see it. Visitors never do.

  4. Click Save Menu.

Navmenu

Navmenu2

The menu then appears in the Custom Menus tab. To use it on a page, see Assign a navigation menu to a page later in this article.

Note: Navigation items inherit their font size and color from the page's Style Guide settings. To change how navigation items look, update the Fonts and Font Colors settings in the Style Guide.

Add links to a navigation menu

Links let visitors reach pages that aren't in the default navigation. Before you start, copy the URL or note the name of the module, lesson, or page you want to link.

  1. From the Dashboard, click Website, then Navigation.

  2. Under the menu you want to change, click Add.

  3. Select a link type:

    • Add Product: Link to a Module or Lesson.

    • Add Page: Link to a Landing Page, Website Page, or static page.

    • Add Link: Link to a site outside Kajabi or to a path on your site.

  4. Enter the link text, up to 50 characters. The field is labeled Title for products and outside links, and Name for pages.

  5. Choose the module, lesson, or page. For Add Link, enter a Path or URL that starts with http://, https://, or /.

  6. Click Save.

Links to unpublished modules, lessons, and pages show a Draft label in the Navigation tab. Visitors don't see them until you publish the module, lesson, or page.

Tip: To link a navigation item to a specific section on a page, use an anchor link. Open the page editor, click the section you want to link to, and copy the Section ID from the sidebar. Then add a navigation link using Add Link and enter the URL as /your-page-slug#your-section-id (for example, /home#about-us). Learn how to find and use Section IDs.

Edit navigation links and menus

Change a link, reorder a menu, or rename or delete a menu from the Navigation tab.

Edit or delete a link

  1. From the Dashboard, click Website, then Navigation.

  2. Click the pencil icon next to a link to edit it.

  3. Update the Title or Path or URL as needed.

  4. Click Save.

To remove the link instead, click Delete in the same window and confirm.

Rearrange links in a navigation menu

  1. From the Dashboard, click Website, then Navigation.

  2. Hover over the drag handle to the left of the link you want to move.

  3. Click and drag the link to your desired position.

Rearrange navigation links

Note: Dragging a link below another link in the Navigation tab does not create a submenu or dropdown. To nest a page as a submenu item under a main navigation link, add a Dropdown Menu block to the header.

Rename or delete a navigation menu

  1. From the Dashboard, click Website, then Navigation.

  2. Open the more options (...) menu for the menu you want to change.

  3. Select Edit Title.

  4. Enter a new Title and click Save Menu.

To delete the menu, click Delete in the same window and confirm.

Note: You can rename the default menus, but you can't delete them.

Show a link only to logged-in customers

Keep member-only pages, Course content, and other resources behind a login by hiding their link from everyone who isn't logged in to your site.

  1. From the Dashboard, click Website, then Navigation.

  2. Find the menu, then click the pencil icon beside the link you want to restrict. To restrict a new link, add it first as described in Add links to a navigation menu.

  3. Select Visible to logged in users only.

  4. Click Save.
    ​

Assign a navigation menu to a page

After you build menus, assign them to the pages of your site. By default, the Main Menu and Footer apply to every page until you assign a different menu.

When you assign one menu to several pages and later update a link in that menu, every page using the menu updates automatically.

To assign a menu, open the Header or Footer section in the editor for:

  • Website and Landing pages

  • Checkout pages

  • Course pages

Assign navigation menu

Assign a menu to a Website or Landing page

Add menus to the header and footer of your Website, Landing, and Funnel pages with the Menu block:

  1. From the Dashboard, click Website, then Pages.

  2. Locate the page you want to customize.

  3. Click the page Title or the color palette icon to Customize.

  4. Open the Header or Footer section of the editor.

  5. Select the Menu block, or click Add Content to add it.

  6. Select a navigation menu from the dropdown.

  7. Click Save.

To show submenu links under a menu item, add a Dropdown Menu block as described in Add a Dropdown Menu to a header later in this article.

Note: Website Pages share one Header. The menu you choose in the Header of one Website Page shows on all your Website Pages, and showing or hiding the Menu block there changes every Website Page. Each Landing Page has its own Header, so you can use a different menu, or no menu, on a single Landing Page. There's no built-in setting to remove the menu from only one Website Page.

Assign a menu to a Checkout page

Add a menu to the footer of a Checkout page:

  1. From the Dashboard, click Products.

  2. Select the Sales tab.

  3. Click Pricing.

  4. Select the Offer you want to edit.

  5. Click Edit checkout.

  6. Select Footer, select the Link List block to add the navigation menu from the Menu dropdown.

  7. Click Save.

Assign a menu to Course pages

Add a menu to the header or footer of Course pages:

  1. From the Dashboard, click Products, then Courses.

  2. Select the Course you want to customize.

  3. Click the Customize tab.

  4. Hover over the Template Preview and click Customize.

  5. Open the Header or Footer section in the editor.

  6. Go to the Menu section.

  7. Select a navigation menu from the Menu dropdown.

  8. Click Save.

Connect Landing Pages to your website

Website Pages are the standard pages Kajabi creates and connects for you, such as your Homepage, Library Page, and Login Page. Landing Pages are standalone pages you build for a specific purpose, and they aren't linked to your site until you connect them.

Use Landing Pages to:

Connect a Landing Page to your website by adding it to a navigation menu or by adding a Call to Action button to a Website Page.

Add a Landing Page to a navigation menu

Add your Landing Page link to a menu used on your Website Pages, such as the Main Menu in the header.

  1. From the Dashboard, click Website, then Navigation.

  2. Find the menu you want to update with your Landing Page link.

  3. Click Add, then select Add Page.
    ​

  4. Enter a Name for the link. This is the link text that appears in your navigation menu.

  5. Select your Landing Page in the Page field.

  6. (Optional) Select Visible to logged in users only to show the link only to logged-in customers of your site.

  7. Click Save.

  8. Preview a Website Page that uses the menu to check your changes.

Add a Link List block to a page Section

A Link List block displays a navigation menu inside a Section of your page, so visitors can move between the pages you link.

81ADE6D5-9C06-4F75-8C15-55AFD2A52174.png

Add a Link List block

  1. From the Dashboard, click Website, then click Website Pages or Landing Pages.

  2. Click the Title of the page to open the editor.

  3. In the sidebar, click the Section you want to edit, or create a new Section.

  4. Click Add block.

  5. Select Link List. The new Link List block appears at the bottom of the Section.

  6. Click Save.

Note: The Link List block may not be available with your page template version. If you don't see it, create a new page with the latest version of the Kajabi Page Builder.

Customize a Link List block

Adjust the width, select a menu, brand your link colors, and set the list alignment. Then configure the block's Block Settings.

Select the menu for a Link List block

Select the navigation menu to use for the block in the Menu field. To create or change the menu, see Add a navigation menu and Add links to a navigation menu earlier in this article.

Note: To jump to your menus from the block, click Edit your link lists below the Menu field in the sidebar editor.

Set the link color

Click the color wheel to brand your link colors. To use a custom color, enter the RGB color code or use the sliders:

  • The square box adjusts the brightness and saturation

  • The horizontal rainbow bar selects the hue

  • The horizontal gradient bar selects the opacity

Show a title above the list

Enter a list title, set its color, and select Show Title to display it above your Link List.

84FF171A-A7AF-47B8-98F4-A5D16580BD75.png

Change the list alignment

Display your Link List as a row or as a column with the vertical alignment setting.

Add a Dropdown Menu to a header

A Dropdown Menu block turns a header link into a list of links to Landing Pages, Offers, and more, so visitors see a streamlined menu instead of a row of links.

Note: These steps apply to Kajabi Pages templates. If you use Premier Legacy templates, learn how to add a Dropdown Menu with Premier.

Add a Dropdown Menu block

  1. From the Dashboard, click Website, then select Website Pages or Landing Pages.

  2. Click a page Title to open it in the editor.

  3. In the sidebar, open the Header section.

  4. Click Add Block.

  5. Select Dropdown Menu.
    ​

Customize a Dropdown Menu block

Use the block's settings to match your branding and control how the dropdown looks and behaves.

Set the dropdown colors

Set the Dropdown text color and Dropdown background color to complement your branding. Click the Color icon to select a color from your site color palette.

To use a custom color, click the color wheel, then enter the RGB color code or use the sliders:

  • The vertical bar selects the hue.

  • The square box selects the brightness and saturation.

  • The horizontal bar selects the opacity.

Change the dropdown text

Change the text displayed in the header to signal the Dropdown Menu to your visitors.

Show or hide the icon

Use Show icon to display or hide the down arrow icon for the Dropdown Menu. This setting is only available with Website Builder pages.

Choose the menu

Select the navigation menu to use for the block in the Menu field. To create or change the menu, see Add a navigation menu and Add links to a navigation menu. To jump to your menus from the block, click Edit your link lists below the Menu field in the sidebar editor.

Open links in a new tab

Turn on Open in new tab to open the selected menu item in a new tab of your visitor's browser.

Align the dropdown links

Use Dropdown menu alignment to align the text of each link in a Dropdown Menu to the left, center, or right.

Stretch the block

Turn on Stretch block to fill the remaining space in the header. Turn it on for the block on the far left of the header. For example, to place your Logo on the far left and a Menu and User Menu on the far right, select Stretch block for the Logo. Adjust Stretch block and the alignment settings together to control the position of each block in the header.

Align the block in the header

Use Text alignment to place the block toward the left, center, or right of the header. Surrounding blocks and their alignment also affect this setting.

Add a Dropdown Menu in a Premier legacy template

Add a custom Dropdown Menu to the header of a page built with the Premier legacy template by adding code in the Code Editor.

Note: Adding a Dropdown Menu with Premier requires access to the Code Editor, available with the Pro Plan. Learn more about our plans at kajabi.com/pricing.

1. Add the dropdown include to the header

  1. Open the Code Editor for the page you want to customize.

  2. Open the Sections folder.

  3. Click the header.liquid file.

  4. Locate {% if h-ShowMenu %} near line 24.

  5. Paste {% include "dropdown" %} on the line below {% if h-ShowMenu %}.

  6. Click Save.

2. Create the dropdown snippet

  1. Open the Snippets folder.

  2. Click + Add a new Snippet.

  3. Enter dropdown in the Name field and click Create File.

3. Edit the dropdown code

  1. In your new dropdown.liquid file, paste the code below.

<ul class="nav navbar-nav" style="margin: 0; display: inline-block;"><div class="dropdown"><div class="dropdown-content"></div></div><li class="dropdown" style="margin: 0;"><a href="#" class="dropdown-toggle" data-toggle="dropdown">ENTER NAME ON NAV BAR</a><ul class="dropdown-menu"><li><a href="https://enterlinkhere.com/">OPTION 1</a></li><li><a href="https://enterlinkhere.com/">OPTION 2</a></li><li><a href="https://enterlinkhere.com/">OPTION 3</a></li></ul></li></ul>

Copy note for the runner: Intercom code blocks have no copy button. Select the code and copy it by hand.

  1. Replace ENTER NAME ON NAV BAR with the link name you want to show your site visitors.

  2. Replace https://enterlinkhere.com/ and OPTION 1, OPTION 2, and OPTION 3 with your own URLs and link text.

  3. Click Save.

  4. Click Preview to check your page.

Change the dropdown spacing

This optional step changes the vertical spacing between your dropdown links and requires more code in the Code Editor.

  1. In the Code Editor, open the Assets folder.

  2. Select the override.scss.liquid file.

  3. Paste the code below.

li{margin: 1px}

  1. Change the margin value (1px) to adjust the spacing.

  2. Click Save.

  3. Click Preview to check your page.

Did this answer your question?

Related Articles