Responsive Navigation Tutorial

This tutorial will guide you through creating a responsive navigation bar using component-based thinking — design once, and make it adapt seamlessly across desktop, tablet, and mobile.

Overview

By the end of this tutorial, you’ll have a navigation bar with the following features:

• Three responsive layouts: desktop, tablet, and mobile
• Hover interactions on menu items
• Customizable text and link properties
• A collapsible hamburger menu for mobile

Step 1: Create the Header Component

1. Select the entire navigation section.
2. Right-click and choose “Create Component”.
3. Name it “Header”.

Step 2: Create a Reusable Menu Item Component

1. Create the Menu Item Component

To keep your design consistent, we’ll turn each menu item into a reusable component.

1. Select a single menu item (e.g., “Home”).

2. Wrap it inside a Frame, then right-click and choose “Add Stack”.

   

3. Right-click the menu item container, select “Create Component”, and name it “NavItem”.

   

2. Add Hover Interaction

1. Enter the NavItem component edit mode.
2. Select the root component and add a Hover variant.

3. In the hover state, change the text color to black (or any color you prefer).

   

3. Create Component Variables

Text Variable

1. Select the text layer inside the NavItem component.

2. In the right panel, right-click the text property and choose “Create Variable”.

   

3. Rename the variable for clarity and easy management.

   

Link Variable

1. Select the outer container of the NavItem component.
2. In the right panel, find the Link property and click the "+" icon.

3. Right-click the link property and choose “Create Variable”.

   

Step 3: Apply the Menu Item Component

1. Go back to the Header component.
2. Replace all static menu items with the NavItem component.

3. Assign unique text and link values to each one.

   

Preview your design — when hovering over a menu item, the text color will change as expected.

Live Demo

Why Use Componentized Menu Items?

• Update Once, Apply Everywhere: Edit one style and it updates across all menu items — keeping your design consistent.
• Flexible Configuration: Turn dynamic content like text and links into variables for faster iteration.

Step 4: Create the Mobile Navigation

1. Add Mobile Navigation Elements

1. Click the “+” icon in the top-left corner and switch to the Popup panel.

2. Select “Navigation Popup” and drag it next to the right-side button.

   

2. Design the Mobile Navigation Content

1. Select the menu and download button layers, press Ctrl + C to copy, and paste them inside the popup container.

   

2. Change the menu layout from horizontal to vertical.

   

3. Set Up Component Variants

1. Select the Header component and click “+ Variant” to create a new one.

   

2. Rename this new variant to “Mobile”.

   

3. In the Primary variant (default), hide the mobile navigation component.

   

4. In the Mobile variant, show the mobile navigation and hide the regular menu and download button.

   

Step 5: Create a Tablet Variant (Optional)

If your design requires a dedicated tablet layout, follow these steps:

1. Add another variant and name it “iPad”.

2. Set the width (e.g., 810px).

   

3. Adjust spacing between menu items to 32px.
4. Update the right-side container spacing to 32px as well.

Step 6: Apply Responsive Variants

Assign each variant to the appropriate breakpoint:

• Desktop → Primary

• Tablet → iPad

  

• Mobile → Mobile

  

Preview your design — your responsive navigation should now adapt automatically across devices.

Final Result

Your responsive navigation bar will now have:

• A horizontal layout on desktop
• Adjusted spacing on tablet
• A hamburger menu with vertical navigation on mobile
• Hover interactions for all menu items
• Fully customizable text and link properties

With this tutorial, you’ve built a complete responsive navigation system — efficient, reusable, and easy to maintain — all while following a clean, component-based workflow.