Learn how to create navigation bars, dropdown menus, mobile hamburger menus, and link pages together for seamless site navigation.
The Navigation Panel
Access navigation settings from the Navigation Panel in the left sidebar:
- Create and manage menu structures
- Add links to pages, sections, or external URLs
- Configure dropdown menus
- Set active and hover states
Creating a Navigation Menu
- Click Add Menu in the Navigation Panel
- Name your menu (e.g., "Main Navigation", "Footer Links")
- Add menu items by clicking the + button
- Choose link type: Page, Section, or URL
Menu Item Types
- Page Link - Links to a page in your site
- Section Link - Scrolls to a section on the current page
- External URL - Links to an external website
- Dropdown - Contains nested menu items
Dropdown Menus
- Create a menu item and check Has Dropdown
- Add child items by dragging items underneath
- Configure dropdown appearance in the Properties panel
- Set hover delay and animation style
Mobile Navigation
Create responsive navigation for mobile devices:
- Enable Mobile Menu in navigation settings
- Choose hamburger or custom icon
- Configure slide-in or overlay menu style
- Set breakpoint for mobile menu switch
Styling Navigation
- Select the navigation component on canvas
- Use Properties panel to style colors, fonts, spacing
- Set hover and active states
- Add transitions for smooth effects
Linking Pages
- Select any element (button, text, shape)
- Open the Link settings in Properties
- Choose destination: page, section, URL, or email
- Set link behavior: same tab or new tab