> ## Documentation Index
> Fetch the complete documentation index at: https://help.emaillove.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Navigation links

> How to add responsive navigation bars with automatic mobile hamburger menus

Navigation menus in emails can help subscribers quickly access different sections of your content or website. With the Email Love Figma Plugin, you can add a navigation bar that automatically converts to a mobile-friendly hamburger menu on iPhone devices.

<iframe src="https://www.loom.com/embed/5f57d84842c4430eb94d9a6c14274c74" width="100%" height="400" frameBorder="0" allowFullScreen />

## What You'll Create

* **Desktop view:** A horizontal navigation bar with multiple links
* **Mobile view:** An interactive dropdown hamburger menu (automatic on iPhone)

## Step-by-Step Instructions

<Steps>
  <Step title="Create Your Email Frame">
    Start by creating a frame for your email template in Figma.
  </Step>

  <Step title="Add a Navigation Component">
    1. Go to the **Build Your Own** section in the plugin
    2. Click to add an **Empty Single Column Container**
    3. Click on the column to reveal available components
    4. Scroll down and select the **Navigation** option

    This will add a navigation bar with default link options.
  </Step>

  <Step title="Customize Your Navigation Links">
    **Update the text:**

    1. Select the text you want to change
    2. Type your new link label
    3. Repeat for each navigation item

    **Add URLs to your links:**

    1. Select the text
    2. Go to the **Actions** tab
    3. Choose **Create Link**
    4. Enter your destination URL
  </Step>

  <Step title="Style Your Navigation">
    **Change fonts:**

    * Select the navigation frame
    * Update the font in the typography settings

    **Remove underlines from links:**

    1. Select the text
    2. Go to the **Typography** section
    3. Open **Type Settings**
    4. Set **Text Decoration** to **None**

    **Add or remove navigation items:**

    * You can copy existing links and add more items
    * Aim for 4-5 links maximum for best display
  </Step>

  <Step title="Preview Your Navigation">
    Use the preview function to see how your navigation will render:

    * **Desktop view:** Links display horizontally in light and dark modes
    * **iPhone view:** Navigation automatically converts to an interactive hamburger menu

    No additional configuration needed. The mobile transformation happens natively.
  </Step>
</Steps>

## Technical Details

The plugin uses MJML's native `MJ-NAVBAR` component, which provides built-in responsive behavior for mobile devices. The navigation automatically adapts based on screen size without requiring custom code.

## Quick Start Option

If you want to use a pre-built navigation menu:

1. Look for the out-of-the-box navigation options in the **Header section** of the plugin
2. Select a pre-configured navigation style
3. Customize the links and styling to match your brand

## Best Practices

* **Keep it simple:** 4-5 navigation items work best
* **Use clear labels:** Make link purposes obvious
* **Test on mobile:** Always preview to ensure the mobile experience works smoothly
* **Match your brand:** Style the navigation to align with your overall email design