# Responsive Navigation Tutorial | Creght Visual Documentation

> This tutorial will guide you through creating a responsive navigation bar using component-based thinking — design once, and make it adapt seamlessly across desk…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)Help Center](/en/help.md)

[Changelog](/en/blogs.md)

[AI](/en/docs/ai/quick-create-first-website.md) [Visual](/en/docs/get-start.md)

Basic

- [Get to Know Creght in 2 Minutes](/en/docs/get-start.md)
- [How to Register for Creght](/en/docs/signup.md)
- [Creating a Project in Creght](/en/docs/create-site.md)
- [Templates](/en/docs/tpls.md)

Design

- [Using the Editor](/en/docs/editor.md)
- [Basic Operations](/en/docs/operating.md)
- [Layouts in Creght](/en/docs/layout.md)
- [Position in Creght](/en/docs/position.md)
- [Size in Creght](/en/docs/size.md)
- [Breakpoints in Creght](/en/docs/breakpoint.md)
- [Overlays](/en/docs/popover.md)
- [Components in Creght](/en/docs/components.md)
- [Adding Third-Party Fonts](/en/docs/tp-font.md)
- [Duplicate and Deep Copy](/en/docs/deep-copy.md)

CMS

- [CMS (Content Management System)](/en/docs/cms.md)
- [Importing WeChat Official Account Articles into CMS](/en/docs/wxmp.md)

Site Setting

- [Page Settings](/en/docs/page-setting.md)
- [How to Upgrade a Plan](/en/docs/manage-plan.md)
- [SEO Settings](/en/docs/seo-setting.md)
- [Small Files (Site Verification)](/en/docs/verification-file.md)
- [Adding a Custom Domain in Creght](/en/docs/custom-domain.md)
- [How to Complete ICP Filing](/en/docs/beian.md)
- [Server Nodes](/en/docs/website-node.md)
- [How to Switch Sites](/en/docs/pxrp79jqtnyq.md)
- [Localization](/en/docs/localization.md)

AI

- [About Creght AI](/en/docs/creght-ai.md)

Tool

- [Convert Figma Designs into Live Websites](/en/docs/figma-to-creght.md)
- [3 Guidelines for Responsive Figma Layouts](/en/docs/figma-autolayout.md)
- [Covert Figma to live website](/en/docs/response-site.md)
- [Figma to Responsive Website: Interactions](/en/docs/figma03.md)
- [Compressing Video with FFmpeg](/en/docs/ffmpeg.md)
- [How to Add Clarity to Your Website](/en/docs/clarity.md)
- [Creating a Button Hover Effect](/en/docs/button.md)
- [How to Build a Reusable Collapsible FAQ Panel](/en/docs/collapse.md)
- [Responsive Navigation Tutorial](/en/docs/nav.md)

Tool/

# 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”**.

![image.png](https://fsu.creght.com/user/3/mjlfcuowKpM__image.png)

## **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”**.

![image.png](https://fsu.creght.com/user/3/mjlfcuWZRLd__image.png)

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

![image.png](https://fsu.creght.com/user/3/mjlfcNGJwnm__image.png)


### 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).

![image.png](https://fsu.creght.com/user/3/mjlXrmbSGWo__image.png)


### 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”**.

![image.png](https://fsu.creght.com/user/3/mjlXrspbgNp__image.png)

3. Rename the variable for clarity and easy management.

![image.png](https://fsu.creght.com/user/3/mjlXrtSPOlt__image.png)


### 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”**.

![image.png](https://fsu.creght.com/user/3/mjlXrwjmHiZ__image.png)


## **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.

![image.png](https://fsu.creght.com/user/3/mjlXrxkasmo__image.png)


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

![](https://fsu.creght.com/user/3/mjlXeslzJKt__nav_preview1.gif)

**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.

![image.png](https://fsu.creght.com/user/3/mjlXrmbSGWo__image.png)


### 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.

![image.png](https://fsu.creght.com/user/3/mjlXrzbxLCh__image.png)

2. Change the menu layout from horizontal to vertical.

![image.png](https://fsu.creght.com/user/3/mjlXrEGJsPH__image.png)


### 3\. Set Up Component Variants

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

![image.png](https://fsu.creght.com/user/3/mjlXrHuKoEL__image.png)

2. Rename this new variant to **“Mobile”**.

![image.png](https://fsu.creght.com/user/3/mjlXrJYCBSN__image.png)

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

![image.png](https://fsu.creght.com/user/3/mjlXrPxAdGh__image.png)

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

![image.png](https://fsu.creght.com/user/3/mjlXrWOWxBb__image.png)


## **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).

![image.png](https://fsu.creght.com/user/3/mjlXseDtFCX__image.png)

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

![image.png](https://fsu.creght.com/user/3/mjlXsnTbcQt__image.png)

## **Step 6: Apply Responsive Variants**

Assign each variant to the appropriate breakpoint:

- **Desktop** → Primary
- **Tablet** → iPad

![image.png](https://fsu.creght.com/user/3/mjlXsMwPNvi__image.png)

- **Mobile** → Mobile

![image.png](https://fsu.creght.com/user/3/mjlXsVHWvUB__image.png)


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

![](https://fsu.creght.com/user/3/mjlWTbSKGGj__nav_preview.gif)

## **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.

On this page

- [Overview](#overview)
- [Step 1: Create the Header Component](#step-1-create-the-header-component)
- [Step 2: Create a Reusable Menu Item Component](#step-2-create-a-reusable-menu-item-component)
- [1\. Create the Menu Item Component](#1-create-the-menu-item-component)
- [2\. Add Hover Interaction](#2-add-hover-interaction)
- [3\. Create Component Variables](#3-create-component-variables)
- [Text Variable](#text-variable)
- [Link Variable](#link-variable)
- [Step 3: Apply the Menu Item Component](#step-3-apply-the-menu-item-component)
- [Why Use Componentized Menu Items?](#why-use-componentized-menu-items)
- [Step 4: Create the Mobile Navigation](#step-4-create-the-mobile-navigation)
- [1\. Add Mobile Navigation Elements](#1-add-mobile-navigation-elements)
- [2\. Design the Mobile Navigation Content](#2-design-the-mobile-navigation-content)
- [3\. Set Up Component Variants](#3-set-up-component-variants)
- [Step 5: Create a Tablet Variant (Optional)](#step-5-create-a-tablet-variant-optional)
- [Step 6: Apply Responsive Variants](#step-6-apply-responsive-variants)
- [Final Result](#final-result)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

This website is built with [Creght](/en.md)

![User Community](https://ugc.talizen.com/_assets/site/2061660904709165056/1781070374701__help_qr.webp)

User Community

## Links

- [Pricing](/en/price.md)
- [Solutions](/en/solution.md)
- [Customers](/en/customers.md)
- [Help Center](/en/help.md)
- [Contact Us](/en/contact.md)
- [Blog](/en/blogs.md)
- [Refund Policy](/en/tuikuan.md)

## Resources

- [All Resources](/en/resources.md)
- [Templates](/en/templates.md)
- [Components](https://creghtlib.site.creght.com)
- [Animations](/en/effects.md)
- [Figma to Creght](/en/figma2creght.md)
- [API for AI](/en/api.md)

## Comparisons

- [vs Shianxianle](/en/creght-vs-sxl.md)
- [vs Fanke](/en/creght-vs-fkw.md)
- [自己写代码 vs Creght](/en/compare/self-coding.md)
- [外包 vs 自己做](/en/compare/outsourcing.md)

## Terms

- [Terms of Service](/en/legal/terms.md)
- [Privacy Policy](/en/legal/privacy.md)
- [Acceptable Use Policy](/en/legal/acceptable-use.md)

## Social Media

- [Xiaohongshu](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [Bilibili](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)