← Back to Documentation

Navigation Menu

The navigation menu helps visitors explore your website. This guide covers configuring your menu, adding links, and customizing appearance.

Accessing Navigation Settings

  1. Click Settings in the top toolbar
  2. Select Navigation from the sidebar
  3. See your current menu structure

Menu Structure

Default Navigation

By default, your navigation includes:

  • All published pages
  • Ordered by page position
  • Linked to page URLs

Menu Items

Each menu item has:

| Property | Description | |----------|-------------| | Label | Text shown in menu | | Link | Page or URL destination | | Visibility | Show/hide item | | Children | Submenu items (dropdown) |

Adding Menu Items

Add a Page

  1. Click Add Item
  2. Select Page
  3. Choose from your pages
  4. Click Add

The page appears in navigation.

Add a Link

For external URLs:

  1. Click Add Item
  2. Select Link
  3. Enter:
    • Label (display text)
    • URL (destination)
    • Open in new tab (optional)
  4. Click Add

Add a Dropdown

Create submenus:

  1. Click Add Item
  2. Select Dropdown
  3. Enter dropdown label
  4. Add items to the dropdown

Organizing Menu Items

Reordering

Drag items to reorder:

  1. Click and hold an item
  2. Drag up or down
  3. Release in new position

Creating Submenus

Make nested navigation:

  1. Drag an item onto another
  2. It becomes a child item
  3. Parent shows dropdown arrow

Removing Items

Remove items from navigation:

  1. Hover over the item
  2. Click the X or delete icon
  3. Confirm removal

Note: Removing from navigation doesn't delete the page.

Menu Item Settings

Editing an Item

Click an item to edit:

  • Label - Change display text
  • Link - Change destination
  • New tab - Open in new window
  • Hide - Temporarily hide

Labels vs. Page Titles

You can use different text:

  • Page title: "Our Services"
  • Menu label: "Services"

The menu shows the label.

Page Visibility

Published Pages

Published pages can appear in navigation.

Draft Pages

Draft pages:

  • Don't show in navigation by default
  • Can be added manually
  • Link won't work publicly

Hidden Pages

Hide pages from navigation:

  1. Go to page settings
  2. Toggle Show in Navigation off
  3. Page accessible via direct URL only

Navigation Styling

Menu Position

Choose where navigation appears:

| Position | Description | |----------|-------------| | Header | Top of page | | Sidebar | Left or right side | | Footer | Bottom of page | | Overlay | Full-screen menu |

Style Options

Customize appearance:

  • Font - Menu font family
  • Size - Text size
  • Color - Text and hover colors
  • Spacing - Gap between items
  • Style - Horizontal, vertical, minimal

Active State

Highlight current page:

  • Background - Colored background
  • Underline - Line below text
  • Bold - Heavier font weight
  • Color - Different text color

Mobile Navigation

Mobile Menu

On small screens:

  • Full menu collapses
  • Hamburger icon appears
  • Click opens mobile menu

Mobile Menu Style

Options for mobile:

| Style | Description | |-------|-------------| | Slide | Menu slides in from side | | Dropdown | Menu drops down from header | | Overlay | Full-screen overlay | | Off-canvas | Pushes content aside |

Mobile-Specific Items

You can show different items on mobile:

  1. Select a menu item
  2. Click Device Visibility
  3. Toggle for desktop/mobile

Advanced Navigation

Multiple Menus

Create different menus:

  • Primary - Main navigation
  • Footer - Bottom links
  • Sidebar - Secondary navigation

Mega Menus

For large sites:

  1. Create a dropdown
  2. Add multiple columns
  3. Include images or descriptions
  4. Style as mega menu

External Links

Add links to:

  • Social media profiles
  • External portfolios
  • Contact email (mailto:)
  • Phone number (tel:)

Common Patterns

Portfolio Navigation

Home
Work ▼
  - Project 1
  - Project 2
  - Project 3
About
Contact

Business Navigation

Home
Services ▼
  - Service A
  - Service B
About Us
Blog
Contact

Simple Navigation

Portfolio
About
Contact

Tips for Good Navigation

  1. Keep it simple - 5-7 items maximum
  2. Use clear labels - Describe the destination
  3. Logical order - Most important first
  4. Limit depth - Avoid deep nesting
  5. Test on mobile - Ensure usability

Troubleshooting

Page not appearing

  1. Check page is published
  2. Verify "Show in Navigation" is on
  3. Save and republish site

Menu items in wrong order

  1. Open Navigation settings
  2. Drag to reorder
  3. Save changes

Dropdown not working

  1. Ensure items are nested correctly
  2. Check for hover/click issues
  3. Test on different devices

Next Steps

Navigation Menu - Salon Docs